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

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

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

در مورد Dropdown

با استفاده از Materialize میتونین dropdown های زیبایی رو بوجود بیارید و با استفاده از اونا ul ها رو زیباتر و پیشرفته تر کنید.

مواردی که در این زمینه وجود دارند شامل:

  • dropdown-content : این کلاس برای ul اجباری هست و مشخص میکنه که بصورت Dropdown نمایش داده بشه
  • data-activates : این ویژگی رو برای فعالگر dropdown قرار میدیم و بعنوان مقدار اون، id لیست یا ul رو قرار میدیم

مثال:

<ul id="dropdown" class="dropdown-content">
    <li><a href="#">Inbox<span class="badge">12</span></a></li>
    <li><a href="#!">Unread<span class="new badge">4</span></a></li>
    <li><a href="#">Sent</a></li>
    <li class="divider"></li>
    <li><a href="#">Outbox<span class="badge">14</span></a></li>
</ul>

<a class="btn dropdown-button" href="#" data-activates="dropdown">Mail Box<i class="mdi-navigation-arrow-drop-down right"></i></a>

خروجی:dropdown

در مورد Tab در Materialize

Materialize کلاسهایی داره که با استفاده از اونا میتونین ul رو بصورت تب بندی در بیارید و اونو در سایتتون قرار بدین. کلاسهایی که در این زمینه وجود داره عبارتند از:

  • tabs : این کلاس برای المنت ul اجباری هست و مشخص میکنه که اون یک تب هست
  • active : باعث میشه که یک تب فعال بشه

مثال:

<div class="col s12">
    <ul class="tabs">
        <li class="tab col s3"><a href="#inbox">Inbox</a></li>
        <li class="tab col s3"><a class="active" href="#unread">Unread</a></li>
        <li class="tab col s3 disabled"><a href="#outbox">Outbox (Disabled)</a></li>
        <li class="tab col s3"><a href="#sent">Sent</a></li>
    </ul>
</div>
<div id="inbox" class="col s12">Inbox</div>
<div id="unread" class="col s12">Unread</div>
<div id="outbox" class="col s12">Outbox (Disabled)</div>
<div id="sent" class="col s12">Sent</div>

میبینید که در انتها 4 عدد div قرار دادیم و برای هر کدوم یک id مشخص کردیم. بعد از اون در هر li یک a قرار دادیم و درون href هر کدوم مقدار id متناظرشون رو قرار دادیم. با اینکار روی هر تب که کلیک میکنیم، محتوای div متناظر با اون نمایش داده میشه.

خروجی:tabs

در مورد Waves

Materialize تعدادی کلاس قرار داده که با استفاده از اونا میتونین افکت موجی زیبا که یکی از خصوصیتهای اصلی طراحی متریال هست رو اضافه کنید. کلاسهایی که در این زمینه وجود داره بصورت زیر هست:

  • waves effect : با اضافه کردن این کلاس به المنت مورد نظر مشخص میکنید که اون المنت افکت موجدار میخاد
  • waves-light : با استفاده از این کلاس رنگ موج رو سفید قرار میدین
  • waves-red : با استفاده از این کلاس رنگ موج رو قرمز قرار میدین
  • waves-green : با استفاده از این کلاس رنگ موج رو سبز قرار میدین
  • waves-yellow : با استفاده از این کلاس رنگ موج رو زرد قرار میدین
  • waves-orange : با استفاده از این کلاس رنگ موج رو نارنجی قرار میدین
  • waves-purple : با استفاده از این کلاس رنگ موج رو صورتی قرار میدین
  • waves-teal : با استفاده از این کلاس رنگ موج رو سبز-آبی قرار میدین

مثال:

<div class="collection-item">
    <code class=" language-markup">Default</code>
    <a href="#!" class="waves-effect btn secondary-content">Click Me!</a>
</div>
<div class="collection-item">
    <code class=" language-markup">waves-light</code>
    <a href="#!" class="waves-effect waves-light btn secondary-content">Click Me!</a>
</div>
<div class="collection-item">
    <code class=" language-markup">waves-red</code>
    <a href="#!" class="waves-effect waves-red btn secondary-content">Click Me!</a>
</div>
<div class="collection-item">
    <code class=" language-markup">waves-yellow</code>
    <a href="#!" class="waves-effect waves-yellow btn secondary-content">Click Me!</a>
</div>
<div class="collection-item">
    <code class=" language-markup">waves-orange</code>
    <a href="#!" class="waves-effect waves-orange btn secondary-content">Click Me!</a>
</div>
<div class="collection-item">
    <code class=" language-markup">waves-purple</code>
    <a href="#!" class="waves-effect waves-purple btn secondary-content">Click Me!</a>
</div>
<div class="collection-item">
    <code class=" language-markup">waves-green</code>
    <a href="#!" class="waves-effect waves-green btn secondary-content">Click Me!</a>
</div>
<div class="collection-item">
    <code class=" language-markup">waves-teal</code>
    <a href="#!" class="waves-effect waves-teal btn secondary-content">Click Me!</a>
</div>

خروجی:waves

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

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

یا علی

Source

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

جلسات دوره

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

hosein farahani

اگر راجب ستون بندی هاشم یه توضیحی میدادید عالی میشد

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

منظورتون گریدبندی هست؟
میتونین در این لینک مطالعه کنید خودتون
http://materializecss.com/grid.html
موفق باشید

نیاز به لاگین

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