campaign-Ghorban-to-Ghadir

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



visibility  
mode_comment   ۰

در این جلسه با ادامه موضوع مربوط به طراحی متریال با 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

مثالها

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

خروجی:c1

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

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

خروجی:c3

ul بصورت Expandable:

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

خروجی:c4

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

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

یا علی

Source

متخصص فرانت اِند
طراحی وب را اصولی فرا بگیرید اگر تصمیمتو گرفتی که به صورت حرفه ای به طراحی UI مشغول بشی و کسب درآمد کنی دوره فرانت اند رو از دست نده، چون توی این دوره هر چیزی که برای رسیدن به هدفت نیاز داری رو در اختیارت قرار می دیم. متخصص فرانت اِند arrow_back
comment دیدگاه کاربران
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.