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

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

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

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 رو به اون نسبت دادیم.  این ورودی در ابتدا مقداری رو در خودش داره.

خروجی:i

ورودی 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>

خروجی:i2

ورودی 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>

خروجی:i3

اگر ایمیلی که وارد میکنید درست باشه خط زیری سبز میشه و اگر اشتباه باشه قرمز میشه. این مورد رو با استفاده از کلاس 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>

خروجی:i4

میبینید که هر چه متن بیشتری رو بنویسیم، ارتفاع 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>

خروجی:i5

چک باکسها:

<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 هست و مورد سومی هم غیر فعال هست.

خروجی:i6

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

<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>

خروجی:i7

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

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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