اسلایدر ها در طراحی متریال

اسلایدر ها در طراحی متریال

تاریخ انتشار: 22 اسفند 1394

تعداد بازدید: 2 نفر

اسلایدر

اسلایدر ها به کاربر اجازه میدهند یک مقدار را از یک محدوده پیوسته یا گسسته از مقادیر از طریق حرکت دادن زبانه اسلایدر انتخاب نماید. کمترین مقدار در چپ و بیشترین مقدار در راست قرار میگیرد. ویژگی تعاملی اسلایدر آن را تبدیل به گزینه ای مناسب برای تنظیماتی مانند میزان صدا، نور یا شدت رنگ کرده است.

اسلایدر پیوسته :

زمینه روشن :

زبانه در حالت روشن : شفافیت 100% ، Swatch 500
خط در حالت روشن : شفافیت 100% ، Swatch 500

زبانه در حالت خاموش : شفافیت 26% ، 000000#
خط در حالت خاموش : شفافیت 26% ، 000000#

زبانه در حالت کلیک شده و خاموش : شفافیت 38% ، 000000#
خط در حالت کلیک شده و خاموش : شفافیت 38% ، 000000#

در حالت غیرفعال : شفافیت 26% ، 000000#

زمینه روشن

زمینه تیره :

زبانه در حالت روشن : شفافیت 100% ، Swatch 200
خط در حالت روشن : شفافیت 100% ، Swatch 200

زبانه در حالت خاموش : شفافیت 30% ، FFFFFF#
خط در حالت خاموش : شفافیت 30% ، FFFFFF#

در حالت غیرفعال : شفافیت 30% ، FFFFFF#

زمینه تیره

 
فاصله گذاری برای آیکون ها در سمت راست یا چپ نوار :
 

مثال برای فاصله گذاری آیکون ها در یک اسلایدر


مثال برای اسلایدر ها در حالت نرمال، Hover ، متمرکز، کلیک شده و غیرفعال

اسلایدر  پیوسته همراه با مقدار عددی قابل ویرایش :

برای تنظیماتی که کاربر نیاز به تعیین دقیق مقدار دارد از این حالت استفاده نمایید. با فشار دادن زبانه، متن آن قابل ویرایش میشود و به طور اتوماتیک با حرکت دادن زبانه مقدار آن تغییر میکند.
 

اسلایدر با مقدار عددی قابل ویرایش


اسلایدر با مقدار عددی قابل ویرایش در حالت نرمال، hover ، متمرکز، کلیک شده و غیرفعال

اسلایدر گسسته :

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

اسلایدر گسسته همراه با برچسب عددی :

برای تنظیماتی که کاربر نیاز به دانستن دقیق مقادیر دارد از این حالت استفاده کنید.
 

زمینه روشن


زمینه تیره



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

اشتراک گذاری:
021-41658