Amatris Material Dashboard - Utilities
با استفاده از کلاس های کاربردی در زمان و فضای منابع صرفه جویی کنید.
رنگ متن
با افزودن کلاس های مشخص شده به راحتی رنگ متن را تغییر دهید.
<p class="color-red">Red text</p>
<p class="color-green">Green text</p>
<p class="color-blue">Blue text</p>متن قرمز
متن سبز
متن آبی
| نام رنگ | کلاس | رنگ |
|---|---|---|
| قرمز | color-red | |
| سبز | color-green | |
| آبی | color-blue | |
| نارنجی | color-orange | |
| اصلی | color-primary | |
قرمز (با استفاده از کلید واژه important!) |
color-red-im | |
سبز (با استفاده از کلید واژه important!) |
color-green-im | |
آبی (با استفاده از کلید واژه important!) |
color-blue-im | |
نارنجی (با استفاده از کلید واژه important!) |
color-orange-im | |
اصلی (با استفاده از کلید واژه important!) |
color-primary-im |
رنگ پس زمینه
پس زمینه هر یک از المان ها را به وسیله این کلاس ها تغییر دهید.
<div class="bg-red">متن قرمز</div>
<div class="bg-green">متن سبز</div>
<div class="bg-blue">متن آبی</div>متن قرمز
متن سبز
متن آبی
| نام رنگ | کلاس | رنگ |
|---|---|---|
| قرمز | bg-red | |
| سبز | bg-green | |
| آبی | bg-blue | |
| نارنجی | bg-orange | |
| اصلی | bg-primary |
فونت ها
تغییر فونت المان ها، اندازه، وزن فونت (بسته به قالب فعال، یعنی المان ها می‌توانند در قالب های مختلف ظاهر متفاوتی داشته باشند).
<p class="font-title">فونت عنوان</p>
<p class="w-normal">اندازه معمولی</p>
<p class="w-bold">وزن بولد</p>
<p class="size-lg">اندازه بزرگ</p>
<p class="size-md">اندازه متوسط</p>
<p class="size-sm">اندازه کوچک</p>
<p class="small-text">متن کوچک</p>
<p class="tiny-text">متن ریز</p>- فونت عنوان
- اندازه معمولی
- وزن بولد
- اندازه بزرگ
- اندازه متوسط
- اندازه کوچک
- متن کوچک
- متن ریز
| توضیحات | کلاس | پیشنمایش |
|---|---|---|
| فونت عنوان | font-title | سلام دنیا! |
| وزن فونت: معمولی | w-normal | سلام دنیا! |
| وزن فونت: بولد | w-bold | سلام دنیا! |
| اندازه بزرگ | size-lg | سلام دنیا! |
| اندازه متوسط | size-md | سلام دنیا! |
| اندازه کوچک | size-sm | سلام دنیا! |
| متن کوچک | small-text | سلام دنیا! |
| متن بسیار کوچک | tiny-text | سلام دنیا! |
نشان ها
نشان ها که معمولا با نام چیپس (chips) نیز شناخته می‌شوند، کامپوننت هایی برای نمایش عناوین و شمارنده ها در مکان های مختلف استفاده می‌شوند.
<p class="badge">جدید!</p>
<p class="badge bg-red">نشان بزرگ</p>
<p class="badge --sm">نشان کوچک</p>
<p class="badge --sm bg-blue">نشان کوچک آبی</p>
<p class="badge --marker bg-orange">1</p>جدید!
نشان بزرگ
نشان کوچک
نشان کوچک آبی
1
| توضیحات | کلاس | پیشنمایش |
|---|---|---|
| نشان عادی با رنگ پیشفرض | badge | سلام دنیا |
| شما می‌توانید از کلاس های پس زمینه که در بخش قبلی توضیح داده شد برای تغییر رنگ نشان ها استفاده کنید. | badge bg-red | سلام دنیا |
| نشان کوچک با رنگ پیشفرض | badge --sm | سلام دنیا |
| نشان شمارنده | badge --marker | 1 |
کلاس های دیگر
waiting
این کلاس المان مورد نظر را غیرفعال می‌کند و هیچ یک از رویداد های نشانگر (pointer events) مانند کلیک، hover و... از کار خواهند افتاد.
<div class="waiting">
<p>This box is in waiting and all pointer events are disabled.</p>
<button class="btn">Click me</button>
</div>
This box is in waiting and all pointer events are disabled.