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

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۱۴ اردیبهشت ۱۳۹۵

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

Pagination

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

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

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

مثال

<ul class="pagination">
	<li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
	<li class="active"><a href="#!">1</a></li>
	<li class="waves-effect"><a href="#!">2</a></li>
	<li class="waves-effect"><a href="#!">3</a></li>
	<li class="waves-effect"><a href="#!">4</a></li>
	<li class="waves-effect"><a href="#!">5</a></li>
	<li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
</ul>

خروجی:m1

کار با لودرها

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

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

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

مثالها

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

<div class="progress">
	<div class="determinate" style="width: 50%"></div>
</div>

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

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

<div class="progress">
	<div class="indeterminate"></div>
</div>

خروجی:m3

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

<div class="preloader-wrapper big active">
	<div class="spinner-layer spinner-blue-only">
		<div class="circle-clipper left">
			<div class="circle"></div>
		</div>
		<div class="gap-patch">
			<div class="circle"></div>
		</div>
		<div class="circle-clipper right">
			<div class="circle"></div>
		</div>
	</div>
</div>

خروجی:m4

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

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

یا علی

Source

نویسنده
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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