Design Tokens
כל ה-CSS custom properties של Nimbus UI.
Colors — Backgrounds
bg-base#070B14
bg-surface#0D1117
surface-2#161B22
surface-3#1E2530
Colors — Signals
primary#3B82F6
success#10B981
warning#F59E0B
danger#EF4444
info#06B6D4
Colors — Skill Brands
smart-home
media
photos
files
cloud
security
Button
<nb-button> — פעולות ראשיות, משניות, הרסניות.
Variants
<nb-button variant="primary">ראשי</nb-button>
<nb-button variant="secondary">משני</nb-button>
<nb-button variant="ghost">שקוף</nb-button>
<nb-button variant="danger">מחק</nb-button>
Sizes
<nb-button size="sm">קטן</nb-button>
<nb-button size="md">בינוני</nb-button>
<nb-button size="lg">גדול</nb-button>
States
<nb-button variant="primary" disabled>מושבת</nb-button>
<nb-button variant="primary" loading>טוען</nb-button>
<nb-button variant="primary" icon="check">עם אייקון</nb-button>
Badge
<nb-badge> — תוויות סטטוס, קטגוריות, מידע.
Variants
<nb-badge variant="success">פעיל</nb-badge>
<nb-badge variant="danger">שגיאה</nb-badge>
Sizes + Dot
<nb-badge variant="success" dot></nb-badge>
<nb-badge variant="primary" size="sm">קטן</nb-badge>
Card
<nb-card> — קונטיינר תוכן עם slots לheader/footer.
Elevation + Glow
Elevation 0
Elevation 1
Glow primary
Glow success
<nb-card elevation="2" glow="primary">
<span slot="header">כותרת</span>
תוכן הכרטיס
<nb-button slot="footer">פעולה</nb-button>
</nb-card>
Interactive
לחץ או הפעל עם Enter/Space
<nb-card interactive elevation="1">…</nb-card>
Input
<nb-input> — שדה קלט טקסטואלי עם תמיכה ב-label, error, icon.
States
<nb-input label="שם" placeholder="הכנס שם" required></nb-input>
<nb-input label="שדה עם שגיאה" error="שדה חובה"></nb-input>
Select
<nb-select> — תפריט בחירה נגיש.
Basic
<nb-select label="בחר אזור">
<nb-option value="salon">סלון</nb-option>
<nb-option value="kitchen">מטבח</nb-option>
</nb-select>
Progress
<nb-progress> — סרגל התקדמות עם role="progressbar" נגיש.
Variants + Values
<nb-progress value="75" label="Maturity" show-value></nb-progress>
<nb-progress indeterminate label="טוען..."></nb-progress>
Toast
NimbusToast API — הודעות קצרות שמופיעות בפינה.
Trigger Examples
// Import NimbusToast from nimbus-ui.js
NimbusToast.success('שמירה בוצעה!');
NimbusToast.error('שגיאה', 'פרטי שגיאה');
NimbusToast.warning('אזהרה');
NimbusToast.info('מידע');
Tabs
<nb-tabs> — ניווט tablist נגיש עם keyboard support.
Horizontal Tabs
תוכן לשונית מכשירים — 464 entities
תוכן לשונית אזורים — 8 areas
תוכן לשונית אוטומציות — 3 automations
<nb-tabs active="t1">
<nb-tab id="t1" label="מכשירים"></nb-tab>
<nb-tab id="t2" label="אזורים"></nb-tab>
<nb-tab-panel for="t1">תוכן 1</nb-tab-panel>
<nb-tab-panel for="t2">תוכן 2</nb-tab-panel>
</nb-tabs>
Modal
<nb-modal> — דיאלוג מודלי עם focus trap ו-Escape לסגירה.
Sizes
<nb-modal id="my-modal" title="כותרת" size="md" close-on-backdrop>
תוכן המודל
<nb-button slot="footer" onclick="this.closest('nb-modal').removeAttribute('open')">סגור</nb-button>
</nb-modal>
<nb-button onclick="document.getElementById('my-modal').setAttribute('open','')">פתח</nb-button>
Table
<nb-table> — טבלת נתונים עם מיון, striping, ובחירה.
Striped + Hoverable + Sortable
<nb-table striped hoverable>
<nb-th sort="name">שם</nb-th>
<nb-th sort="area">אזור</nb-th>
<nb-tr>
<nb-td>מנורת הסלון</nb-td>
<nb-td>סלון</nb-td>
</nb-tr>
</nb-table>