بخش (Segment)
بخشها گروهی از گزینههای مرتبط را نمایش میدهند که امکان روشن یا خاموش کردن آنها برای کاربر فراهم میشود.
پایه (Basic)
استفاده اساسی از بخش.
اندازه (Size)
بخشها اندازههای دقیقی مشابه
Button دارند.انتخاب چندگانه (Multiple Selection)
بخش از انتخاب چندگانه پشتیبانی میکند، با تنظیم
selectionType به multiple.غیرفعال (Disabled)
با افزودن پراپ
disabled، آیتم بخش را غیرفعال کنید.بخش سفارشی (Custom Segment)
آیتم بخش به ما اجازه میدهد که پراپ را به عنوان فرزند نمایش دهیم تا گزینههای ظاهری سفارشیتری ایجاد کنیم.
شخصی
طرح برای شخصی.
تیمی
طرح برای تیم
کسب و کار
برای طرح کسب و کار با ما صحبت کنید.
کنترل شده (Controlled)
چند نمونه از بخشهای کنترل شده.
انتخاب تک
انتخاب چندگانه
API
بخش (Segment)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| defaultValue | مقدار اولیه برای بخش بدون کنترل | string[] | - |
| onChange | فراخوانی هنگام تغییر مقدار بخش | (segmentValue: string | string[]) => void | - |
| selectionType | آیا فقط یک آیتم یا چند آیتم میتوانند در یک زمان انتخاب شوند | 'single' | 'multiple' | 'single' |
| size | اندازه تمامی آیتمهای بخش. | 'lg' | 'md' | 'sm' | 'xs' | 'md' |
| value | مقدار کنترل شده آیتم بخش برای فعال کردن | string[] | - |
آیتم بخش (Segment.Item)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| children | فرزند آیتم بخش | ({active: boolean, disabled: boolean, value: string[], ref: string, onSegmentItemClick: () => void}) => ReactNode | ReactNode | - |
| disabled | آیا آیتم بخش غیرفعال است | boolean | - |
| size | اندازه آیتم بخش. | 'lg' | 'md' | 'sm' | 'xs' | 'md' |
| value | یک مقدار منحصر به فرد برای آیتم بخش | string | - |