دموهای آماده 10

مرکز اعلان‌ها

همه اعلان‌ها خوانده شد
مشاهده تمام اعلان‌ها

شخصی‌سازی تم

تمام ظاهر محصول با توکن‌های CSS کنترل می‌شود. هیچ رنگ یا اندازه‌ای در کامپوننت‌ها هاردکد نشده؛ پس تغییر یک توکن روی همه صفحات اثر می‌گذارد.

توکن‌های اصلی

/* src/scss/base/_tokens.scss */
:root {
  /* رنگ‌ها */
  --nv-primary: #4f46e5;
  --nv-primary-hover: #4338ca;
  --nv-primary-active: #3730a3;
  --nv-secondary: #64748b;
  --nv-success: #059669;
  --nv-warning: #d97706;
  --nv-danger: #dc2626;
  --nv-info: #0284c7;

  /* سطوح */
  --nv-bg: #f6f7fb;
  --nv-surface: #ffffff;
  --nv-surface-2: #f1f3f9;
  --nv-border: #e2e6ef;
  --nv-divider: #eef1f7;

  /* متن */
  --nv-text: #0f172a;
  --nv-text-2: #475069;
  --nv-text-muted: #7b8399;
  --nv-heading: #0b1220;

  /* فاصله، شعاع، سایه، تایپوگرافی */
  --nv-space-1: 0.25rem;  /* … تا --nv-space-12 */
  --nv-radius-sm: 0.5rem; /* xs | sm | md | lg | xl | pill */
  --nv-shadow-sm: 0 1px 2px rgb(15 23 42 / 6%);
  --nv-text-h4: clamp(1.05rem, 1.6vw, 1.25rem);
}

تم‌های آماده

تمنحوه فعال‌سازی
روشن<html data-theme="light">
تاریک<html data-theme="dark">
سیستم<html data-theme="system"> — از prefers-color-scheme پیروی می‌کند

پالت رنگی با data-primary روی <html> تعیین می‌شود: indigo, blue, emerald, violet, orange, rose.

شش محور شخصی‌سازی

محورویژگی روی <html>مقدارها
حالت رنگdata-themelight \dark \system
رنگ اصلیdata-primaryشش پالت
چیدمانdata-layoutdefault \mini \collapse \horizontal \twocol \boxed
جهتdata-directionrtl \ltr
تراکمdata-densitycomfortable \compact
اندازه فونتdata-font-sizesm \md \lg
سبک سایدبارdata-sidebar-stylefixed \floating \compact
تقویمdata-calendarjalali \gregorian

کنترل از جاوااسکریپت

import { theme } from './js/core/theme.js';

theme.set('primary', 'emerald');     // تغییر رنگ اصلی
// layout / density / sidebarStyle از نسخه ۱.۱ ثابت‌اند و set روی آن‌ها اثری ندارد
theme.toggleTheme();                 // روشن ⇄ تاریک
theme.toggleDirection();             // rtl ⇄ ltr
theme.reset();                       // بازگشت به پیش‌فرض‌ها
theme.onChange('primary', (value) => console.log(value));

پنل آماده کاربر هم از طریق [data-customizer="<محور>"] [data-value="<مقدار>"] کار می‌کند؛ کافی است همین ساختار را در هر صفحه‌ای بگذارید (نمونه: صفحه پیش‌نمایش محصول).

ذخیره‌سازی

تنظیمات در localStorage با پیشوند nova ذخیره می‌شوند:

nova:theme, nova:primary, nova:layout, nova:direction,
nova:density, nova:fontSize, nova:sidebarStyle, nova:calendar,
nova:sidebar:collapsed, nova:table:prefs, nova:dashboard:widgets
نکته: برای جلوگیری از پرش تم هنگام بارگذاری، اسکریپت public/assets/js/theme-boot.js پیش از رندر، توکن‌ها را از localStorage می‌خواند و روی <html> می‌نشاند

این فایل را حذف نکنید.

ساختن تم رنگی جدید

/* src/scss/base/_palettes.scss */
[data-primary='teal'] {
  --nv-primary: #0d9488;
  --nv-primary-hover: #0f766e;
  --nv-primary-active: #115e59;
  --nv-primary-rgb: 13 148 136;
  --nv-primary-soft: rgb(13 148 136 / 12%);
  --nv-primary-soft-fg: #0f766e;
}

سپس teal را به PALETTES در src/js/core/theme.js و به فهرست defaultPrimary در config.js اضافه کنید. کل محصول، از جمله نمودارها، رنگ جدید را می‌گیرد.

تغییر فونت

