دکمه ها Buttons

دکمه ها نقش مهمی در صفحات وب دارند، داشتن شکل زیبا و خوانا باعث زیبایی و کارآمدی در صفحه می شود.

دکمه ها به دو صورت در صفحات وب وجود دارند، دکمه هایی از جنس button و دکمه هایی از جنس HyperLink.

در این صفحه انواع دکمه ها را به شما نمایش خواهیم داد.

مثال

دکمه ها از جنس button در رنگهای متداول.

رنگها

LTR

RTL

Hyperlink

اکر در جایی از صفحه شما میخواستید دکمه ای از جنس hyperlink داشته باشید، کافیست کلاس button و بقیه کلاسهای مرتبط را اضافه کنید.

LTR

primary secondary third

RTL

اصلی دومی سومی

اندازه ها

اندازه ها طبق استاندارد اندازه گذاری در فریم ورک از xs شروع و با xxxl تمام میشود.

LTR

RTL

دکمه های بلوکی

اگر میخواهید یک دکمه در سطح بلوک گسترش پیدا کند از روش زیر استفاده کنید.

LTR

RTL

حاوی تصویر

شما میتوانید در دکمه یک تصویر برای گویایی بیشتر اضافه نمایید.

LTR

RTL

دکمه بستن

اگر خواستید، دکمه بستن را در کادر یا موضوعی نمایش دهید و یا آنرا به صورت خودکار ببندید، میتوانید از این دکمه استفاده کنید.

تفاوت اصلی این دکمه با دکمه های معمولی داشتن خوصوصیت wn-type است. برای مشاهده آن به مثال زیر توجه کنید.

اگر میخواهید فقط دکمه به شکل بستن نمایش داده شود و کنترل آن دست خود شما باشد، فقط کلاسهای مرتبط را نسبت دهید.

LTR

RTL

اگر میخواهید به صورت خودکار یک موضوعی را حذف کند، به مثال زیر توجه کنید.

برای این منظور id موضوع مورد نظر را در خصوصیت remove-id بنویسید. قوانین نام گذاری بر اساس querySelectorAll است.

دقت کنید، این خصوصیت کل موضوع را به صورت فیزیکی حذف میکند و دیگر قابل برگشت در صفحه نیست، مگر آنکه خود آن را مدیریت کنید.

LTR

RTL

اگر میخواهید به صورت خودکار به موضوعی کلاسی افزوده یا کسر شود، به مثال زیر توجه کنید.

برای این منظور id موضوع مورد نظر را در خصوصیت target بنویسید. قوانین نام گذاری بر اساس querySelectorAll است. همچنین میتوانید با مقدار , از هم جدا کنید. سپس اگر میخواهید کلاسهایی حذف شود، آنها را در خصوصیت remove-class و آنهایی که اضافه شوند را در خصوصیت add-class بنویسید.

LTR

By press close button add primary class.

By press close button removed secondary class.

Reset to third class.

RTL

با انتخاب دکمه بستن، کلاس اصلی اضافه میشود.

با انتخاب دکمه بستن، کلاس دومی حذف میشود.

تنظیم به عنوان سومین تم.

اشکال مختلف

همانند بقیه کنترل ها شما میتوانید با اختصاصی کردن کلاسها، شکل دکمه را نیز برای خود تغییر دهید.

در زیر چند نمونه کلاس پیاده سازی شده نمایش داده میشود.