menu

۶- کمک کننده ها در Materialize

فریم ورک محبوب Materialize دارای یک سری کلاس آماده و کمک کننده برای کد نویسی راحت تر است. لیست کامل این helper ها را میتوانید در ادامه همین پست مشاهده کنید.

 

هم ترازی

فریم ورک Materialize کلاس هایی برای تنظیم آسان تراز متن ها دارد.

تنظیم عمودی

برای تنظیم عمودی المنت های موجود در یک المنت، میتوانید کلاس valign-wrapper را به آن دهید. با این کار المنت هایی که درون .valign-wrapper هستند وسط چین عمودی میشوند.

برای مثال:

این پاراگراف وسط چین شده ی عمودی است

 

تنظیم افقی

برای تنظیم افقی متون، می‌توانید از کلاس های center-align ، right-align و left-align استفاده کنید.

راست
وسط
چپ
تنظیم float

برای تنظیم float یک المنت می‌توانید از کلاس های right و left استفاده کنید.

راست
چپ

مخفی کردن محتوا

برای مخفی کردن المنت در همه ی اندازه ها میتوانید از کلاس hide استفاده کنید. برای مخفی کردن در اندازه های مختلف نیز می‌توانید از کلاس های زیر استفاده کنید:

برای مثلا کلاس hide-on-small-only باعث می‌شود المنت مورد نظر فقط در اندازه های کوچک مخفی شود، و کلاس hide-on-med-and-down باعث می‌شود المنت در اندازه متوسط و کوچک مخفی شود. (میزان کوچکی ، متوسطی و بزرگی در جلسه ی قبل داخل جدول اندازه ها موجود است).

قالب بندی

این کلاس ها محتوا های متفاوتی را در سایت شما قالب بندی می‌کنند.

کوتاه کردن

برای کوتاه کردن خط های طولانی میتوانید از کلاس truncate استفاده کنید. برای مثال به کد زیر توجه کنید:

این یک متن خیلی خیلی خیلی طولانی است و میخواهیم با کلاس مورد نظر کوتاهش کنیم

استایل hover

با استفاده از کلاس h‌overable متیوانید المنت مورد نظر را به راحتی دارای استایل hover کنید. برای نمونه به کد زیر توجه کنید:

ماوس را روی این قسمت قرار دهید

 

پیشفرض مرورگر

فریم ورک متریالایز بعضی استایل پیشفرض بعضی المنت ها را تغییر میدهد که برای بازگرداندن آنها به حالت اولیه می‌توانید از کلاس browser-default استفاده کنید. این کد در UL گلوله ها ای که کنار <li> ها هستند را بر میگرداند، در Select و input هم استایل آنها را به حالت پیشفرض مرورگر باز میگرداند.

رفتن به نوارابزار