آموزش طراحی متریال با Materialize (جلسه آخر) - Dropdown - Tab - Wave

- visibility ۰ mode_comment

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

در مورد Dropdown

با استفاده از Materialize میتونین dropdown های زیبایی رو بوجود بیارید و با استفاده از اونا ul ها رو زیباتر و پیشرفته تر کنید.

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

  • dropdown-content : این کلاس برای ul اجباری هست و مشخص میکنه که بصورت Dropdown نمایش داده بشه
  • data-activates : این ویژگی رو برای فعالگر dropdown قرار میدیم و بعنوان مقدار اون، id لیست یا ul رو قرار میدیم

مثال:

خروجی:dropdown

در مورد Tab در Materialize

Materialize کلاسهایی داره که با استفاده از اونا میتونین ul رو بصورت تب بندی در بیارید و اونو در سایتتون قرار بدین. کلاسهایی که در این زمینه وجود داره عبارتند از:

  • tabs : این کلاس برای المنت ul اجباری هست و مشخص میکنه که اون یک تب هست
  • active : باعث میشه که یک تب فعال بشه

مثال:

میبینید که در انتها 4 عدد div قرار دادیم و برای هر کدوم یک id مشخص کردیم. بعد از اون در هر li یک a قرار دادیم و درون href هر کدوم مقدار id متناظرشون رو قرار دادیم. با اینکار روی هر تب که کلیک میکنیم، محتوای div متناظر با اون نمایش داده میشه.

خروجی:tabs

در مورد Waves

Materialize تعدادی کلاس قرار داده که با استفاده از اونا میتونین افکت موجی زیبا که یکی از خصوصیتهای اصلی طراحی متریال هست رو اضافه کنید. کلاسهایی که در این زمینه وجود داره بصورت زیر هست:

  • waves effect : با اضافه کردن این کلاس به المنت مورد نظر مشخص میکنید که اون المنت افکت موجدار میخاد
  • waves-light : با استفاده از این کلاس رنگ موج رو سفید قرار میدین
  • waves-red : با استفاده از این کلاس رنگ موج رو قرمز قرار میدین
  • waves-green : با استفاده از این کلاس رنگ موج رو سبز قرار میدین
  • waves-yellow : با استفاده از این کلاس رنگ موج رو زرد قرار میدین
  • waves-orange : با استفاده از این کلاس رنگ موج رو نارنجی قرار میدین
  • waves-purple : با استفاده از این کلاس رنگ موج رو صورتی قرار میدین
  • waves-teal : با استفاده از این کلاس رنگ موج رو سبز-آبی قرار میدین

مثال:

خروجی:waves

Materialize امکانات دیگه ای هم داره که میتونین خودتون اونا رو ببینید و ازشون استفاده کنید. این مطلب، آخرین قسمت از سری آمورشی Materialize هست و امیدوارم که براتون مفید واقع شده باشه.

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

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

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