مرجع JavaScript
همه چیز اختیاری است: بدون JavaScript، کامپوننت‌های ظاهری، Accordion (details) و Dialog (با commandfor در مرورگرهای جدید) کار می‌کنند.
| فراخوانی | توضیح |
|---|---|
| Bana.start(opts) | شروع موتور. opts: { root, observe, debug, restoreTheme }. چندبار فراخوانی بی‌اثر است. |
| Bana.stop() | حذف همه Listenerها و Observerها. |
| Bana.refresh(root?) | اسکن مجدد پس از افزودن HTML جدید. |
| Bana.register(name, {init, destroy}) | ثبت کنترلر سفارشی. |
| Bana.theme.setMode / setPalette / setDensity / get | مدیریت تم. |
| Bana.dialog.open(idOrEl) / close(idOrEl) | مدیریت Dialog. |
| Bana.toast(input) | نمایش اعلان؛ خروجی: { close(), element }. |
| Bana.registerIcon(name, paths, opts) | ثبت آیکون. |
| Bana.debug(true) | هشدار برای آیکون ناشناخته و Dialog بدون نام. |
رویدادها
document.addEventListener("bana:ready", () => {});
document.addEventListener("bana:theme-change", (e) => e.detail); // { mode, palette, density, resolved }
document.addEventListener("bana:dialog-open", (e) => e.detail.dialog);
document.addEventListener("bana:dialog-close", (e) => e.detail.dialog);
document.addEventListener("bana:tab-change", (e) => e.detail); // { index, tab, panel }
document.addEventListener("bana:toast-show", (e) => e.detail);لایه‌های CSS
ترتیب (کم‌اولویت ← پراولویت): reset → tokens → themes → base → layout → components → utilities. CSS بدون لایه شما همیشه بر Bana غالب است؛ بنابراین هیچ‌وقت به !important نیاز نخواهید داشت.
/* customise without !important */
button[ui~="primary"] { --_bg: var(--bana-firuzeh-600); }
:root { --bana-radius-md: 0.25rem; } /* sharper corners library-wide */