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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۱۰ اردیبهشت ۱۳۹۵

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

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

استایل Switch برای Checkbox:

<div class="switch">
    <label>Off
        <input type="checkbox" checked><span class="lever"></span>On</label>
</div>

همونطور که دیدید برای div مورد نظر کلاس switch قرار داده شده و درون اون یک checkbox قرار داره.

خروجی:c1

استایل Switch غیر فعال:

<div class="switch">
    <label>Off
        <input disabled type="checkbox"><span class="lever"></span>On</label>
</div>

همونطور که دیدید برای checkbox، ویژگی disabled رو قرار دادیم.

خروجی:c2

استایل برای ورودی file:

<div class="row">
    <div class="file-field input-field">
        <div class="btn">
            <span>Browse</span>
            <input type="file">
        </div>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload file">
        </div>
    </div>
</div>

همونطور که دیدید به div مورد نظر کلاس file-field رو نسبت دادیم.

خروجی بصورت زیر خواهد بود:f1

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

<div class="row">
    <label>Materialize Multi File Input</label>
    <div class="file-field input-field">
        <div class="btn">
            <span>Browse</span>
            <input type="file" multiple>
        </div>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload multiple files">
        </div>
    </div>
</div>

همونطور که دیدید برای ورودی file، ویژگی multiple قرار داده شده.

خروجی:f2

استایل برای ورودی از نوع range:

<div class="row">
    <label>Materialize Range</label>
    <p class="range-field">
        <input type="range" id="test" min="0" max="100" />
    </p>
</div>

همونطور که دیدید برای p مورد نظر که parent ورودی از نوع range هست، کلاس range-filed رو قرار دادیم.

خروجی:r1

استایل ریبا برای ورودی date و تبدیل اون به Datapicker:

<div class="row">
   <input type="date" class="datepicker">
</div>

همونطور که میبینید برای ورودی از نوع date کلاس datapicker رو قرار دادیم.

خروجی:d1

استایل برای شمارنده کاراکتر باقیمانده:

<form class="col s12">
    <div class="row">
        <div class="input-field col s6">
            <input id="name" type="text" length="10">
            <label for="name">Enter Name</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s6">
            <textarea id="comments" class="materialize-textarea" length="120"></textarea>
            <label for="comments">Comments</label>
        </div>
    </div>
</form>

میبینید که برای input از نوع text و textarea ویژگی length رو قرار دادیم. برای مورد اول 10 و برای مورد دوم 120 قرار دادیم.

خروجی:s10

اگر روی هر کدوم از ورودی ها فوکوس کنید، میبینید که در سمت راست و پایین اون المنت مقدار باقیمانده و مصرف شده از کارکترها رو قرار داده.

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

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

یا علی

Source

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

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل