mantine (TextInput , Select, Checkbox, Radio Group)

🇮🇷 دنیای جذاب کامپوننتهای Mantıne: گشت و گذار در میان ابزارهای کاربردی 🇮🇷

سلام به رفقای برنامهنویس فارسیزبان!

امروز میخوایم یه گپ دوستانه باهاتون داشته باشیم راجع به کامپوننتهای Mantıne، یه سری ابزار فوقالعاده برای ساخت رابطهای کاربری جذاب و کارآمد.

ما توی این مقاله به 4 تا از محبوبترین کامپوننتهای Mantıne میپردازیم:

1. TextInput:

TextInput یه ابزار قدرتمند برای ساخت فیلدهای ورودی متن هستش.

ویژگیهای اصلی TextInput:

• پراپها:value: مقدار فعلی فیلد ورودی
  onChange: تابعی که هر بار مقدار فیلد ورودی تغییر میکنه اجرا میشه
  placeholder: متنی که داخل فیلد ورودی به صورت پیشفرض نمایش داده میشه
  label: برچسب فیلد ورودی
  size: اندازه فیلد ورودی (کوچک، متوسط، بزرگ)
  variant: نوع فیلد ورودی (پیشفرض، مخفی، شبحوار)
  error: نمایش خطای اعتبارسنجی
  required: الزامی بودن فیلد ورودی
  

مثال:

JavaScript

import { TextInput } from '@mantine/core';

const MyTextInput = () => (
  <TextInput
    value=&quotمتن پیشفرض&quot
    ={(e) => console.log(e.target.value)}
    placeholder=&quotمتن مورد نظر خود را وارد کنید&quot
    label=&quotنام شما&quot
    size=&quotmd&quot
    variant=&quotdefault&quot
    error=&quotمقدار نامعتبر&quot
    required
  />
);

تغییر استایل TextInput:

• Theme: میتونید با استفاده از تم Mantıne، ظاهر TextInput رو به طور کلی تغییر بدید.
• CSS: میتونید با استفاده از CSS، ظاهر TextInput رو به طور خاص تغییر بدید.

2. Select:

Select یه ابزار کاربردی برای ساخت منوی انتخابی هستش.

ویژگیهای اصلی Select:

• پراپها:value: مقدار فعلی منوی انتخابی
  onChange: تابعی که هر بار مقدار منوی انتخابی تغییر میکنه اجرا میشه
  options: لیستی از گزینههای موجود در منو
  label: برچسب منوی انتخابی
  size: اندازه منوی انتخابی (کوچک، متوسط، بزرگ)
  variant: نوع منوی انتخابی (پیشفرض، مخفی، شبحوار)
  multiple: امکان انتخاب چند گزینه به طور همزمان
  

مثال:

JavaScript

import { Select } from '@mantine/core';

const MySelect = () => (
  <Select
    value=&quotگزینه 1&quot
    ={(e) => console.log(e.target.value)}
    options={[
      { value: 'گزینه 1', label: 'گزینه 1' },
      { value: 'گزینه 2', label: 'گزینه 2' },
      { value: 'گزینه 3', label: 'گزینه 3' },
    ]}
    label=&quotانتخاب رنگ&quot
    size=&quotmd&quot
    variant=&quotdefault&quot
    multiple
  />
);

تغییر استایل Select:

• Theme: میتونید با استفاده از تم Mantıne، ظاهر Select رو به طور کلی تغییر بدید.
• CSS: میتونید با استفاده از CSS، ظاهر Select رو به طور خاص تغییر بدید.

3. Checkbox:

Checkbox یه ابزار ساده و کاربردی برای ساخت کادرهای علامتدار هستش.

ویژگیهای اصلی Checkbox:

• پراپها:checked: وضعیت فعلی کادر علامتدار (فعال یا غیرفعال)
  onChange: تابعی که هر بار وضعیت کادر علامتدار تغییر میکنه اجرا میشه
  label: برچسب کادر علامتدار
  size: اندازه کادر علامتدار (کوچک، متوسط، بزرگ)
  variant: نوع کادر علامتدار (پیشفرض، مخفی، شبحوار)
  

مثال:

JavaScript

import { Checkbox } from '@mantine/core';

const MyCheckbox = () => (
  <Checkbox

4. Radio Group:

Radio Group یه ابزار کاربردی برای ساخت گروهی از دکمههای رادیویی هستش.

ویژگیهای اصلی Radio Group:

• پراپها:value: مقدار فعلی دکمه رادیویی انتخابشده
  onChange: تابعی که هر بار مقدار دکمه رادیویی انتخابشده تغییر میکنه اجرا میشه
  options: لیستی از گزینههای موجود در گروه
  label: برچسب گروه دکمههای رادیویی
  size: اندازه دکمههای رادیویی (کوچک، متوسط، بزرگ)
  variant: نوع دکمههای رادیویی (پیشفرض، مخفی، شبحوار)
  

مثال:

JavaScript

import { RadioGroup } from '@mantine/core';

const MyRadioGroup = () => (
  <RadioGroup
    value=&quotگزینه 1&quot
    ={(e) => console.log(e.target.value)}
    options={[
      { value: 'گزینه 1', label: 'گزینه 1' },
      { value: 'گزینه 2', label: 'گزینه 2' },
      { value: 'گزینه 3', label: 'گزینه 3' },
    ]}
    label=&quotانتخاب نوع کاربری&quot
    size=&quotmd&quot
    variant=&quotdefault&quot
  />
);

تغییر استایل Radio Group:

• Theme: میتونید با استفاده از تم Mantıne، ظاهر Radio Group رو به طور کلی تغییر بدید.
• CSS: میتونید با استفاده از CSS، ظاهر Radio Group رو به طور خاص تغییر بدید.