آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 426 ۱۵ اردیبهشت ۹۵

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
در حال نصب گواهینامه امنیتی ssl بر روی سرور و انجام تغیراتی هستیم. ممکن است تا 12 ساعت آینده اختلالاتی در سایت داشته باشیم.
7LearnTelegram