دکمه (Button)
دکمه برای شروع یک عملیات فوری استفاده می شود و زمانی که یک عمل یا رویداد را راه اندازی می کند استفاده می شود
نوع (Variant)
چند نوع ظاهر مختلف برای دکمه وجود دارد. میتوانید مقدار ویژگی
variant را به
default، twoTone، solid، یا plain تنظیم کنید.اندازه (Size)
دکمهها دارای چهار نوع اندازه هستند:
xs، sm، md و lg. اندازه پیشفرض md است.رنگ (Color)
میتوانید استایل دکمهها را با بازنویسی کلاسهای Tailwind CSS سفارشی کنید.
غیرفعال (Disabled)
دکمه غیرفعال از تعامل کاربر جلوگیری میکند. ویژگی
disabled را روی true قرار دهید تا دکمه غیرفعال شود.شکل (Shape)
شکل دکمه میتواند به
none یا circle تنظیم شود. شکل پیشفرض round است.آیکون (Icon)
میتوانید با اضافه کردن آیکون به ویژگی
icon، دکمهای همراه با آیکون ایجاد کنید.دکمه همراه با آیکون (Button With Icon)
میتوانید آیکونها را به دکمهها اضافه کنید و آنها را با متن ترکیب کنید، همانطور که در مثالهای زیر نشان داده شده است.
در حال بارگذاری (Loading)
با تنظیم ویژگی
loading روی true، نشانگر بارگذاری نمایش داده میشود و دکمه نیز غیرفعال میشود.بلوک (Block)
دکمهها میتوانند با اضافه کردن ویژگی
block تمام عرض را پر کنند.API
(دکمه) Button
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| variant | نوع دکمه | 'solid' | 'plain' | 'default' | 'default' |
| size | اندازه دکمه | 'lg' | 'md' | 'sm' | 'xs' | 'md' |
| clickFeedback | اثر بازخورد هنگام کلیک روی دکمه | boolean | true |
| customColorClass | تابع بازگشتی برای ایجاد رنگ سفارشی برای دکمه | (state: {active: boolean, unclickable: boolean}) => string | - |
| shape | شعاع حاشیه دکمه | 'round' | 'circle' | 'none' | 'round' |
| disabled | از تعامل کاربر با دکمه جلوگیری میکند | boolean | false |
| icon | آیکون را نمایش میدهد | string | ReactNode | - |
| active | دکمه را به وضعیت فعال تغییر میدهد | boolean | false |
| loading | یک نشانگر بارگذاری را نشان میدهد و دکمه را غیرفعال میکند | boolean | false |
| block | دکمه را به صورت تمام عرض به اندازه کانتینر خود میسازد | boolean | false |