# Système de design Preline UI ## Aperçu de l’interface du système de design Preline UI Comparez trois séances créatives originales, modifiez la taille du groupe et enregistrez une estimation clairement locale des matériaux. ## 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. ### Thème sémantique clair par défaut | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --background | var(--color-white) | Rôle d’arrière-plan par défaut. | | --foreground | var(--color-gray-800) | Rôle du texte principal. | | --border | var(--color-gray-200) | Rôle de bordure partagé. | | --primary | var(--color-primary-600) | Onglet actif et action principale. | | --primary-foreground | var(--color-white) | Texte sur la couleur primaire. | | --primary-hover | var(--color-primary-700) | État au survol. | | --primary-focus | var(--color-primary-700) | État de focus. | | --primary-active | var(--color-primary-700) | État actif. | | --layer | var(--color-white) | Surface du contrôle de quantité. | | --layer-line | var(--color-gray-200) | Bordure du contrôle de quantité. | | --layer-hover | var(--color-gray-50) | Surface au survol. | | --card | var(--color-white) | Cartes des séances et des groupes. | | --card-line | var(--color-gray-200) | Bordure de carte. | | --muted-foreground-1 | var(--color-gray-500) | Texte d’accompagnement. | ### Échelles Tailwind réellement utilisées | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | p-2 / gap-2 | 0.5rem | Conteneur de quantité et espaces entre les onglets. | | px-3 / gap-3 | 0.75rem | Marges internes des onglets et espacement du contrôle numérique. | | p-5 | 1.25rem | Cartes et marge intérieure par défaut de la page. | | sm:p-8 | 2rem from 640px | Marge intérieure de la page au point de rupture petit. | | mt-7 | 1.75rem | Espace avant le planning. | | text-xs | 0.75rem / 1rem | Libellés complémentaires. | | text-sm | 0.875rem / 1.25rem | Contrôles et texte explicatif. | | text-lg | 1.125rem / 1.75rem | En-tête de groupe. | | text-2xl | 1.5rem / 2rem | Titre de la séance. | | text-3xl | 1.875rem / 2.25rem | Titre de la page et total. | | rounded-lg / rounded-xl | 0.5rem / 0.75rem | Contrôles / cartes ; valeurs de rayon par défaut de Tailwind. | ### Contraintes de l’application originale et des plugins | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Group size | min 1 / max 6 / step 1 | Les options de données de HSInputNumber et les contraintes du champ HTML concordent. | | Print studio allowance | $12 per participant | Estimation fictive des matériaux. | | Clay workshop allowance | $18 per participant | Estimation fictive des matériaux. | | Drawing walk allowance | $5 per participant | Estimation fictive des matériaux. | | Layout | Flexible session + 280px group card; stack at 760px | Composition adaptative originale. | | Theme mapping | bg-primary → --color-primary → --primary | L’utilitaire Tailwind sémantique est résolu par l’intermédiaire de l’alias Preline. | ## Guide complet du système de design Preline UI Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. 1. Sélectionnez Atelier de poterie et vérifiez son titre, les matériaux et la durée. 2. Faites passer le nombre de participants de deux à trois et vérifiez l’estimation de $54. 3. Enregistrez le plan local, puis changez d’onglet pour effacer l’ancienne confirmation. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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é. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## Exemples de composants du système de design Preline UI ### Balisage sémantique complet du planificateur Identifiants des onglets, relations entre les panneaux, gestionnaires des champs numériques et région d’état locale explicite. ```

STUDIO SATURDAY · SAMPLE PROGRAM

Choose a different kind of afternoon.

Explore three creative sessions and calculate a sample materials budget for your group. This planner does not book a place.

09:30–11:00 · 90 minutes

Ink, paper, repeat.

Make a two-color print from a simple cut-paper composition.

Materials included in the estimate

  • Cobalt ink
  • Warm white stock
  • Registration guide

Sample materials allowance: $12 per person

