campaign-Ghorban-to-Ghadir

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



visibility  
mode_comment   ۰

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

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

استایل Switch برای Checkbox:

همونطور که دیدید برای div مورد نظر کلاس switch قرار داده شده و درون اون یک checkbox قرار داره.

خروجی:c1

استایل Switch غیر فعال:

همونطور که دیدید برای checkbox، ویژگی disabled رو قرار دادیم.

خروجی:c2

استایل برای ورودی file:

همونطور که دیدید به div مورد نظر کلاس file-field رو نسبت دادیم.

خروجی بصورت زیر خواهد بود:f1

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

همونطور که دیدید برای ورودی file، ویژگی multiple قرار داده شده.

خروجی:f2

استایل برای ورودی از نوع range:

همونطور که دیدید برای p مورد نظر که parent ورودی از نوع range هست، کلاس range-filed رو قرار دادیم.

خروجی:r1

استایل ریبا برای ورودی date و تبدیل اون به Datapicker:

همونطور که میبینید برای ورودی از نوع date کلاس datapicker رو قرار دادیم.

خروجی:d1

استایل برای شمارنده کاراکتر باقیمانده:

میبینید که برای input از نوع text و textarea ویژگی length رو قرار دادیم. برای مورد اول 10 و برای مورد دوم 120 قرار دادیم.

خروجی:s10

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

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

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

یا علی

Source

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

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