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

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



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

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

0 275 ۱۰ اردیبهشت ۹۵

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram