• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram