Hello World
Page d'accueil : chaque section présente un composant de la bibliothèque, à utiliser tel quel dans vos applications.
Messages
Boutons
Boutons pictogrammes
Pictogrammes : tailles
Quatre tailles : sm (18 px, défaut), md (24 px), lg (32 px), xl (48 px).
Menu d'actions (bouton « plus »)
Tableau triable, filtrable, paginé
Listes à puce
Formulaire
Listes déroulantes
Aucune sélection.
Arborescence
Aucune sélection.
Avec cases à cocher
Aucune case cochée.
Avec boutons radio
Aucun choix.
Liste réordonnable
Glissez-déposez les lignes, ou utilisez les boutons Monter / Descendre.
Accordéon
Une seule section reste ouverte à la fois.
Cliquez sur un titre pour ouvrir ou replier la section.
Chaque titre est un bouton ; le contenu replié n'est pas atteignable au clavier.
Plusieurs sections ouvertes
Avec l'attribut « multiple », plusieurs sections peuvent rester ouvertes.
Celle-ci est ouverte aussi.
Onglets
Contenu de l'onglet Général. Utilisez les flèches gauche et droite pour changer d'onglet.
Contenu de l'onglet Détails.
Onglet désactivé.
Fenêtres et notifications
Le focus reste dans la fenêtre, la touche Échap la ferme et le focus revient au bouton qui l'a ouverte.
Étiquettes et badges
Étiquettes retirables
Fil d'Ariane
Au-delà de 4 niveaux, le milieu se replie derrière « … ».
Tiroir latéral
Liste d'abord, création dans un tiroir : le tiroir se ferme avec Échap et le focus revient au bouton.
Le tiroir peut aussi s'ouvrir à gauche.
Chargement et état vide
Dates et heures
Aucune date saisie.
Progression
Cercles
Choix de couleur
Envoi de fichiers
Envoi simulé (aucune route de réception n'est fournie). Un fichier dont le nom contient « erreur » échoue, pour essayer « Réessayer ».
Agenda
Cliquez sur un événement, sélectionnez des créneaux vides (glisser) pour en proposer un nouveau, glissez un événement pour le déplacer, tirez le bas d'un bloc pour changer sa durée (au clavier : Alt + flèches, Alt + Maj + flèches). « Astreinte de nuit » est verrouillée : l'application refuse sa modification.
Tableau à sélection et actions groupées
Cochez des lignes (Maj + clic pour une plage), cochez la case d'en-tête pour la page entière, puis utilisez les actions. La sélection survit au tri, au filtre et à la pagination.
Aucune action effectuée.
Infobulles
Livraison sous 3 à 5 jours ouvrés. Le contenu peut contenir des liens et des boutons.
Le côté opposé est utilisé si la place manque.
Assistant en plusieurs étapes
L'assistant s'ouvre ici dans un tiroir. Activez « Client professionnel » à la première étape pour ajouter l'étape « Société ».
Grille de saisie
Saisie rapide de type tableur : flèches et Tab pour naviguer, taper pour remplacer, Entrée ou F2 pour modifier, Échap pour annuler. Collez une plage copiée dans Excel (Ctrl+V). Le format est contrôlé à la sortie de chaque cellule : une cellule invalide est marquée en rouge sans bloquer la saisie.
Données saisies et erreurs
Tableau de bord : cartes et graphiques
Cartes de statistiques (la tendance se lit par la flèche et le texte, pas seulement par la couleur) et graphiques sans bibliothèque. Flèches du clavier pour parcourir les valeurs d'un graphique ; la légende masque ou affiche une série ; le tableau des données est l'alternative texte.
Interrupteurs et curseurs
Compte et droits
La connexion et les droits sont gérés par le serveur. L'interface les reflète : un bouton portant requires="permission" est désactivé sans le droit, ou masqué avec data-hidden-if-denied. Le serveur refuse de toute façon une action non autorisée.
Texte : compteur et mise en forme
Valeur produite (HTML assaini et texte brut)
Pagination
Composant autonome (liste côté serveur ou côté client) : les tableaux l'utilisent aussi, avec le nombre de résultats par page.
Navigation
Cette page utilise les deux composants de navigation :
ui-navbar) : entrées et sous-menus déroulants ; sous 720 px, il se replie derrière un bouton « Menu ».ui-sidenav) : groupes repliables et page courante signalée ; sous 900 px, il se replie au-dessus du contenu.