• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 294 ۸ اردیبهشت ۹۵

در این جلسه با ادامه موضوع مربوط به طراحی متریال با 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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram