Système de composants Tailwind · Nouvelle ressource
Système de design Preline UI.
Un planificateur de sessions Preline natif avec des onglets liés, un plugin de saisie numérique à limites définies, les alias de thème installés, les véritables échelles Tailwind et une estimation locale du matériel qui se met à jour selon la session choisie.
Preline 4.2.0 HSTabs et HSInputNumber avec Tailwind CSS 4.3.3 et le thème par défaut du package. · Référence de mise en œuvre
02
Référence de design du système de design Preline UI
Preline npm 4.2.0 avec Tailwind CSS 4.3.3 ; thème par défaut du package installé. Le site marketing et la documentation peuvent afficher une bannière annonçant une version plus récente ; l’exemple exécutable est donc explicitement verrouillé sur cette version. Les alias de thème restent des alias ; aucune conversion hexadécimale n’est supposée.
Système de design Preline UI : Preline associe le balisage utilitaire à des plugins de comportement
Preline associe le balisage utilitaire à des plugins de comportement
Le planificateur utilise deux plugins natifs de Preline : HSTabs sélectionne un panneau de session, et HSInputNumber gère les commandes d’incrémentation et de décrémentation avec des limites. Les classes Tailwind assurent l’essentiel du traitement visuel. L’illustration de session d’origine et le calcul du budget relèvent de l’application, et non d’un hypothétique composant de réservation tout-en-un.
Cette distinction est importante lorsqu’on reprend l’exemple. L’installation du package JavaScript à elle seule ne compile pas les classes utilitaires et ne fournit pas le balisage de l’application. À l’inverse, copier HTML sans initialiser les plugins ne permet pas d’obtenir un comportement complet pour les onglets et les champs numériques. L’intégration complète ci-dessous présente explicitement chaque élément.
Système de design Preline UI : remonter des alias sémantiques jusqu’aux rôles de la palette
Suivez les alias sémantiques jusqu’aux rôles de leur palette
Dans le thème clair par défaut du package, --primary renvoie à --color-primary-600, dont la gamme primaire sous-jacente est bleue. La couleur de premier plan primaire est blanche ; les états de survol, de focus et actif utilisent le rôle 700. L’onglet sélectionné et l’action Enregistrer partagent cette famille grâce à des classes utilitaires sémantiques.
Les cartes utilisent --card et --card-line, tandis que le champ de quantité utilise --layer et --layer-line. Le fait de séparer ces rôles rend les futurs changements de thème plus prévisibles que la dispersion de classes littérales white et gray. Le tableau conserve les alias officiels au lieu de présenter des approximations calculées comme s’il s’agissait de jetons sources.
Système de design Preline UI : utiliser la véritable échelle Tailwind et signaler les exceptions d’origine
Utilisez la véritable échelle de Tailwind et signalez les exceptions originales
Le titre de la page et l’estimation utilisent text-3xl, le titre de la session utilise text-2xl et le texte des formulaires utilise text-sm. La marge intérieure p-5 des cartes équivaut à 1.25rem avec l’unité d’espacement par défaut. La marge plus grande sm:p-8 de la page s’applique à partir du point de rupture Tailwind small de 640px, tandis que la grille d’origine passe à une seule colonne à 760px.
La feuille de style locale utilise system-ui et ne charge pas les polices personnalisées facultatives nommées dans le fichier de thème de Preline. À 280px, les onglets passent sur deux lignes et la carte de groupe se place sous la session. Il s’agit de choix délibérés de composition propres à l’application, et non d’une affirmation selon laquelle toutes les mises en page Preline auraient cette géométrie.
Système de design Preline UI : relier les commandes des onglets aux panneaux par des identifiants stables
Reliez les contrôles d’onglet et les panneaux au moyen d’identifiants stables
Chaque onglet possède un attribut data-hs-tab qui pointe vers un panneau unique. Les attributs aria-controls de l’onglet et aria-labelledby du panneau répètent cette relation pour les technologies d’assistance. Un seul onglet initial porte active et aria-selected=true, et les autres panneaux sont masqués au départ. HSTabs met à jour ces états au fil de la navigation.
Le style visuel actif utilise hs-tab-active:bg-primary et hs-tab-active:text-primary-foreground. Ces variantes proviennent de variants.css de Preline ; sans cet import, l’état sélectionné peut être difficile à distinguer visuellement, même si JavaScript modifie correctement les classes. L’application observe les changements de sélection pour actualiser le récapitulatif adjacent.
Sélectionnez Atelier de poterie et vérifiez son titre, les matériaux et la durée.
Faites passer le nombre de participants de deux à trois et vérifiez l’estimation de $54.
Enregistrez le plan local, puis changez d’onglet pour effacer l’ancienne confirmation.
Système de design Preline UI : faire concorder les options du plugin et les contraintes du champ numérique
Les options du plugin doivent correspondre aux contraintes des champs de saisie
Le conteneur de quantité définit un minimum de un, un maximum de six et un incrément de un dans data-hs-input-number. Le champ numérique natif reprend ces mêmes contraintes. Ainsi, les boutons du plugin et la validation du navigateur appliquent tous deux le même ensemble de valeurs autorisées, au lieu de permettre à une valeur saisie de contourner une limite qui n’existerait que dans le gestionnaire des boutons.
Le récapitulatif écoute les événements input et change, ainsi que le rappel change du plugin. Une saisie manuelle invalide remplace le total par un tiret cadratin et désactive le bouton Enregistrer ; le gestionnaire d’enregistrement appelle également reportValidity avant de lire la valeur. La limite de six personnes est une contrainte de planification donnée à titre d’exemple, et ne garantit pas la disponibilité réelle.
Système de design Preline UI : calculer à partir du panneau actif plutôt que d’étiquettes obsolètes
Effectuez le calcul à partir du panneau actif plutôt que de libellés obsolètes
Chaque panneau stocke un nom de session, un prix et une durée stables dans des attributs data. La fonction de mise à jour lit le panneau visible et multiplie le montant alloué par la taille valide du groupe. Atelier d’impression, Atelier de poterie et Balade dessinée correspondent ainsi à de véritables choix distincts, plutôt qu’à des onglets qui afficheraient la même carte factice.
L’estimation affichée couvre uniquement les matériaux. Les descriptions d’origine précisent ce que comprend le montant alloué, et la page indique explicitement qu’il ne s’agit pas d’une réservation. Aucun paiement, contrôle d’inventaire ou calendrier externe ne se cache derrière ces chiffres. Un véritable parcours de réservation nécessiterait ces systèmes séparés ainsi qu’une validation côté serveur.
Système de design Preline UI : utiliser le point d’entrée manuel exporté dans cette version du package
Utilisez le point d’entrée manuel exporté dans cette version du package
La version vérifiée 4.2.0 du package expose les exports nommés HSTabs et HSInputNumber depuis preline/non-auto. L’exemple les importe et appelle leurs méthodes autoInit une fois le balisage en place. Malgré son nom, autoInit désigne ici une analyse explicite lancée par l’application, et non un hook implicite qui initialise le package complet au chargement de la page.
Lors de la vérification, les chemins .mjs propres à chaque plugin n’exposaient pas de classe par défaut, et les imports directs depuis ces chemins pouvaient être supprimés en raison des métadonnées sideEffects du package. L’utilisation du point d’entrée manuel exporté a résolu ce problème de build concret. La configuration présente donc l’import versionné fonctionnel, plutôt qu’un import générique de plugin qui n’a pas été testé.
Système de design Preline UI : faire expirer la confirmation lorsque le plan change
Faire expirer la confirmation lorsque le plan change
L’action Enregistrer le plan local écrit une phrase d’état indiquant la session exacte, le nombre de participants et le total des matériaux, puis se désactive. Toute modification de la quantité ou de l’onglet sélectionné appelle update, rétablit le message explicatif habituel et recalcule si l’enregistrement est autorisé. Une confirmation déjà enregistrée ne peut pas rester associée à un nouveau plan.
Le test local a sélectionné Atelier de poterie, porté le nombre à trois et vérifié le statut correspondant à $54. Il a également inspecté la page réellement affichée à 280px. Un total statique ou un bouton qui ne ferait que modifier son propre libellé ne prouverait pas que les deux plugins natifs et l’état de l’application sont bien reliés.
Utilisez une région de statut pour afficher le résultat local exact.
Excluez les valeurs invalides du total calculé.
Conservez des identifiants stables pour les onglets et les panneaux lorsque vous adaptez le balisage.
Système de design Preline UI : compiler le thème, les variantes et le balisage source réel
Compilez le thème, les variantes et le balisage source réel
La feuille de style importe d’abord Tailwind, puis les variantes de Preline et le thème par défaut fourni avec le package. Les chemins des sources sont définis explicitement : ils incluent le fichier HTML local, le fichier JavaScript de l’application et les fichiers de distribution de Preline. Les utilitaires dépendant de l’état sont ainsi disponibles dans le fichier CSS généré. La feuille de style de mise en page d’origine est importée ensuite.
L’aperçu autonome intègre le fichier CSS compilé et le fichier JavaScript regroupé, sans effectuer de requête CDN. Un projet de production peut servir ces mêmes fichiers de sortie séparément. Les chemins doivent être relatifs au fichier d’entrée CSS réel. Dans l’exemple reproductible ci-dessous, tous les fichiers source se trouvent à la racine du projet afin d’éviter toute dépendance cachée à un espace de travail temporaire.
Les trois sessions et leurs prix sont des données d’exemple originales.
Le champ natif applique les mêmes contraintes que le plugin.
Initialisation complète du plugin et calcul
Initialisation manuelle à partir de l’entrée exportée sans initialisation automatique ; la sélection et la quantité alimentent un récapitulatif calculé.
javascript
import {HSTabs,HSInputNumber} from 'preline/non-auto';
HSTabs.autoInit();HSInputNumber.autoInit();
const quantity=document.querySelector('#people'),save=document.querySelector('#save'),feedback=document.querySelector('#feedback');
function selected(){return document.querySelector('[role=tabpanel]:not(.hidden)')}
function update(){const panel=selected(),count=Number(quantity.value);document.querySelector('#selected-name').textContent=panel.dataset.name;document.querySelector('#selected-duration').textContent=panel.dataset.duration;document.querySelector('#total').textContent=quantity.checkValidity()&&count>=1?'$'+count*Number(panel.dataset.price):'—';save.disabled=!quantity.checkValidity()||count<1;feedback.textContent='No booking or payment is created.'}
document.querySelectorAll('[data-hs-tab]').forEach(button=>button.addEventListener('click',()=>queueMicrotask(update)));
new MutationObserver(update).observe(document.querySelector('nav'),{subtree:true,attributes:true,attributeFilter:['aria-selected']});
quantity.addEventListener('input',update);quantity.addEventListener('change',update);
const instance=HSInputNumber.getInstance('#quantity');instance.on('change',update);
save.addEventListener('click',()=>{if(!quantity.reportValidity())return;const panel=selected();feedback.textContent=`Saved locally: ${panel.dataset.name}, ${quantity.value} people, $${Number(quantity.value)*Number(panel.dataset.price)} materials estimate.`;save.disabled=true});update();
Les illustrations sont originales CSS et masquées aux technologies d’assistance.
Cette feuille de style suit les imports de Tailwind et de Preline.
04
Configuration de l’agent du système de design Preline UI
Point de départ de l’implémentation
Compatibilité vérifiée avec Preline 4.2.0. Le balisage, la logique et le fichier CSS complets sont fournis ci-dessus. Les chemins des sources dans input.css supposent que les quatre fichiers source se trouvent à la racine du projet.
bash
# Create an empty directory and run:
npm init -y
npm install [email protected][email protected] @tailwindcss/[email protected] esbuild
# Save the complete examples above as body.html, app.js and style.css.
# Create input.css with exactly:
# @import "tailwindcss" source(none);
# @import "./node_modules/preline/variants.css";
# @import "./node_modules/preline/css/themes/theme.css";
# @source "./body.html";
# @source "./app.js";
# @source "./node_modules/preline/dist/*.js";
# @import "./style.css";
npx @tailwindcss/cli -i input.css -o bundle.css --minify
npx esbuild app.js --bundle --format=iife --outfile=bundle.js
# Assemble the actual root document without placeholder markup:
node -e 'const f=require("fs");f.writeFileSync("index.html",`<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Studio planner</title><link rel="stylesheet" href="bundle.css"></head><body>${f.readFileSync("body.html","utf8")}<script src="bundle.js"></script></body></html>`)'
# Serve this directory with your existing static server.
Un prompt pour votre projet
Prompt pour l’agent IA
Utilisez Preline 4.2.0 avec les imports nommés HSTabs et HSInputNumber depuis preline/non-auto, puis initialisez explicitement les deux plugins. Conservez les trois ateliers Studio Saturday, la plage de quantités de un à six et le coût du matériel de l’atelier sélectionné. Calculez le total à partir du panneau actif et de la quantité, invalidez le plan enregistré après toute modification de l’un ou de l’autre et vérifiez que la valeur numérique se situe dans la plage autorisée avant l’enregistrement local. Incluez la configuration fournie du thème et des variantes Tailwind ainsi que la mise en page d’origine. Ne transformez pas le plan de l’atelier local en confirmation de réservation ou de paiement.
05
Sources et périmètre du système de design Preline UI
Preline npm natif 4.2.0 avec Tailwind CSS 4.3.3. Descriptions originales des sessions, illustrations et budgets fictifs de matériel. L’enregistrement ne conserve que l’état local de la page ; aucune réservation, aucun paiement ni aucun message externe n’est effectué.
