آموزش طراحی متریال با Materialize (جلسه 21) - Collapsible و آکوردئون

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

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

Materialize تعدادی کلاس از پیش تعریف شده قرار داده که میتونین با استفاده از اونا انواع مختلفی از آکوردئون یا Accordion رو بسازید و ار اونا در سایتتون استفاده کنید و به زیبایی اون بیافزایید.

کلاسهایی که در این موضوع وجود دارند عبارتند از:

  •  collapsible : با نسبت دادن این کلاس به ul مورد نظر، اون رو بصورت یک جزء Collapsible در میارید
  • collapsible-header : با نسبت دادن این کلاس به div مورد نظر اون رو بصورت یک header برای آیتم collapsible در میارید
  • collapsible-body : با نسبت دادن این کلاس به div مورد نظر اون رو بصورت یک body برای آیتم collapsible در میارید
  • popout : با نسبت دادن این کلاس به ul مورد نظر، زمانی که بر روی آیتمهای آکوردئون کلید میشه، محتویات اون بصورت  popout نمایش داده میشه
  • active : با نسبت دادن این کلاس یه یکی از آیتمها باعث میشیم که اون آیتم فعال باشه و محتویات اون از ابتدا نمایش داده بشه
  • expandable : مشخص کردن ul بصورت expandable
  • accordion : مشخص کردن ul بصورت accordion

مثالها

آکوردئون ساده:

<ul class="collapsible" data-collapsible="accordion">
	<li>
		<div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
		<div class="collapsible-body"><p>This is first section.</p></div>
	</li>
	<li>
		<div class="collapsible-header"><i class="material-icons">place</i>Second Section</div>
		<div class="collapsible-body"><p>This is second section.</p></div>
	</li>
	<li>
		<div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
		<div class="collapsible-body"><p>This is third section.</p></div>
	</li>
</ul>

خروجی:c1

آکوردئون بصورت popout:

<ul class="collapsible popout" data-collapsible="accordion">
	<li>
		<div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
		<div class="collapsible-body"><p>This is first section.</p></div>
	</li>
	<li>
		<div class="collapsible-header"><i class="material-icons">place</i>Second Section</div>
		<div class="collapsible-body"><p>This is second section.</p></div>
	</li>
	<li>
		<div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
		<div class="collapsible-body"><p>This is third section.</p></div>
	</li>
</ul>

میبینید که کلاس popout رو به ul اضافه کردیم. خروجی:c2آکوردئون با آیتم فعال:

<ul class="collapsible" data-collapsible="accordion">
	<li>
		<div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
		<div class="collapsible-body"><p>This is first section.</p></div>
	</li>
	<li>
		<div class="collapsible-header active"><i class="material-icons">place</i>Second Section</div>
		<div class="collapsible-body"><p>This is second section.</p></div>
	</li>
	<li>
		<div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
		<div class="collapsible-body"><p>This is third section.</p></div>
	</li>
</ul>

خروجی:c3

ul بصورت Expandable:

<ul class="collapsible" data-collapsible="expandable">
	<li>
		<div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
		<div class="collapsible-body"><p>This is first section.</p></div>
	</li>
	<li>
		<div class="collapsible-header"><i class="material-icons">place</i>Second Section</div>
		<div class="collapsible-body"><p>This is second section.</p></div>
	</li>
	<li>
		<div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
		<div class="collapsible-body"><p>This is third section.</p></div>
	</li>
</ul>

میبینید که برای data-collapsible مقدار expandable رو قرار دادیم، با این کار میتونین بصورت همزمان تمام آیتمها رو بصورت فعال در بیارید.

خروجی:c4

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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