Comportements

Moteur déclaratif

Écris l’intention en attributs courts, engine.js pose les classes. Le HTML reste lisible, et le même composant a le même rendu dans tous les modules.

Essayer

badge success warning aub-code

HTML

<button aub-btn primary>Enregistrer</button>
<button aub-btn ghost sm>Plus tard</button>
<div aub-card pad>
  <h3 aub-title>Titre</h3>
  <p aub-muted>Texte secondaire</p>
</div>
<div aub-alert warning>Bientôt plein</div>

Installer

Inclus dans aubui.js et aubui.light.js. Seul :

HTML

<script src="https://ui.aubota.xyz/js/engine.js" defer></script>

Attributs → classes

Attribut	Classe de base	Modificateurs (attributs en plus)
`aub-btn`	`.aub-btn`	`primary` `ghost` `danger` `success` `sm` `md` `lg` `block` → `.aub-btn--…`
`aub-card`	`.aub-card`	`pad`
`aub-input`	`.aub-input`	`block`
`aub-alert`	`.aub-alert`	`info` `success` `warning` `danger`
`aub-badge`	`.aub-badge`	`success` `warning` `danger` `info`
`aub-field` · `aub-label` · `aub-hint`	`.aub-field` …	—
`aub-muted` · `aub-link` · `aub-code` · `aub-pre`	même nom	—
`aub-title`	`.aub-card__title`	—
`aub-text-sm` · `aub-text-xs` · `aub-text-lg`	même nom	—

Le moteur ajoute des classes, il ne retire rien et ne réécrit jamais le contenu. Les classes écrites à la main restent valables (et sont le seul moyen pour les variantes non listées ici, ex. .aub-badge--accent).

Navbar de module `aub-nav`

Seule exception : <nav aub-nav> est reconstruite (marque, liens, cloche, bouton Thème, menu mobile). Détails sur la page Navbar.

Contenu injecté

Un MutationObserver traite automatiquement les nœuds ajoutés après le chargement. Pour forcer un passage (fragment détaché, rendu avant insertion) :

const frag = document.createElement('div');
frag.innerHTML = '<button aub-btn success>OK</button>';
Aubui.process(frag);      // classes posées tout de suite
Aubui.processNav(frag);   // idem pour les <nav aub-nav>

Essayer

Installer

Attributs → classes

Navbar de module aub-nav

Contenu injecté

Navbar de module `aub-nav`