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

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



  آیا می دانید تا کنون 6339 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram