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

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

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

در این جلسه میخایم در مورد Collection در Materialize براتون توضیح بدیم. با استفاده از این کلاسهایی که خدمتتون عرض میکنم میتونین به گروه یا مجموعه ای از المنتها استایل بدین و اونا رو به زیبایی نمایش بدین.

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

  • Collection : با نسبت دادن این کلاس به div یا ul، اون المنت رو بصورت یک collection در میارید
  • Collection-item : با نسبت دادن این کلاس به a و li‌های موجود در المنت بالا، اونا رو بصورت آیتمی از مجموعه در میارید
  • active : با دادن این کلاس به المنت مورد نظر، اون رو در حالت فعال قرار میدید
  • with-header : اگه این کلاس رو به مجموعه نسبت بدین، اون مجموعه header خواهد داشت
  • collection-header : با نسبت دادن این کلاس به a و li، اون آیتم رو بصورت header مجموعه قرار میدیم
  • avatar : مشخص کردن a یا li بعنوان آیتم avatar
  • dismissible : با دادن این کلاس به آیتم‌ها به اونا اجازه میدیم که در دستگاه‌های لمسی قابل Swipe شدن باشند. به این معنا که با کشیدن و بیرون انداختن اونا از مجموعه حذف بشن. در ادامه نشونتون خواهم داد.

مثالها

مجموعه ساده:

<ul class="collection">
    <li class="collection-item">HTML 5</li>
    <li class="collection-item">JQuery</li>
    <li class="collection-item">JavaScript</li>
    <li class="collection-item">CSS</li>
</ul>

میبینید که برای ul کلاس collection و برای li‌ها کلاس collection-item قرار داده شده.

خروجی:c1

مجموعه ای از لینکها:

<div class="collection">
    <a href="#" class="collection-item">HTML 5</a>
    <a href="#!" class="collection-item active">JQuery</a>
    <a href="#!" class="collection-item">JavaScript</a>
    <a href="#!" class="collection-item">CSS</a>
</div>

میبینید که یکی از a‌ها کلاس active داره.

خروجی:c2

مجموعه با Header:

<ul class="collection with-header">
    <li class="collection-header">
        <h3>Front End Technologies</h3>
    </li>
    <li class="collection-item">HTML 5</li>
    <li class="collection-item">JQuery</li>
    <li class="collection-item">JavaScript</li>
    <li class="collection-item">CSS</li>
</ul>

میبینید که li اولی کلاس collection-header رو داره.

خروجی:c3

مجموعه با محتوای ثانویه:

<ul class="collection">
    <li class="collection-item">
        <div>HTML 5<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div>
    </li>
    <li class="collection-item">
        <div>JQuery<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div>
    </li>
    <li class="collection-item">
        <div>JavaScript<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div>
    </li>
    <li class="collection-item">
        <div>CSS<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div>
    </li>
</ul>

همونطور که میبینید در هر آیتم یک a با کلاس secondary-content وجود داره و محتوای ثانویه رو مشخص میکنه. معمولا این محتوا یک آیکون هست و در سمت راست قرار میگیره.

خروجی:c4

مجموعه با تصویر یا آواتار:

<ul class="collection">
    <li class="collection-item avatar">
        <img alt="HTML5" src="html5-mini-logo.jpg" class="circle">
        <span class="title">HTML5</span>
        <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
            <br/> HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
        <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
    <li class="collection-item avatar">
        <i class="material-icons circle green">insert_chart</i>
        <span class="title">HighCharts</span>
        <p></p>
        <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
</ul>

خروجی:c5

مجموعه با اعضای حذف شونده:

<ul class="collection">
    <li class="collection-item dismissable">HTML 5</li>
    <li class="collection-item dismissable">JQuery</li>
    <li class="collection-item dismissable">JavaScript</li>
    <li class="collection-item dismissable">CSS</li>
</ul>

برای نمایش خروجی یک gif درست کردم و اونو در اختیارتون میزارم:swipe

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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