Documentation ZenStyle

Notifications toast

Un toast confirme une action sans bloquer la navigation. Les types disponibles sont success, error, warning et info.

Déclenchement HTML

<button class="zs-btn zs-btn-success"
  data-zs-toast="Enregistrement réussi."
  data-zs-toast-type="success"
  data-zs-toast-duration="4000">
  Enregistrer
</button>

API JavaScript

ZenStyle.toast('Enregistrement réussi.', {
  type: 'success',
  duration: 4000
});

La durée est exprimée en millisecondes. Utilisez duration: 0 pour garder le toast affiché jusqu’à sa fermeture manuelle.

L’API accepte aussi position (top-right, top-left, bottom-right, bottom-left), max, actionLabel et onAction. Une minuterie visuelle accompagne les notifications temporaires.

Menu déroulant

<div class="zs-dropdown" data-zs-dropdown>
  <button class="zs-btn zs-btn-primary zs-dropdown-toggle"
    data-zs-dropdown-toggle>Actions</button>
  <div class="zs-dropdown-menu" data-zs-dropdown-menu>
    <a class="zs-dropdown-item" href="#profil">Profil</a>
    <button class="zs-dropdown-item" type="button">Partager</button>
  </div>
</div>

Le menu gère automatiquement les attributs ARIA, le clic extérieur et la touche Échap.

Les touches fléchées, Début et Fin permettent de parcourir les actions. Ajoutez zs-dropdown-end pour aligner le menu à droite.

Modales, accordéons et onglets

Ouvrez une modale avec data-zs-modal-open="#identifiant" et fermez-la avec data-zs-modal-close. Le focus reste dans la fenêtre puis revient au déclencheur.

Placez les boutons zs-accordion dans un conteneur data-zs-accordion="single" ou data-zs-accordion="multiple". Les flèches, Début et Fin déplacent le focus.

Les listes ayant role="tablist" prennent en charge les flèches gauche/droite, Début et Fin et synchronisent automatiquement leurs panneaux.

Navigation mobile

Le bouton hamburger est généré automatiquement sur les écrans jusqu’à 768 px lorsque zenstyle.js est chargé.

<nav class="zs-navbar" aria-label="Navigation principale">
  <a class="zs-navbar-brand" href="index.html">Ma marque</a>
  <div class="zs-nav-links">
    <a href="index.html" aria-current="page">Accueil</a>
    <a href="contact.html">Contact</a>
  </div>
</nav>

Le composant gère automatiquement le clic extérieur, la touche Échap, le retour du focus et la fermeture après sélection d’un lien.

Validation de formulaire

Ajoutez data-zs-validate au formulaire. ZenStyle utilise les règles HTML natives comme required, type="email", minlength, maxlength et pattern.

<form data-zs-validate>
  <div class="zs-form-summary" data-zs-error-summary
    role="alert" tabindex="-1" hidden></div>

  <div class="zs-form-group">
    <label for="email">Adresse e-mail</label>
    <input class="zs-input" id="email" type="email" required>
    <span class="zs-form-help">Nous ne partagerons pas votre adresse.</span>
  </div>

  <button class="zs-btn zs-btn-primary" type="submit">Envoyer</button>
</form>

Personnalisez un message avec data-zs-error-required, data-zs-error-type, data-zs-error-minlength, data-zs-error-maxlength ou data-zs-error-pattern.

Les événements zs:valid et zs:invalid permettent de connecter la validation à votre propre logique d’envoi.

Tableaux responsives

Placez zs-table dans zs-table-responsive. Ajoutez zs-table-striped, zs-table-hover ou zs-table-sticky selon le besoin.

<div class="zs-table-responsive" tabindex="0" role="region" aria-label="Résultats">
  <table class="zs-table zs-table-striped zs-table-hover">
    <thead><tr><th scope="col">Nom</th><th scope="col">Statut</th></tr></thead>
    <tbody><tr><th scope="row">Projet A</th><td>Actif</td></tr></tbody>
  </table>
</div>

Pagination

<nav aria-label="Pagination">
  <ul class="zs-pagination">
    <li><a class="zs-page-link" href="?page=1" aria-current="page">1</a></li>
    <li><a class="zs-page-link" href="?page=2">2</a></li>
  </ul>
</nav>

Fil d’Ariane

<nav aria-label="Fil d’Ariane">
  <ol class="zs-breadcrumb">
    <li class="zs-breadcrumb-item"><a href="/">Accueil</a></li>
    <li class="zs-breadcrumb-item"><span aria-current="page">Documentation</span></li>
  </ol>
</nav>

Barre de progression

<div class="zs-progress zs-progress-success" data-zs-progress="65" aria-label="Téléchargement">
  <div class="zs-progress-bar"></div>
</div>

Mettez-la à jour avec ZenStyle.progress(element, 80). Pour une durée inconnue, utilisez zs-progress-indeterminate sans data-zs-progress.

Utilitaires CSS

Les valeurs d’espacement vont de 0 à 4 et utilisent les variables ZenStyle.

<div class="zs-flex zs-flex-col zs-md-flex-row zs-items-center zs-gap-3 zs-p-3">
  <strong class="zs-text-lg">Titre</strong>
  <p class="zs-m-0 zs-text-sm">Contenu responsive</p>
</div>

Infobulle

<button data-zs-tooltip="Une information utile">Aide</button>

L’infobulle apparaît au survol et au clavier lorsque l’élément reçoit le focus.

Indicateur de chargement

<div role="status" aria-label="Chargement en cours">
  <span class="zs-spinner" aria-hidden="true"></span>
</div>

Les tailles zs-spinner-sm et zs-spinner-lg sont également disponibles.