campaign-Ghorban-to-Ghadir

آموزش طراحی متریال با Materialize (جلسه 16) - فرم - بخش دوم



visibility  
mode_comment   ۰

در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.getting-started-materialize-css-framework

در این مطلب با ادامه استایلهای مرتبط با فرمها در خدمتتون هستم.

استایل های موجود برای المنت Select

المنت Select با استایل پیش فرض مرورگر:

همونطور که دیدین به المنت select مورد نظر کلاس browser-default رو دادیم، این مورد باعث میشه که این المنت با همون استایل خود مرورگر نمایش داده بشه.

خروجی:s1

میبینید که استایل پیش فرض برای اون اعمال شده.

المنت Select با استایل Materialize:

اگه بخواید این استایلها به select اعمال بشن باید از Javascript هم استفاده کنید. بعد از اینکه jquery و materialize.js رو وارد کردید، کد زیر رو باید قرار بدین:

همونطور که دیدید همه المنتهای Select رو انتخاب کرده و متد materialize_select رو برای اونا فراخوانی کرده.

خروجی:s2

میبینید که چقدر زیباتر میشه، حالا اگر بر روی اون کلیک کنیم، بصورت زیر باز میشه:s3

المنت Select غیر فعال با استایل پیش فرض مرورگر:

خروجی:s4

المنت Select غیر فعال با استایل Materialize:

خروجی:s5

المنت Select با قابلیت انتخاب چند مورد:

میبینید که برای select ویژگی multiple قرار داده شده. زمانی که بر روی Select کلیک میکنید، زیرمجموعه های اون بصورت زیر باز میشن:s6

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

المنت Select با optgroup:

همونطور که دیدین option های موجود در select با استفاده از المنت optgroup، گروه بندی شدن. اگر بر روی المنت Select کلیک کنیم، بصصورت زیر باز میشه:S7

المنت Select با تصویر:

همونطور که دیدید درون ویژگی data-icon تصویر مورد نظر خودمون رو قرار دادیم. خروجی بصورت زیر خواهد بود:s8

در جلسه بعد المنتهای دیگه فرم رو خدمتتون بیان میکنم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

متخصص فرانت اِند
طراحی وب را اصولی فرا بگیرید اگر تصمیمتو گرفتی که به صورت حرفه ای به طراحی UI مشغول بشی و کسب درآمد کنی دوره فرانت اند رو از دست نده، چون توی این دوره هر چیزی که برای رسیدن به هدفت نیاز داری رو در اختیارت قرار می دیم. متخصص فرانت اِند arrow_back
comment دیدگاه کاربران
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.