فونت پیش‌فرض Vazirmatn است و از node_modules بارگذاری می‌شود. برای تغییر:

  1. فونت جدید را در public/assets/fonts/ بگذارید.
  2. در src/scss/base/_fonts.scss مقدار --nv-font را عوض کنید.
  3. برای پشتیبانی از ارقام فارسی، --nv-font-numeric را هم تنظیم کنید.

چاپ

برای چاپ هر بخش، data-print="#selector" را روی دکمه بگذارید؛ رابط چاپ تمام پوسته را پنهان و فقط همان بخش را چاپ می‌کند (فاکتور، گزارش، برچسب).

Theme customization

The product's entire look is controlled by CSS tokens. No colour or size is hard-coded in the components, so changing one token affects every page.

Core tokens

/* src/scss/base/_tokens.scss */
:root {
  /* colours */
  --nv-primary: #4f46e5;
  --nv-primary-hover: #4338ca;
  --nv-primary-active: #3730a3;
  --nv-secondary: #64748b;
  --nv-success: #059669;
  --nv-warning: #d97706;
  --nv-danger: #dc2626;
  --nv-info: #0284c7;

  /* surfaces */
  --nv-bg: #f6f7fb;
  --nv-surface: #ffffff;
  --nv-surface-2: #f1f3f9;
  --nv-border: #e2e6ef;
  --nv-divider: #eef1f7;

  /* text */
  --nv-text: #0f172a;
  --nv-text-2: #475069;
  --nv-text-muted: #7b8399;
  --nv-heading: #0b1220;

  /* spacing, radius, shadow, typography */
  --nv-space-1: 0.25rem;  /* … up to --nv-space-12 */
  --nv-radius-sm: 0.5rem; /* xs | sm | md | lg | xl | pill */
  --nv-shadow-sm: 0 1px 2px rgb(15 23 42 / 6%);
  --nv-text-h4: clamp(1.05rem, 1.6vw, 1.25rem);
}

Built-in themes

ThemeHow to enable
Light<html data-theme="light">
Dark<html data-theme="dark">
System<html data-theme="system"> — follows prefers-color-scheme

The colour palette is set with data-primary on <html>: indigo, blue, emerald, violet, orange, rose.

Customization axes

AxisAttribute on <html>Values
Colour modedata-themelight \dark \system
Primary colourdata-primarysix palettes
Layoutdata-layoutdefault \mini \collapse \horizontal \twocol \boxed
Directiondata-directionrtl \ltr
Densitydata-densitycomfortable \compact
Font sizedata-font-sizesm \md \lg
Sidebar styledata-sidebar-stylefixed \floating \compact
Calendardata-calendarjalali \gregorian

Controlling it from JavaScript

import { theme } from './js/core/theme.js';

theme.set('primary', 'emerald');     // change the primary colour
// layout / density / sidebarStyle are fixed since 1.1 and set() has no effect on them
theme.toggleTheme();                 // light ⇄ dark
theme.toggleDirection();             // rtl ⇄ ltr
theme.reset();                       // back to the defaults
theme.onChange('primary', (value) => console.log(value));

The ready-made user panel also works through [data-customizer="<axis>"] [data-value="<value>"]; just put the same structure on any page (example: the product preview page).

Storage

Settings are stored in localStorage with the nova prefix:

nova:theme, nova:primary, nova:layout, nova:direction,
nova:density, nova:fontSize, nova:sidebarStyle, nova:calendar,
nova:sidebar:collapsed, nova:table:prefs, nova:dashboard:widgets
Tip: to prevent a theme flash while loading, the public/assets/js/theme-boot.js script reads the tokens from localStorage before rendering and applies them to <html>

Do not remove this file.

Creating a new colour theme

/* src/scss/base/_palettes.scss */
[data-primary='teal'] {
  --nv-primary: #0d9488;
  --nv-primary-hover: #0f766e;
  --nv-primary-active: #115e59;
  --nv-primary-rgb: 13 148 136;
  --nv-primary-soft: rgb(13 148 136 / 12%);
  --nv-primary-soft-fg: #0f766e;
}

Then add teal to PALETTES in src/js/core/theme.js and to the defaultPrimary list in config.js. The whole product, charts included, picks up the new colour.

Changing the font

The default font is Vazirmatn, loaded from node_modules. To change it:

  1. Put the new font in public/assets/fonts/.
  2. Change the --nv-font value in src/scss/base/_fonts.scss.
  3. For Persian digit support, also set --nv-font-numeric.

Printing

To print any section, put data-print="#selector" on a button; the print layer hides the whole shell and prints only that section (invoice, report, label).

تخصيص السمة

يُتحكّم في مظهر المنتج بالكامل عبر رموز CSS. لا يوجد أي لون أو حجم مثبّت في المكونات؛ لذا يؤثر تغيير رمز واحد في جميع الصفحات.

