کامپوننت‌ها

کتابخانه کامپوننت NOVAADMIN شامل ۳۹ کامپوننت آماده است. همه از توکن‌های Design System ساخته شده‌اند، در هر شش چیدمان و هر دو جهت درست کار می‌کنند و در صفحات ui/* قابل مشاهده‌اند.

فهرست کامپوننت‌ها

دسته	کامپوننت	صفحه نمایش
پایه	دکمه، دکمه آیکون، گروه دکمه، segmented	`ui/buttons.html`
پایه	نشان، چیپ وضعیت، آواتار، نشان‌گر آنلاین	`ui/badges.html`, `ui/avatars.html`
پایه	کارت، کارت آماری، کارت رسانه، کاشی	`ui/cards.html`
فرم	ورودی، انتخاب، چند‌انتخابی، سوییچ، اسلایدر، آپلود، OTP، جستجو	`ui/forms.html`, `ui/inputs.html`
ناوبری	تب، آکاردئون، دراپ‌دان، بردکرامب، صفحه‌بندی، سایدبار تو در تو	`ui/tabs.html`, `ui/dropdowns.html`
داده	جدول، جدول داده، درخت، فهرست گروهی، تایم‌لاین	`ui/tables.html`, `ui/timeline.html`
بازخورد	پیام، توست، مودال، تأییدیه، حالت خالی، حالت خطا، اسکلتون	`ui/alerts.html`, `ui/toasts.html`, `ui/states.html`
نمایش	نمودار، پیشرفت، رتبه‌بندی، تقویم، کانبان، چت	`ui/charts.html`, `ui/progress.html`
چیدمان	گرید، دو ستونی، جعبه، ابزارک	`ui/grid.html`
تایپوگرافی	سرتیترها، پاراگراف، لینک، بلوک کد	`ui/typography.html`

نمونه‌های کد

دکمه‌ها

<button class="btn btn-primary">ذخیره</button>
<button class="btn btn-light">انصراف</button>
<button class="btn btn-soft-success">تأیید</button>
<button class="btn btn-danger btn-sm">حذف</button>
<button class="icon-btn" aria-label="ویرایش"><i class="bi bi-pencil"></i></button>

کارت آماری

<article class="stat-card">
  <div class="stat-card__head">
    <span class="stat-card__label">درآمد ماه</span>
    <span class="stat-card__icon stat-card__icon--primary"><i class="bi bi-cash-stack"></i></span>
  </div>
  <p class="stat-card__value numeric">۲٫۴ میلیارد</p>
  <span class="stat-card__trend"><i class="bi bi-arrow-up-right"></i> ۱۲٫۴٪</span>
</article>

جعبه‌های بازخورد

<div class="callout callout--info"><i class="bi bi-info-circle"></i><div><strong>نکته</strong><p class="mb-0">متن راهنما</p></div></div>
<div class="callout callout--warning"><i class="bi bi-exclamation-triangle"></i><div><strong>هشدار</strong><p class="mb-0">متن هشدار</p></div></div>

پیام (Toast) از جاوااسکریپت

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

toast.success('ذخیره شد', 'تغییرات با موفقیت ثبت شد.');
toast.warning('توجه', 'دو فیلد الزامی خالی است.');
toast.danger('خطا', 'ارتباط با سرور برقرار نشد.');
toast.info('اطلاع', 'نسخه جدید در دسترس است.');

موقعیت پیام‌ها قابل انتخاب است: data-toast-host="top-start", top-end, bottom-start, bottom-end؛ در حالت RTL آینه می‌شوند.

گفتگو و تأییدیه

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

await modal.confirm({ title: 'حذف محصول', text: 'این عمل بازگشت‌پذیر نیست.', tone: 'danger', confirmText: 'حذف کن' });
modal.alert({ title: 'اطلاع', text: 'فایل آماده دانلود است.' });

تب و آکاردئون

<div class="tabs" data-tabs>
  <nav class="nav nav-tabs" role="tablist">
    <button class="nav-link active" data-tab="a" role="tab">بخش اول</button>
    <button class="nav-link" data-tab="b" role="tab">بخش دوم</button>
  </nav>
  <div class="tab-content">
    <div class="tab-pane active" data-tab-panel="a">…</div>
    <div class="tab-pane" data-tab-panel="b" hidden>…</div>
  </div>
</div>

رفتارها در src/js/core/ui.js ثبت می‌شوند؛ صفحاتی که محتوایشان را با جاوااسکریپت می‌سازند باید پس از رندر، initUi(root) را صدا بزنند (کنترل‌کننده‌های قالب این کار را انجام می‌دهند).

ساختار کلاس‌ها

.block               پایه
.block__element      بخش داخلی
.block--modifier     حالت یا اندازه
.is-*                حالت رفتاری که با JS عوض می‌شود (is-active، is-loading)

نکته: رنگ‌ها فقط از توکن‌ها می‌آیند؛ برای ساختن حالت جدید از --nv-* استفاده کنید، نه کد رنگ مستقیم

هشدار: کلاس‌های رفتاری is-* را در HTML ثابت نگذارید

اگر عنصری در حالت فعال باید باشد، از کنترل‌کننده یا [data-tabs] استفاده کنید تا منطق در یک جا بماند.

Components

The NOVAADMIN component library contains 39 ready-made components. All of them are built from the Design System tokens, work correctly in every layout and in both directions, and can be seen on the ui/* pages.

Component list

Category	Components	Demo page
Basics	Button, icon button, button group, segmented	`ui/buttons.html`
Basics	Badge, status chip, avatar, online indicator	`ui/badges.html`, `ui/avatars.html`
Basics	Card, stat card, media card, tile	`ui/cards.html`
Forms	Input, select, multi-select, switch, slider, upload, OTP, search	`ui/forms.html`, `ui/inputs.html`
Navigation	Tabs, accordion, dropdown, breadcrumb, pagination, nested sidebar	`ui/tabs.html`, `ui/dropdowns.html`
Data	Table, data table, tree, grouped list, timeline	`ui/tables.html`, `ui/timeline.html`
Feedback	Alert, toast, modal, confirmation, empty state, error state, skeleton	`ui/alerts.html`, `ui/toasts.html`, `ui/states.html`
Display	Chart, progress, rating, calendar, kanban, chat	`ui/charts.html`, `ui/progress.html`
Layout	Grid, two-column, box, widget	`ui/grid.html`
Typography	Headings, paragraph, link, code block	`ui/typography.html`

Code samples

Buttons

<button class="btn btn-primary">Save</button>
<button class="btn btn-light">Cancel</button>
<button class="btn btn-soft-success">Approve</button>
<button class="btn btn-danger btn-sm">Delete</button>
<button class="icon-btn" aria-label="Edit"><i class="bi bi-pencil"></i></button>

Stat card

<article class="stat-card">
  <div class="stat-card__head">
    <span class="stat-card__label">Monthly revenue</span>
    <span class="stat-card__icon stat-card__icon--primary"><i class="bi bi-cash-stack"></i></span>
  </div>
  <p class="stat-card__value numeric">2.4 billion</p>
  <span class="stat-card__trend"><i class="bi bi-arrow-up-right"></i> 12.4%</span>
</article>

Callouts

<div class="callout callout--info"><i class="bi bi-info-circle"></i><div><strong>Tip</strong><p class="mb-0">Help text</p></div></div>
<div class="callout callout--warning"><i class="bi bi-exclamation-triangle"></i><div><strong>Warning</strong><p class="mb-0">Warning text</p></div></div>

Toasts from JavaScript

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

toast.success('Saved', 'Your changes were saved successfully.');
toast.warning('Heads up', 'Two required fields are empty.');
toast.danger('Error', 'Could not connect to the server.');
toast.info('Info', 'A new version is available.');

The toast position is selectable: data-toast-host="top-start", top-end, bottom-start, bottom-end; they are mirrored in RTL mode.

Dialogs and confirmations

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

await modal.confirm({ title: 'Delete product', text: 'This action cannot be undone.', tone: 'danger', confirmText: 'Delete' });
modal.alert({ title: 'Info', text: 'The file is ready to download.' });

Tabs and accordion

<div class="tabs" data-tabs>
  <nav class="nav nav-tabs" role="tablist">
    <button class="nav-link active" data-tab="a" role="tab">First section</button>
    <button class="nav-link" data-tab="b" role="tab">Second section</button>
  </nav>
  <div class="tab-content">
    <div class="tab-pane active" data-tab-panel="a">…</div>
    <div class="tab-pane" data-tab-panel="b" hidden>…</div>
  </div>
</div>

Behaviours are registered in src/js/core/ui.js; pages that build their content with JavaScript must call initUi(root) after rendering (the template's controllers already do this).

Class structure

.block               base
.block__element      inner part
.block--modifier     state or size
.is-*                behavioural state toggled by JS (is-active, is-loading)

Tip: colours come from tokens only; to create a new state use --nv-*, not a raw colour code

Warning: do not hard-code the behavioural is-* classes in HTML

If an element must start active, use a controller or [data-tabs] so the logic stays in one place.

المكونات

تضم مكتبة مكونات NOVAADMIN ٣٩ مكوّناً جاهزاً. جميعها مبنية من رموز نظام التصميم، وتعمل بشكل صحيح في كل التخطيطات وفي الاتجاهين، ويمكن مشاهدتها في صفحات ui/*.

قائمة المكونات

الفئة	المكونات	صفحة العرض
أساسية	زر، زر أيقونة، مجموعة أزرار، segmented	`ui/buttons.html`
أساسية	شارة، رقاقة حالة، صورة رمزية، مؤشر الاتصال	`ui/badges.html`, `ui/avatars.html`
أساسية	بطاقة، بطاقة إحصائية، بطاقة وسائط، مربع	`ui/cards.html`
النماذج	حقل إدخال، قائمة اختيار، اختيار متعدد، مفتاح، منزلق، رفع، OTP، بحث	`ui/forms.html`, `ui/inputs.html`
التنقل	تبويبات، أكورديون، قائمة منسدلة، مسار التنقل، ترقيم الصفحات، شريط جانبي متداخل	`ui/tabs.html`, `ui/dropdowns.html`
البيانات	جدول، جدول بيانات، شجرة، قائمة مجمّعة، خط زمني	`ui/tables.html`, `ui/timeline.html`
التغذية الراجعة	تنبيه، رسالة منبثقة، نافذة، تأكيد، حالة فارغة، حالة خطأ، هيكل تحميل	`ui/alerts.html`, `ui/toasts.html`, `ui/states.html`
العرض	مخطط، تقدّم، تقييم، تقويم، كانبان، دردشة	`ui/charts.html`, `ui/progress.html`
التخطيط	شبكة، عمودان، صندوق، أداة	`ui/grid.html`
الطباعة	العناوين، الفقرة، الرابط، كتلة الشيفرة	`ui/typography.html`

أمثلة الشيفرة

الأزرار

<button class="btn btn-primary">حفظ</button>
<button class="btn btn-light">إلغاء</button>
<button class="btn btn-soft-success">موافقة</button>
<button class="btn btn-danger btn-sm">حذف</button>
<button class="icon-btn" aria-label="تعديل"><i class="bi bi-pencil"></i></button>

البطاقة الإحصائية

<article class="stat-card">
  <div class="stat-card__head">
    <span class="stat-card__label">إيراد الشهر</span>
    <span class="stat-card__icon stat-card__icon--primary"><i class="bi bi-cash-stack"></i></span>
  </div>
  <p class="stat-card__value numeric">٢٫٤ مليار</p>
  <span class="stat-card__trend"><i class="bi bi-arrow-up-right"></i> ١٢٫٤٪</span>
</article>

صناديق التنبيه

<div class="callout callout--info"><i class="bi bi-info-circle"></i><div><strong>ملاحظة</strong><p class="mb-0">نص إرشادي</p></div></div>
<div class="callout callout--warning"><i class="bi bi-exclamation-triangle"></i><div><strong>تحذير</strong><p class="mb-0">نص التحذير</p></div></div>

الرسائل المنبثقة (Toast) من جافاسكريبت

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

toast.success('تم الحفظ', 'تم تسجيل التغييرات بنجاح.');
toast.warning('انتباه', 'حقلان إلزاميان فارغان.');
toast.danger('خطأ', 'تعذّر الاتصال بالخادم.');
toast.info('معلومة', 'يتوفر إصدار جديد.');

موضع الرسائل قابل للاختيار: data-toast-host="top-start" وtop-end وbottom-start وbottom-end؛ وتنعكس في وضع RTL.

الحوار والتأكيد

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

await modal.confirm({ title: 'حذف المنتج', text: 'لا يمكن التراجع عن هذا الإجراء.', tone: 'danger', confirmText: 'احذف' });
modal.alert({ title: 'معلومة', text: 'الملف جاهز للتنزيل.' });

التبويبات والأكورديون

<div class="tabs" data-tabs>
  <nav class="nav nav-tabs" role="tablist">
    <button class="nav-link active" data-tab="a" role="tab">القسم الأول</button>
    <button class="nav-link" data-tab="b" role="tab">القسم الثاني</button>
  </nav>
  <div class="tab-content">
    <div class="tab-pane active" data-tab-panel="a">…</div>
    <div class="tab-pane" data-tab-panel="b" hidden>…</div>
  </div>
</div>

تُسجَّل السلوكيات في src/js/core/ui.js؛ والصفحات التي تبني محتواها بجافاسكريبت يجب أن تستدعي initUi(root) بعد العرض (متحكمات القالب تفعل ذلك).

بنية الفئات

.block               الأساس
.block__element      جزء داخلي
.block--modifier     حالة أو حجم
.is-*                حالة سلوكية تغيّرها JS (is-active، is-loading)

ملاحظة: تأتي الألوان من الرموز فقط؛ لإنشاء حالة جديدة استخدم --nv-* لا رمز لون مباشراً

تحذير: لا تثبّت فئات is-* السلوكية في HTML

إذا كان يجب أن يبدأ عنصر في الحالة النشطة، فاستخدم متحكماً أو [data-tabs] ليبقى المنطق في مكان واحد.