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

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

در این مطلب با ادامه استایلهای مرتبط با فرمها در خدمتتون هستم.

استایل های موجود برای المنت Select

المنت Select با استایل پیش فرض مرورگر:

<div class="row">
    <select class="browser-default">
        <option value="" disabled selected>Select Fruit</option>
        <option value="1">Mango</option>
        <option value="2">Orange</option>
        <option value="3">Apple</option>
    </select>
</div>

همونطور که دیدین به المنت select مورد نظر کلاس browser-default رو دادیم، این مورد باعث میشه که این المنت با همون استایل خود مرورگر نمایش داده بشه.

خروجی:

میبینید که استایل پیش فرض برای اون اعمال شده.

المنت Select با استایل Materialize:

<div class="row">
    <select>
        <option value="" disabled selected>Select Fruit</option>
        <option value="1">Mango</option>
        <option value="2">Orange</option>
        <option value="3">Apple</option>
    </select>
</div>

اگه بخواید این استایلها به select اعمال بشن باید از Javascript هم استفاده کنید. بعد از اینکه jquery و materialize.js رو وارد کردید، کد زیر رو باید قرار بدین:

$(document).ready(function() {
    $('select').material_select();
});

همونطور که دیدید همه المنتهای Select رو انتخاب کرده و متد materialize_select رو برای اونا فراخوانی کرده.

خروجی:

میبینید که چقدر زیباتر میشه، حالا اگر بر روی اون کلیک کنیم، بصورت زیر باز میشه:

المنت Select غیر فعال با استایل پیش فرض مرورگر:

<div class="row">
    <select class="browser-default" disabled>
        <option value="" disabled selected>Select Fruit</option>
        <option value="1">Mango</option>
        <option value="2">Orange</option>
        <option value="3">Apple</option>
    </select>
</div>

خروجی:

المنت Select غیر فعال با استایل Materialize:

<div class="row">
    <select disabled>
        <option value="" disabled selected>Select Fruit</option>
        <option value="1">Mango</option>
        <option value="2">Orange</option>
        <option value="3">Apple</option>
    </select>
</div>

خروجی:

المنت Select با قابلیت انتخاب چند مورد:

<div class="row">
    <select multiple>
        <option value="" disabled selected>Select Fruit</option>
        <option value="1">Mango</option>
        <option value="2">Orange</option>
        <option value="3">Apple</option>
    </select>
</div>

میبینید که برای select ویژگی multiple قرار داده شده. زمانی که بر روی Select کلیک میکنید، زیرمجموعه های اون بصورت زیر باز میشن:

حلا میتونین هر کدوم رو که خواستین انتخاب کنید و با انتخاب هر کدوم تیک اون زده میشه.

المنت Select با optgroup:

<div class="row">
    <select>
        <optgroup label="Fruits">
            <option value="1">Mango</option>
            <option value="2">Orange</option>
            <option value="3">Apple</option>
        </optgroup>
        <optgroup label="Vegs">
            <option value="4">Brinjal</option>
            <option value="5">Potato</option>
            <option value="6">Tomato</option>
        </optgroup>
    </select>
</div>

همونطور که دیدین option های موجود در select با استفاده از المنت optgroup، گروه بندی شدن. اگر بر روی المنت Select کلیک کنیم، بصصورت زیر باز میشه:

المنت Select با تصویر:

<div class="row">
    <select class="icons">
        <option value="" disabled selected>Select Technology</option>
        <option value="1" data-icon="html5-mini-logo.jpg" class="circle">HTML</option>
        <option value="2">JavaScript</option>
        <option value="3">CSS</option>
    </select>
</div>

همونطور که دیدید درون ویژگی data-icon تصویر مورد نظر خودمون رو قرار دادیم. خروجی بصورت زیر خواهد بود:

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

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

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

یا علی

Source

نویسنده

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

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