📖 SoliBook
Le showroom montre des états figés. SoliBook fait l'inverse : tu choisis un composant dans le menu, et tu joues avec chacun de ses réglages pour vérifier que chaque état fonctionne.
Ce que tu vois est le vrai composant, rendu par le même code que celui du site. Si un réglage casse quelque chose ici, il le casse aussi en production.
Composants disponibles
Button
Actions · 14 réglages
Le bouton de Soliguide : une action sur la page, ou un lien qui a l'apparence d'un bouton. Huit couleurs, six styles, cinq tailles.
Dropdown
Actions · 3 réglages
Un menu qui s'ouvre au clic ou au focus sur son déclencheur, en CSS pur. Quatre emplacements.
Avatar
Data display · 8 réglages
La vignette d'une personne ou d'une structure : photo, initiales ou logo de la marque, avec une pastille de présence en option.
Badge
Data display · 7 réglages
Une petite étiquette pour qualifier un contenu : un statut, une catégorie, un compteur. Huit couleurs, quatre styles, cinq tailles.
Status
Data display · 4 réglages
Un point de statut (en ligne, alerte…). Huit couleurs, cinq tailles.
LanguageMenu
Navigation · 2 réglages
Le sélecteur de langue de la barre de navigation : le drapeau et le nom de la langue actuelle ; dans le menu, les autres langues avec leur drapeau, chacune vers la même page. Aucun JavaScript : le menu s'ouvre au clic ou au clavier.
Pagination
Navigation · 2 réglages
Un groupe de boutons pour naviguer entre des pages. Cinq tailles.
Alert
Feedback · 10 réglages
Un bandeau pour informer d'un événement important, avec icône et actions en option. Cinq couleurs, quatre styles, deux tailles.
Loading
Feedback · 4 réglages
Une animation pour indiquer qu'une action est en cours. Huit couleurs, cinq tailles.
Progress
Feedback · 5 réglages
Une barre de progression. Huit couleurs. Sans valeur, elle anime un état indéterminé.
Skeleton
Feedback · 2 réglages
Une forme grisée avec un reflet animé, à la place d'un contenu en attente de chargement.
Toast
Feedback · 11 réglages
Un empilement d'éléments (en général des Alert) ancré dans un coin de la page. Pas de couleur ni de taille propres -- celles réglables ci-dessous sont celles de l'Alert de démonstration qu'il empile.
Tooltip
Feedback · 5 réglages
Une bulle d'aide affichée au survol ou au focus d'un élément. Huit couleurs, quatre emplacements.
Checkbox
Data input · 8 réglages
Une case à cocher, pour un choix oui/non ou une sélection multiple. Huit couleurs, quatre tailles.
Filter
Data input · 4 réglages
Un groupe de boutons radio : choisir une option masque les autres et affiche un bouton de réinitialisation. Cinq tailles.
Input
Data input · 20 réglages
Un champ de saisie, avec son intitulé, un texte d'aide, un message d'erreur, des préfixes et des icônes. Huit couleurs, deux styles, cinq tailles.
NeedField
Data input · 4 réglages
Le champ « Que recherchez-vous ? », avec les suggestions de l'ancien site : organisations et établissements d'abord, puis catégories, puis la recherche libre. Sans JavaScript, un champ de texte ordinaire ; son script n'est chargé qu'au premier usage. SoliBook ne rejoue pas ce script : la liste se voit avec « open ».
PlaceField
Data input · 4 réglages
Le champ « à proximité de ? », avec les lieux de Location API — « Ville - Bordeaux (33000) », une adresse telle quelle — et le bouton « Me géolocaliser ». Son script n'est chargé qu'au premier usage. SoliBook ne rejoue pas ce script : la liste se voit avec « open ».
Radio
Data input · 8 réglages
Un bouton radio, pour choisir une seule option parmi plusieurs (donner le même `name` à chaque option du groupe). Huit couleurs, quatre tailles.
Textarea
Data input · 15 réglages
Un champ de saisie multiligne, avec son intitulé, un texte d'aide et un message d'erreur. Huit couleurs, deux styles, cinq tailles.
Toggle
Data input · 11 réglages
Un interrupteur, pour activer ou désactiver un réglage tout de suite. Sept couleurs, cinq tailles.
Divider
Layout · 5 réglages
Un séparateur, avec ou sans texte, à l'horizontale ou à la verticale. Huit couleurs.