آموزش طراحی متریال با Materialize (جلسه 9) - علامتها و Breadcrumb

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

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

علامت‌ها یا Badges

با استفاده از Badges میتونین اعداد یا آیکون مورد نظرتون رو مورد تاکید قرار بدین و کاری کنید که کاربران بهتر اونو ببینن. در این زمینه 2 کلاس وجود داره:

  • badge : با استفاده از این کلاس میتونین بگید که این المنت یک علامت یا badge هست. باید این کلاس رو به span مورد نظرتون بدید
  • new : این کلاس رو اگه به همراه کلاس بالایی به کار ببرید، باعث میشه که یک رنگ پس زمینه برای اون در نظر گرفته بشه و همچنین استایل اون تغییر بکنه و بیشتر تو چشم باشه

مثالها

استفاده از علامت در لیست:

<div class="collection">
 <a href="#" class="collection-item">Inbox<span class="badge">12</span></a>
 <a href="#" class="collection-item">Unread<span class="new badge">4</span></a>
 <a href="#" class="collection-item">Sent</a>
 <a href="#" class="collection-item">Outbox<span class="badge">14</span></a>
</div>

میبینید که در بالا هم badge خالی وجود داره و هم همراه با new.

خروجی:badge1

استفاده از علامت در DropDown:

<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><a href="#">Outbox<span class="badge">14</span></a></li>
</ul>

خروجی:badge2

استفاده از علامت در Navigation:

<nav>
    <div class="nav-wrapper">
        <a href="" class="brand-logo">TutorialsPoint</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="">Inbox</a></li>
            <li><a href="">Unread<span class="new badge">4</span></a></li>
            <li><a href="#">Sent</a></li>
            <li><a href="#">Outbox</a></li>
        </ul>
    </div>
</nav>

خروجی:badge3

Breadcrumb

با استفاده از نسبت دادن کلاس breadcrumb به تگهای a میتونین اونا رو بصورت breadcrumb در بیارید. برای مثال به کد زیر نگاه کنید:

<nav>
    <div class="nav-wrapper">
        <div class="col s12">
            <a href="#" class="breadcrumb">Home</a>
            <a href="#" class="breadcrumb">Technology</a>
            <a href="#" class="breadcrumb">HTML5</a>
        </div>
    </div>
</nav>

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

میبینید که المنت آخر استایل متفاوتی نسبت به قبلیا داره و نشون میده که الان در این صفحه هستیم.

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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