• Telegram
  • Google Plus
  • Linked In

کنترل های انتخابی در طراحی متریال

کنترل های انتخابی در طراحی متریال

تاریخ درج: خلاصه

طراحی سایت، متریال دیزاین، ایجاد چک باکس، دکمه رادیویی و سوئیچ در طراحی متریال

کنترل های انتخابی در طراحی متریال

کنترل های انتخابی به کاربر اجازه میدهند که چندین آیتم را از یک مجموعه انتخاب نماید. این کنترل ها 3 نوع مختلف دارند : چک باکس، دکمه های رادیویی و سوئیچ های on/off

چک باکس :

چک باکس ها به کاربر اجازه میدهند که چندین آپشن را در یک مجموعه انتخاب نماید.
اگر چندین آپشن دارید میتوانید از چک باکس به جای سوئیچ های on/off استفاده کنید.

چنانچه یک آپشن دارید از چک باکس استفاده نکنید و به جای آن سوئیچ on/off را به کار ببرید.

زمینه روشن


زمینه تیره

روشن

on : شفافیت 100% ، swatch 500
off : شفافیت 54% ، 000000#
غیرفعال : شفافیت 26% ، 000000#

تیره

on : شفافیت 100% ، swatch 500
off : شفافیت 70% ، FFFFFF#
غیرفعال : شفافیت 30% ، FFFFFF#

دکمه رادیویی :

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

زمینه روشن


زمینه تیره

روشن

on : شفافیت 100% ، swatch 500
off : شفافیت 54% ، 000000#
غیرفعال : شفافیت 26% ، 000000#

تیره

on : شفافیت 100% ، swatch 500
off : شفافیت 70% ، FFFFFF#
غیرفعال : شفافیت 30% ، FFFFFF#

سوئیچ :

سوئیچ ها وضعیت یک گزینه را در تنظیمات تغییر میدهند (روشن/خاموش یا فعال/غیرفعال). برچسب سوئیچ ها باید به گونه ای باشد که به طور واضح و مختصر کارآیی آن سوئیچ را شرح دهد.

زمینه روشن


زمینه تیره

زمینه روشن

دایره در حالت روشن : شفافیت 100% ، swatch 500
بیضی در حالت روشن : شفافیت 50% ، swatch 500

دایره در حالت خاموش : شفافیت 100% ، Grey 50 ، #FAFAFA
بیضی در حالت خاموش : شفافیت 26% ، 000000#

دایره در حالت غیرفعال : شفافیت 100% ، Grey 400 ، #BDBDBD
بیضی در حالت غیرفعال : شفافیت 12% ، 000000#

زمینه تیره

دایره در حالت روشن : شفافیت 100% ، swatch 200
بیضی در حالت روشن : شفافیت 50% ، swatch 200

دایره در حالت خاموش : شفافیت 100% ، Grey 400، #BDBDBD
بیضی در حالت خاموش : شفافیت 30% ، FFFFFF#

دایره در حالت غیرفعال : شفافیت 100% ، Grey 800، #424242
بیضی در حالت غیرفعال : شفافیت 10% ، FFFFFF#



حالت تشعشعی در موبایل های لمسی و حالت معمولی در desktop


مطلب بعدی -> اسلایدرها

تاکنون نظری ارسال نشده است،شما اولین نفر باشید

سؤال یا نظر خود را ارسال کنید

  • Telegram
  • Google Plus
  • Linked In