campaign-Ghorban-to-Ghadir

آموزش طراحی متریال با 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

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

اگر راجب ستون بندی هاشم یه توضیحی میدادید عالی میشد

محمد اسفندیاری

منظورتون گریدبندی هست؟
میتونین در این لینک مطالعه کنید خودتون
http://materializecss.com/grid.html
موفق باشید

ارسال نظرات

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