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

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

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

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

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

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

ورودی متنی:

<i class="material-icons prefix">account_circle</i>

<label for="name">Useame</label>

</div>

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

خروجی: