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

در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.

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

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

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

مثالها

ورودی متنی:

<div class="row">
    <div class="input-field col s6">
        <i class="material-icons prefix">account_circle</i>
        <input placeholder="Username" value="Mahesh" id="name" type="text" class="active validate" required>
        <label for="name">Username</label>
    </div>
</div>

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

خروجی:

ورودی Password:

<div class="row">
    <div class="input-field col s6">
        <label for="password">Password</label>
        <input id="password" type="password" placeholder="Password" class="validate" required>
    </div>
</div>

خروجی:

ورودی Email:

<div class="row">
    <div class="input-field col s12">
        <input placeholder="Email" id="email" type="email" class="validate">
        <label for="email">Email</label>
    </div>
</div>

خروجی:

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

ورودی textarea:

<div class="row">
    <div class="input-field col s12">
        <i class="material-icons prefix">mode_edit</i>
        <textarea id="address" class="materialize-textarea"></textarea>
        <label for="address">Address</label>
    </div>
</div>

خروجی:

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

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

<div class="row">
    <div class="input-field col s12">
        <input placeholder="Comments (Disabled)" id="comments" type="text" disabled>
        <label for="comments">Comments</label>
    </div>
</div>

خروجی:

چک باکسها:

<div class="row">
    <div class="input-field col s12">
        <p>
            <input id="married" type="checkbox" checked="checked">
            <label for="married">Married</label>
        </p>
        <p>
            <input id="single" type="checkbox" class="filled-in">
            <label for="single">Single</label>
        </p>
        <p>
            <input id="dontknow" type="checkbox" disabled="disabled">
            <label for="dontknow">Don't know (Disabled)</label>
        </p>
    </div>
</div>

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

خروجی:

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

<div class="row">
    <div class="input-field col s12">
        <p>
            <input id="male" type="radio" name="gender" value="male" checked>
            <label for="male">Male</label>
        </p>
        <p>
            <input id="female" type="radio" name="gender" value="female" checked>
            <label for="female">Female</label>
        </p>
        <p>
            <input id="dontknow1" type="radio" name="gender" value="female" disabled>
            <label for="dontknow1">Don't know (Disabled)</label>
        </p>
    </div>
</div>

خروجی:

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

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

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

یا علی

Source

نویسنده

محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.