``` Référence du code - 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é. ``` 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(); ``` Référence du code - Utilisez les exports nommés de preline/non-auto. - Les fichiers .mjs des sous-chemins versionnés du plugin n’exportent pas de classe par défaut. - Les événements de modification du champ et les rappels de modification du plugin mettent tous deux à jour le récapitulatif. ### Composition adaptative d’origine complète Illustrations décoratives de gravure, de modelage et de dessin autour des plugins natifs d’onglets et de champs numériques. ``` html,body{margin:0;height:auto;min-height:0}body{background:#f7f8fb;font-family:ui-sans-serif,system-ui,sans-serif;color:var(--foreground)}button{cursor:pointer}button:disabled{cursor:default}.planner-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.session-art{height:200px;position:relative;overflow:hidden;border-radius:12px 12px 0 0}.session-art i,.session-art b,.session-art span{display:block;position:absolute}.print{background:#e2e9f4}.print i{width:160px;height:140px;left:15%;top:45px;background:#2456a7;transform:rotate(-13deg)}.print b{width:150px;height:150px;right:14%;top:30px;background:#f0a979;border-radius:50%;mix-blend-mode:multiply}.print span{width:180px;height:8px;left:20%;top:160px;background:#f9f8ef;transform:rotate(-13deg)}.ceramics{background:#e8d9c8}.ceramics i{width:150px;height:100px;left:25%;top:65px;border-radius:15% 15% 50% 50%;background:#a87862}.ceramics b{width:150px;height:32px;border-radius:50%;left:25%;top:53px;background:#704a3d;box-shadow:inset 0 0 0 10px #bd8f78}.ceramics span{width:150px;height:12px;left:25%;top:171px;background:#c7b39e;border-radius:50%}.drawing{background:#e2e8de}.drawing i{width:160px;height:145px;left:23%;top:25px;background:#fffdf4;transform:rotate(8deg);border:1px solid #d6d8cb}.drawing b{height:90px;width:80px;left:33%;top:49px;border:2px solid #4d655b;transform:rotate(-18deg);border-radius:50% 50% 10% 10%}.drawing span{width:130px;height:7px;background:#ad754c;left:45%;top:145px;transform:rotate(-33deg)}@media(max-width:760px){.planner-grid{grid-template-columns:minmax(0,1fr)}.session-art{height:170px}}@media(max-width:360px){main{padding:14px!important}.session-art i,.session-art b,.session-art span{transform:scale(.8)}.session-art{height:150px}h1{font-size:26px!important}} ``` Référence du code - Les illustrations sont originales CSS et masquées aux technologies d’assistance. - Cette feuille de style suit les imports de Tailwind et de Preline. ## 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. ``` # Create an empty directory and run: npm init -y npm install preline@4.2.0 tailwindcss@4.3.3 @tailwindcss/cli@4.3.3 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",`Studio planner${f.readFileSync("body.html","utf8")}`)' # Serve this directory with your existing static server. ``` ### Un prompt pour votre projet ``` 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. ``` ## 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é. - Thèmes Correspondance des rôles sémantiques et personnalisation du thème. - Plugin d’onglets Relations entre les éléments cibles, initialisation et comportement. - Champ numérique Limites, gestionnaires, méthodes et rappels de modification. - Balisage des onglets Composition de la liste d’onglets et des panneaux. - Intégration de JavaScript Limites de l’initialisation et cycle de vie du framework. - Typographie Hiérarchie typographique fondée sur les utilitaires. - Installation Compilation Tailwind et configuration du package. ## Ressources connexes du système de design Preline UI ### Prime UI Une implémentation PrimeVue dont la version est figée dans l’écosystème Prime UI : un arbre de documents au thème Aura avec les références réelles aux préréglages, l’expansion contrôlée, le filtrage, la sélection et l’épinglage local. ### Pure CSS Pure CSS est une feuille de style modulaire pour les grilles, formulaires, boutons, menus et tableaux, sans moteur d’exécution de widgets. Ce guide montre comment son module de grille adaptative facultatif s’associe aux éléments sémantiques natifs dans un catalogue d’équipement filtrable, avec un tri et une sélection explicitement implémentés. ### Quasar Un parcours guidé natif Quasar avec les véritables valeurs de marque et d’espacement, la validation QForm, un créateur de brief en trois étapes, des choix de format par boutons radio et un ordre du jour dynamique de quarante-cinq minutes. - [Référence de mise en œuvre](https://preline.co/plugins/tabs.html) - [Source](https://preline.co/docs/themes.html) - [Source](https://preline.co/docs/typography.html) - [Source](https://preline.co/plugins/input-number.html) - [Consultez la spécification associée](https://preline.co/docs/index.html) - [Consultez la spécification associée](https://preline.co/docs/themes.html) - [Consultez la spécification associée](https://preline.co/docs/typography.html) - [Consultez la spécification associée](https://preline.co/plugins/tabs.html) - [Consultez la spécification associée](https://preline.co/plugins/input-number.html) - [Consultez la spécification associée](https://preline.co/docs/components/tabs.html) - [Consultez la spécification associée](https://preline.co/docs/preline-javascript.html) - [Référence du code](https://preline.co/docs/components/tabs.html) - [Référence du code](https://preline.co/plugins/input-number.html) - [Référence du code](https://preline.co/docs/themes.html) - [Thèmes Correspondance des rôles sémantiques et personnalisation du thème.](https://preline.co/docs/themes.html) - [Plugin d’onglets Relations entre les éléments cibles, initialisation et comportement.](https://preline.co/plugins/tabs.html) - [Champ numérique Limites, gestionnaires, méthodes et rappels de modification.](https://preline.co/plugins/input-number.html) - [Balisage des onglets Composition de la liste d’onglets et des panneaux.](https://preline.co/docs/components/tabs.html) - [Intégration de JavaScript Limites de l’initialisation et cycle de vie du framework.](https://preline.co/docs/preline-javascript.html) - [Typographie Hiérarchie typographique fondée sur les utilitaires.](https://preline.co/docs/typography.html) - [Installation Compilation Tailwind et configuration du package.](https://preline.co/docs/index.html)