campaign-Ghorban-to-Ghadir

آموزش طراحی متریال با Materialize (جلسه 20) - صفحه بندی و لودر



visibility  
mode_comment   ۰

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

Pagination

Materialize کلاسها و امکاناتی رو در اختیار ما قرار میده که میتونیم با استفاده از اونا Pagination یا صفحه بندی زیبایی رو برای سایت خودمون قرار بدیم و با اونا کار کنیم.

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

  • Pagination : با نسبت دادن این کلاس به ul مورد نظر اون رو بصورت یک المنت Pagination در میارید و این ابزار، li های درون اون رو بعنوان صفحه های مختلف در نظر میگیره.
  • disabled : با دادن این کلاس به li مورد نظر اون رو غیر فعال میکنید.
  • active : با نسبت دادن این کلاس به یکی از li های درون Pagination، باعث میشیم که اون li حالت فعال به خودش بگیره

مثال

خروجی:m1

کار با لودرها

Materialize تعدادی کلاس از پیش تعریف شده داره که میتونین با استفاده از اونا لودرها و نوارهای پیشرفت بسیار زیبا و حرفه ای رو در سایتتون قرار بدین و از اونا در مکانهای مختلف استفاده کنید.

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

  • Progress : با نسبت دادن این کلاس به Div مورد نظر اون رو بصورت یک جزء Progress در میارید. این کلاس اجباری هست
  • determinate : با دادن این کلاس به div مورد نظر که درون المنت بالایی قرار داده میشه، باعث میشید که استایلهای ساده Materialize برای نوار پیشرفت بر روی اون اعمال بشه
  • indeterminate : با نسبت دادن این کلاس به Div مورد نظر اون لودر حالت انیمیشنی بهش داده میشه

مثالها

نوار پیشرفت ساده:

همونطور که میبینید به div پدر کلاس progress و به div درونی کلاس determinate رو دادیم. همونطور که گفتم زمانی که از Determinate استفاده میشه بیشتر برای نوار پیشرفت هست و نه بعنوان لودر. پس انیمیشنی نیس. درون style هم، عرض اون رو برابر با 50 درصد در نظر گرفتیم.

خروجی:m2لودر خطی:

خروجی:m3

لودر دایره ای:

خروجی:m4

امیدوارم از این مطلب خوشتون اومده باشه.

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

یا علی

Source

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

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