آموزش طراحی متریال با 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

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.