سفارشیسازی
دموهای داخلی
میتوانید پالت رنگ هر دمو را بهراحتی با تغییر مقادیر چند متغیر CSS تغییر دهید.
برای تغییر رنگها در تمهای موجود، فایل app.css را باز کرده و هر متغیری را در آن تغییر دهید. تغییرات شما بهطور خودکار در هر مؤلفه یا عنصر مبتنی بر Tailwind بازتاب مییابد. توجه داشته باشید که برای این کار باید این فایل را در head-css.html قرار دهید.
پشتیبانی از RTL
Konrix همچنین پشتیبانی از RTL را ارائه میدهد. کافی است ویژگی را به تگ html اضافه کنید.
به سادگی مرجع را تغییر دهید و تگ html را با ویژگی dir="rtl" بهروز کنید. برای مثال:
<html lang="en" dir="rtl">
سفارشیسازی نوار کناری چپ، عرض چیدمان و نوار کناری راست
Konrix به شما امکان میدهد نوار کناری چپ، عرض کلی چیدمان یا نوار کناری راست را سفارشی کنید. میتوانید نوار کناری چپ را به اندازه، تم (ظاهر) و نوع متفاوت تبدیل کنید. میتوانید با مشخص کردن ویژگیهای پیکربندی چیدمان در عنصر html در html خود، آن را سفارشی کنید.
| عنوان | نوع | گزینهها | توضیحات |
|---|---|---|---|
data-mode |
رشته | "روشن" | "تیره" | تغییر طرح رنگ کلی به تیره |
dir |
رشته | "ltr" | "rtl" | تغییر جهت چیدمان |
data-layout-width
|
رشته | "سیال" | "جعبهای" | تغییر عرض چیدمان کلی |
data-topbar-color
|
رشته | "روشن" | "تیره" | "برند" | "گرادیان" | طرح رنگ نوار بالا. |
data-menu-color
|
رشته | "روشن" | "تیره" | "برند" | "گرادیان" | طرح رنگ نوار کناری چپ. |
data-sidenav-view
|
رشته | "پیشفرض" | "md" | "sm" | "hover" | "hover-active" | "موبایل" | "مخفی" | تغییر اندازه نوار کناری چپ به کوچک (فشرده) |
data-layout-position
|
رشته | "ثابت" | "قابلاسکرول" | موقعیت چیدمان |
در ادامه چند مثال آورده شده است:
-
تغییر تم نوار کناری چپ به "تیره"
<html data-menu-color="dark"></html> -
تغییر تم نوار کناری چپ به "روشن"
<html data-menu-color="light"></html> -
تغییر نوار کناری چپ به حالت اسکرولی
<html data-layout-position="scrollable"></html> -
تغییر اندازه نوار کناری چپ به کوچک
<html data-sidenav-view="sm"></html>
اضافه کردن صفحه جدید
ما یک صفحه شروع (بررسی کنید pages-starter.html) ارائه کردهایم. این به شما امکان میدهد بهراحتی شروع کنید و صفحه جدید اضافه کنید. لطفاً به نکات مهم زیر توجه کنید:
- بیشتر عناصر فرم پیشفرض/پایه همراه با چند عنصر پیشرفته بهصورت جداگانه css و js اضافه شدهاند.
- برخی عناصر مانند نمودارها، جداول داده، تقویم، نقشهها و غیره نیاز به اضافه کردن فایلهای css و js مربوطه در html شما دارند. لطفاً صفحه مستندات مربوطه را برای جزئیات بررسی کنید.