الرموز الأساسية

/* src/scss/base/_tokens.scss */
:root {
  /* الألوان */
  --nv-primary: #4f46e5;
  --nv-primary-hover: #4338ca;
  --nv-primary-active: #3730a3;
  --nv-secondary: #64748b;
  --nv-success: #059669;
  --nv-warning: #d97706;
  --nv-danger: #dc2626;
  --nv-info: #0284c7;

  /* الأسطح */
  --nv-bg: #f6f7fb;
  --nv-surface: #ffffff;
  --nv-surface-2: #f1f3f9;
  --nv-border: #e2e6ef;
  --nv-divider: #eef1f7;

  /* النص */
  --nv-text: #0f172a;
  --nv-text-2: #475069;
  --nv-text-muted: #7b8399;
  --nv-heading: #0b1220;

  /* المسافات، الانحناء، الظل، الطباعة */
  --nv-space-1: 0.25rem;  /* … حتى --nv-space-12 */
  --nv-radius-sm: 0.5rem; /* xs | sm | md | lg | xl | pill */
  --nv-shadow-sm: 0 1px 2px rgb(15 23 42 / 6%);
  --nv-text-h4: clamp(1.05rem, 1.6vw, 1.25rem);
}

السمات الجاهزة

السمةطريقة التفعيل
فاتحة<html data-theme="light">
داكنة<html data-theme="dark">
حسب النظام<html data-theme="system"> — تتبع prefers-color-scheme

تُحدَّد لوحة الألوان بـ data-primary على <html>: indigo, blue, emerald, violet, orange, rose.

محاور التخصيص

المحورالسمة على <html>القيم
وضع الألوانdata-themelight \dark \system
اللون الأساسيdata-primaryست لوحات
التخطيطdata-layoutdefault \mini \collapse \horizontal \twocol \boxed
الاتجاهdata-directionrtl \ltr
الكثافةdata-densitycomfortable \compact
حجم الخطdata-font-sizesm \md \lg
نمط الشريط الجانبيdata-sidebar-stylefixed \floating \compact
التقويمdata-calendarjalali \gregorian

التحكم من جافاسكريبت

import { theme } from './js/core/theme.js';

theme.set('primary', 'emerald');     // تغيير اللون الأساسي
// layout / density / sidebarStyle ثابتة منذ الإصدار 1.1 ولا يؤثر set فيها
theme.toggleTheme();                 // فاتح ⇄ داكن
theme.toggleDirection();             // rtl ⇄ ltr
theme.reset();                       // العودة إلى القيم الافتراضية
theme.onChange('primary', (value) => console.log(value));

تعمل لوحة المستخدم الجاهزة أيضاً عبر [data-customizer="<المحور>"] [data-value="<القيمة>"]؛ يكفي وضع البنية نفسها في أي صفحة (مثال: صفحة معاينة المنتج).

التخزين

تُحفظ الإعدادات في localStorage بالبادئة nova:

nova:theme, nova:primary, nova:layout, nova:direction,
nova:density, nova:fontSize, nova:sidebarStyle, nova:calendar,
nova:sidebar:collapsed, nova:table:prefs, nova:dashboard:widgets
ملاحظة: لمنع وميض السمة أثناء التحميل، يقرأ السكربت public/assets/js/theme-boot.js الرموز من localStorage قبل العرض ويطبّقها على <html>

لا تحذف هذا الملف.

إنشاء سمة لونية جديدة

/* src/scss/base/_palettes.scss */
[data-primary='teal'] {
  --nv-primary: #0d9488;
  --nv-primary-hover: #0f766e;
  --nv-primary-active: #115e59;
  --nv-primary-rgb: 13 148 136;
  --nv-primary-soft: rgb(13 148 136 / 12%);
  --nv-primary-soft-fg: #0f766e;
}

ثم أضف teal إلى PALETTES في src/js/core/theme.js وإلى قائمة defaultPrimary في config.js. سيأخذ المنتج كله، بما فيه المخططات، اللون الجديد.

تغيير الخط

الخط الافتراضي هو Vazirmatn ويُحمّل من node_modules. لتغييره:

  1. ضع الخط الجديد في public/assets/fonts/.
  2. غيّر قيمة --nv-font في src/scss/base/_fonts.scss.
  3. لدعم الأرقام الفارسية، اضبط --nv-font-numeric أيضاً.

الطباعة

لطباعة أي قسم، ضع data-print="#selector" على الزر؛ فتخفي طبقة الطباعة الهيكل كله وتطبع ذلك القسم فقط (فاتورة، تقرير، ملصق).