campaign-Ghorban-to-Ghadir

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



visibility  
mode_comment   ۰

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

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

کلاسهایی که در این زمینه وجود دارند عبارتند از:

  • input-field : با نسبت دادن این کلاس به div، اون المنت رو به عنوان field container در میاریم. این کلاس اجباری هست
  • validate : با نسبت دادن این کلاس به المنت فرم مورد نظر باعث میشید که استایلهای اعتبارسنجی مناسب به اون اعمال بشه
  • active : اون المنت رو با استایل فعال نمایش میده
  • materialize-textarea : از این کلاس برای استایل دادن به Textarea استفاده میشه. textarea بصورت اتوماتیک متناسب با متنی که درونش هست تغییر اندازه میده
  • filled-in : با دادن این کلاس به checkbox باعث میشه که بصورت دیگری تیک خورده بشه

مثالها

ورودی متنی:

میبینید که یک input از نوع متنی قرار دادیم و کلاسهای Active و validate رو به اون نسبت دادیم.  این ورودی در ابتدا مقداری رو در خودش داره.

خروجی:i

ورودی Password:

خروجی:i2

ورودی Email:

خروجی:i3

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

ورودی textarea:

خروجی:i4

میبینید که هر چه متن بیشتری رو بنویسیم، ارتفاع textarea متناسب با اون تغییر میکنه.

ورودی متنی غیرفعال:

خروجی:i5

چک باکسها:

میبینید که مورد دومی دارای کلاس filled-in هست و مورد سومی هم غیر فعال هست.

خروجی:i6

رادیو باکسها:

خروجی:i7

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

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

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

یا علی

Source

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

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