باتن ها

برای استفاده از باتن ها کافی است با کلاس های داده شده کار کنید و استایل های مربوطه با کلاس های تعریف شده قابل کنترل است.
باتن ها 4 نوع هستند که هرکدام میتواند 3 حالت داشته باشد که همگی کلاس باتن ها با b_ شروع میشود.
انواع باتن ها عبارتند از:

نوع باتن: Fill
نام نوع کلاس: b_fill-btn
حالت کلاس ها: b_icon-btn - b_icon-btn--اندازه
نوع باتن: Tonal
نام نوع کلاس: b_tonal-btn
حالت کلاس ها: b_icon-btn - b_icon-btn--اندازه
نوع باتن: Outline
نام نوع کلاس: b_outline-btn
حالت کلاس ها: b_icon-btn - b_icon-btn--اندازه
نوع باتن: Text
نام نوع کلاس: b_text-btn
حالت کلاس ها: b_icon-btn - b_icon-btn--اندازه

درصورت نیاز برای نمایش فقط عنوان در باتن نام نوع کلاس را به باتن اضافه کنین.
درصورت نیاز برای نمایش عنوان و آیکون در باتن علاوه بر نام نوع کلاس باید کلاس b_icon-btn را به باتن اضافه کنین.
در صورت نیاز برای نمایش فقط آیکون در باتن باید نام نوع کلاس و کلاس b_icon-btn--اندازه را به باتن اضافه کنین.

برای تغییر رنگ باتن ها میتوانید از کلاس های آماده استفاده کنید برای مثال:
background-color => b_نام رنگ متغییر
color => b_نام رنگ متغییر
border-color => b_نام رنگ متغییر
برای توضیحات بیشتر میتوانید به پایین صفحه مراجعه کرده و لیست کلاس ها را مشاهده کنید.

باتن fill

باتن tonal

باتن outline

باتن text

حالت باتن ها

ایجاد باتن جدید

برای ایجاد باتن باید به چند نکته توجه کرد که عبارتنداز:
- برای ایجاد باتن میتوانید از " Mixin " آماده شده استفاده کنید.
- برای ایجاد " ۱ نوع باتن " باید همه نوع های آن باتن ایجاد شود برای مثال:
" secodary: b_secodary--fill-btn , b_secodary--tonal-btn , b_secodary--outline-btn , b_secodary--text-btn "
- برای تعریف نام باتن باید به صورت " b_secodary--fill-btn | b_secodary--tonal-btn " باشد.

لیست کلاس ها

# نوع باتن ها

  • b_fill-btn
  • b_tonal-btn
  • b_outline-btn
  • b_text-btn

- برای اعمال نوع باتن به حالت fill میتوانید از کلاس " b_fill-btn " استفاده کنید.
- برای اعمال نوع باتن به حالت tonal میتوانید از کلاس " b_tonal-btn " استفاده کنید.
- برای اعمال نوع باتن به حالت outline میتوانید از کلاس " b_outline-btn " استفاده کنید.
- برای اعمال نوع باتن به حالت text میتوانید از کلاس " b_text-btn " استفاده کنید.

# اندازه

  • lg
  • md
  • sm
  • xs

- برای اعمال سایز باتن به حالت بزرگ میتوانید از کلاس " lg " استفاده کنید.
- برای اعمال سایز باتن به حالت متوسط میتوانید از کلاس " md " استفاده کنید.
- برای اعمال سایز باتن به حالت کوچک میتوانید از کلاس " sm " استفاده کنید.
- برای اعمال سایز باتن به حالت خیلی کوچک میتوانید از کلاس " xs " استفاده کنید.

# آیکون

  • b_icon-btn

- اگر آیکونی در باتن ها استفاده شود باید از کلاس " b_icon-btn " استفاده شود که استایل های مربوط به آیکون را در برگیرد.

# باتن های آیکونی

  • b_icon-btn--lg
  • b_icon-btn--md
  • b_icon-btn--sm
  • b_icon-btn--xs

- برای اعمال سایز باتن های فقط آیکونی به حالت بزرگ میتوانید از کلاس " b_icon-btn--lg " استفاده کنید.
- برای اعمال سایز باتن های فقط آیکونی به حالت متوسط میتوانید از کلاس " b_icon-btn--md " استفاده کنید.
- برای اعمال سایز باتن های فقط آیکونی به حالت کوچک میتوانید از کلاس " b_icon-btn--sm " استفاده کنید.
- برای اعمال سایز باتن های فقط آیکونی به حالت خیلی کوچک میتوانید از کلاس " b_icon-btn--xs" استفاده کنید.

# باتن گرد

  • rounded

- برای استفاده از باتن ها به صورت کاملا گرد باید کلاس " rounded " را به باتن مورد نظر اعمال کنیم.

# غیرفعال

  • disabled

- برای استفاده از باتن ها به صورت غیرفعال باید props را " disabled " به باتن مورد نظر اعمال کنیم.

# بارگیری

  • loading

- برای استفاده از باتن ها به صورت بارگیری باید props را " loading " به باتن مورد نظر اعمال کنیم.