# Système de design Tabler ## Aperçu de l’interface du système de design Tabler Examinez les décisions et les études de couverture, ajoutez un jalon validé et basculez le mode de couleur natif. ## Référence de conception du système de design Tabler Variables compilées de Tabler 1.6.1 CSS. Cette version utilise des primitives OKLCH et light-dark()/color-mix() pour les rôles sémantiques ; les anciens exemples Tabler basés sur des valeurs hexadécimales ne doivent pas être considérés comme le même thème. Les valeurs ci-dessous sont celles réellement définies dans la version installée. ### Couleurs par défaut des statuts et des actions | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --tblr-primary | oklch(54.6% 0.1724 254.2deg) | Rôle de l’action principale. | | --tblr-secondary | oklch(55.55% 0 0deg) | Rôle secondaire. | | --tblr-success | oklch(67.38% 0.1885 145.43deg) | Rôle de réussite. | | --tblr-info | oklch(66.26% 0.1358 246.81deg) | Rôle d’information. | | --tblr-warning | oklch(77.02% 0.1658 71.02deg) | Rôle d’avertissement. | | --tblr-danger | oklch(58.29% 0.1941 25.59deg) | Rôle de danger. | | --tblr-purple | oklch(57.83% 0.2186 319.15deg) | Couleur de catégorie du prototype dans cette application. | | --tblr-body-color | light-dark(oklch(26.86% 0 0deg), oklch(92.19% 0 0deg)) | Le texte s’adapte au thème de couleurs actif. | | --tblr-body-bg | light-dark(oklch(98.51% 0 0deg), oklch(20.46% 0 0deg)) | L’arrière-plan de la page s’adapte au thème de couleurs. | | --tblr-bg-surface | light-dark(var(--tblr-bg-surface-primary), var(--tblr-gray-800)) | Rôle d’arrière-plan des cartes et des surfaces. | ### Typographie du corps de texte et échelle des arrondis | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --tblr-font-sans-serif | system-ui, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif | Pile de polices sans empattement du système dans la version installée. | | --tblr-body-font-size | 0.875rem | Équivalent par défaut de 14 px avec une racine de navigateur de 16 px. | | --tblr-body-font-weight | 400 | Graisse normale pour le texte courant. | | --tblr-body-line-height | 1.4285714286 | Environ 20 px avec la taille de corps par défaut. | | --tblr-border-radius | 6px | Rayon par défaut de 6 px. | | --tblr-border-radius-sm | 4px | Petit rayon de 4px. | | --tblr-border-radius-lg | 8px | Grand rayon de 8 px. | | --tblr-border-radius-xl | 1rem | Très grand rayon de 1 rem. | | --tblr-border-radius-pill | 100rem | Arrondi des pastilles. | ### Espacement et géométrie native de la chronologie | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --tblr-spacer-0 | 0 | Valeur d’espacement nommée native. | | --tblr-spacer-1 | 0.25rem | Valeur d’espacement nommée native. | | --tblr-spacer-2 | 0.5rem | Valeur d’espacement nommée native. | | --tblr-spacer-3 | 1rem | Valeur d’espacement nommée native. | | --tblr-spacer-4 | 1.5rem | Valeur d’espacement nommée native. | | --tblr-spacer-5 | 2rem | Valeur d’espacement nommée native. | | --tblr-spacer-6 | 2.5rem | Valeur d’espacement nommée native. | | --tblr-page-padding | var(--tblr-spacer-3) | Variable d’espacement de la page et de la chronologie ; les règles adaptatives peuvent la modifier. | | --tblr-card-spacer-x | 1.25rem | Rembourrage horizontal par défaut du corps de la carte. | | --tblr-card-spacer-y | 1.25rem | Rembourrage vertical par défaut du corps de la carte. | | --tblr-timeline-icon-size | 2.5rem | Nœud d’icône de 40 px avec une racine par défaut de 16 px. | ### Choix d’origine du carnet | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Project layout | col-lg-8 + col-lg-4 | Grille native ; deux colonnes à partir du point de rupture lg. | | Page padding | 32px; 24px 14px below 650px | Marge intérieure propre à l’application. | | Journal title | 32px / 1.2; 27px on mobile | Surcharge d’origine du titre de page. | | Cover studies | 155px tall; 120px on mobile | Illustration décorative d’origine CSS. | ## Guide complet du système de design Tabler 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 Tabler : utiliser le thème correspondant à la version Tabler ### Utilisez le thème correspondant à la version de Tabler > Le carnet de projet est conçu avec Tabler 1.6.1. Sa palette compilée utilise des couleurs OKLCH, tandis que les variables sémantiques s’appuient sur light-dark et color-mix. La référence présente donc ces expressions réelles au lieu de reprendre les valeurs hexadécimales d’un ancien guide Bootstrap ou Tabler. L’action principale, les badges de statut et les rôles des surfaces proviennent tous de cette version installée. Tabler enrichit le vocabulaire de composants de Bootstrap avec ses propres modèles de mise en page et de présentation de l’information. Cet exemple associe la chronologie, l’en-tête de page, datagrid et les classes d’avatar natifs à des cartes, formulaires et une fenêtre modale familiers. Ces détails en font une composition Tabler, plutôt qu’une grille de cartes générique ornée d’un autre logo. Consultez la spécification associée ## Système de design Tabler : le mode de couleur modifie aussi les surfaces, pas seulement le texte ### Le mode de couleur modifie aussi les surfaces, pas seulement le texte Le contrôle de thème modifie data-bs-theme sur l’élément html et met à jour son propre état activé ainsi que le libellé de l’action. Les expressions sémantiques de Tabler sélectionnent alors les valeurs claires ou sombres. Ce simple exemple à deux états n’a pas besoin d’un gestionnaire de thème JavaScript distinct, et aucune préférence n’est conservée en dehors de la page. Décision, Prototype et Revue utilisent les classes natives de teinte bleue, violette et verte. Leurs libellés conservent leur sens sans dépendre uniquement de la couleur. Les illustrations des études de couverture gardent leur palette d’origine, évoquant le papier, dans les deux modes ; les cartes environnantes, la page et le texte utilisent le thème réel des composants. Consultez la spécification associée ## Système de design Tabler : typographie compacte pour le corps et hiérarchie distincte pour la page ### Un corps de texte compact avec une hiérarchie de page distincte La taille par défaut du corps de texte est de 0.875rem, avec une hauteur de ligne proche de 1.4286, soit environ quatorze pixels avec une racine de seize pixels. La pile de polices installée utilise les polices sans empattement du système ; cet aperçu ne nécessite donc aucune police distante. Les titres de carte et les métadonnées conservent leurs classes natives, tandis que le titre de page adopte une taille d’origine de trente-deux pixels. Les valeurs d’espacement natives progressent de 0 à 0.25, 0.5, 1, 1.5, 2 et 2.5 rem. Ce sont des variables nommées du CSS installé, et non une échelle supposée. Le rembourrage par défaut du corps de la carte est de 1.25 rem dans les deux directions. Le nœud de la chronologie mesure 2.5 rem et son connecteur utilise la variable de rembourrage de la page pour relier les entrées. Consultez la spécification associée ## Système de design Tabler : une chronologie ne se résume pas à une bordure verticale ### Une frise chronologique ne se résume pas à une bordure verticale Chaque jalon est un élément de liste timeline-event, qui contient timeline-event-icon et timeline-event-card. Le CSS natif positionne le nœud, trace le connecteur entre les entrées qui ne sont pas finales et décale la carte de contenu de la largeur du nœud plus le rembourrage de la page. Cet exemple ne simule pas la ligne avec une image d’arrière-plan et ne s’appuie pas sur des positions absolues pour chaque carte. Le contenu varie d’une carte à l’autre. L’une consigne une décision structurelle, une autre présente trois véritables études de couverture et la dernière consigne une revue de référence. Le contexte du projet se trouve en dehors de la séquence, car le format et le sujet actuel sont des attributs permanents plutôt que des événements datés. Sur les petits écrans, la barre latérale suit la chronologie dans l’ordre du document. Consultez la spécification associée ## Système de design Tabler : utiliser Datagrid pour les petits groupes de libellés et de valeurs ### Utiliser Datagrid pour les petits groupes de libellés et de valeurs La carte Contexte du projet utilise des paires datagrid-item, datagrid-title et datagrid-content. Le format, l’équipe, les jalons et le sujet actuel sont des attributs présentés en parallèle ; ils sont donc affichés dans une datagrid native compacte plutôt que dans un tableau aux en-têtes de ligne redondants. Les avatars utilisent les initiales sous forme de texte et ne nécessitent aucune image distante. Le nombre de jalons est la seule valeur de contexte modifiée par cet exemple. L’ajout d’une entrée locale fait passer ce nombre de trois à quatre, sans modifier la description d’origine du projet. Cela évite d’inventer des indicateurs de tableau de bord : le nombre correspond directement aux entrées visibles de la liste. Consultez la spécification associée ## Système de design Tabler : la fenêtre modale intégrée gère sa visibilité et le focus ### La fenêtre modale intégrée gère sa visibilité et le focus Le bouton Ajouter un jalon ouvre la fenêtre modale native via data-bs-toggle et data-bs-target. Le JavaScript Tabler intégré fournit l’implémentation de la fenêtre modale. Un écouteur shown.bs.modal place le focus sur le champ du titre après la transition, lorsque le champ est réellement visible. Les boutons Fermer et Annuler utilisent data-bs-dismiss afin de suivre le même cycle de vie du composant. La fenêtre modale contient un véritable formulaire. Les contraintes de champ obligatoire et de longueur rejettent les champs incomplets avant l’exécution du gestionnaire de soumission. Celui-ci vérifie également la longueur après suppression des espaces superflus, car une chaîne composée d’espaces ne constitue ni un titre ni un motif valable. La validation conserve le texte saisi pour permettre sa correction ; le formulaire n’est réinitialisé qu’après l’ajout réussi d’une entrée. 1. Ouvrez la fenêtre modale et envoyez le formulaire sans remplir les champs pour repérer le premier contrôle invalide. 2. Saisissez un titre, choisissez un type de jalon et expliquez sa raison d’être. 3. Envoyez le formulaire et vérifiez que la nouvelle entrée et le nombre de jalons se mettent à jour ensemble. Consultez la spécification associée ## Système de design Tabler : insérer du texte sans risque et signaler la limite locale ### Ajouter du texte sûr et signaler la limite locale L’application crée une structure de carte prédéfinie et insère le titre et la raison à l’aide de textContent. Seule une correspondance fixe entre les trois types de la liste déroulante détermine la classe de teinte. Le texte fourni par l’utilisateur n’est jamais interpolé dans la carte HTML. Le nouvel élément est placé en tête de liste et clairement marqué comme ENTRÉE LOCALE, plutôt que de lui attribuer un horodatage serveur fictif. Après l’insertion, l’instance de fenêtre modale existante se ferme et une notification indique le nouveau jalon. Elle précise explicitement qu’aucun service de projet n’a été mis à jour. Un véritable journal collaboratif nécessiterait une persistance, une identité d’auteur et des garanties d’ordre ; un ajout local au DOM n’offre pas ces fonctionnalités. Consultez la spécification associée ## Système de design Tabler : rendre lisible un contenu dense dans un calendrier serré ### Garder le contenu dense lisible sur une chronologie étroite La grille principale utilise col-lg-8 et col-lg-4. Sous le point de rupture natif pour les grands écrans, le contexte du projet passe sous le journal. La feuille de style d’origine pour les petits écrans réduit l’espacement latéral de la chronologie, autorise le retour à la ligne des groupes titre/badge et redimensionne les études de couverture, tout en conservant le même texte et les mêmes actions. Une chronologie peut vite manquer de place lorsque la colonne d’icônes, le remplissage des cartes et un long titre se disputent la largeur disponible. L’exemple mobile conserve le nœud comme repère stable, mais le décale de façon compacte. Les études de couverture d’origine restent présentées en trois petites comparaisons, car leur relation est importante ; leurs légendes complètent le paragraphe explicatif adjacent. - Veillez à ce que le titre et le type de jalon restent lisibles lorsqu’ils passent à la ligne. - Conservez le texte expliquant la raison au lieu de tronquer chaque élément de la chronologie. - Sur mobile, placez la carte de contexte après le contenu principal. Consultez la spécification associée ## Système de design Tabler : charger une paire assortie de CSS et JavaScript ### Charger une paire CSS et JavaScript assortie La configuration utilise @tabler/core 1.6.1 et copie ses ressources dist dans un répertoire public local. Chargez tabler.min.css avant la feuille de style de l’application, puis tabler.min.js avant le code d’interaction local. L’ajout d’un second bundle Bootstrap sans lien pourrait initialiser deux fois les mêmes attributs de données ; cet exemple utilise uniquement le bundle Tabler assorti. La feuille de style actuelle utilise des fonctions de couleur modernes. Consultez les recommandations de Tabler concernant la prise en charge des navigateurs avant de l’adopter dans un produit devant fonctionner avec des navigateurs plus anciens. L’exemple local a été vérifié dans Chromium pour la validation native de la fenêtre modale, l’ajout d’éléments à la chronologie, le mode sombre et une mise en page de 390px ; il ne s’agit ni d’un déploiement en production ni d’une garantie de fonctionnement dans tous les navigateurs possibles. Consultez la spécification associée ## Tabler Exemples de composants du système de design ### Chronologie, carte de contexte et fenêtre modale de saisie Anatomie native d’un événement de chronologie, d’une carte, d’une grille de données, d’un badge et d’une fenêtre modale. ```
TABLER · PROJECT JOURNAL

Atlas field notes

Decisions, prototypes and review checkpoints for a small editorial project.

  • A clearer route through the issue

    Decision
    Alex Morgan · 02 OCT

    Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.

  • Three cover directions

    Prototype
    Jules Chen · 01 OCT
    ATLASRIDGE / 01
    ATLASRIVER / 02
    ATLASPLAIN / 03

    Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.

  • Reference package reviewed

    Review
    Sam Rivera · 30 SEP

    Image captions, credit lines and print dimensions are recorded alongside each selected reference.

``` Référence du code - La chronologie est une véritable liste dont l’ordre de lecture est préservé. - Le contexte du projet utilise des paires titre/contenu de grille de données. - Le déclencheur de la fenêtre modale utilise les données compatibles avec Bootstrap intégrées à API. ### Ajout local de jalon validé Cycle de vie de la fenêtre modale, insertion sécurisée du texte, synchronisation du nombre et mode de couleur. ``` const q=s=>document.querySelector(s),modalEl=q('#entry-modal');let count=3; modalEl.addEventListener('shown.bs.modal',()=>q('#entry-name').focus()); q('#theme').onclick=e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.setAttribute('aria-pressed',String(dark));e.currentTarget.textContent=dark?'Light mode':'Dark mode';}; q('#entry-form').onsubmit=e=>{e.preventDefault();const title=q('#entry-name'),detail=q('#entry-detail'),kind=q('#entry-type').value;if(title.value.trim().length<5){title.setCustomValidity('Use at least five non-space characters.');title.reportValidity();return;}if(detail.value.trim().length<15){detail.setCustomValidity('Use at least fifteen non-space characters.');detail.reportValidity();return;}const li=document.createElement('li');li.className='timeline-event';const color={Decision:'blue',Prototype:'purple',Review:'green'}[kind];li.innerHTML=`

You · LOCAL ENTRY

`;li.querySelector('h2').textContent=title.value.trim();li.querySelector('.badge').textContent=kind;li.querySelector('p').textContent=detail.value.trim();q('#timeline').prepend(li);q('#count').textContent=`${++count} recorded`;tabler.Modal.getInstance(modalEl).hide();q('#notice').hidden=false;q('#notice').textContent=`Local ${kind.toLowerCase()} added: ${title.value.trim()}. No project service was updated.`;e.target.reset();};['#entry-name','#entry-detail'].forEach(s=>q(s).oninput=e=>e.target.setCustomValidity('')); ``` Référence du code - Les chaînes saisies par l’utilisateur sont affectées avec textContent. - La fenêtre modale n’est réinitialisée qu’après l’ajout d’une entrée valide. - La notification précise qu’aucun service de projet n’a été mis à jour. ### Mise en page d’origine du journal et études de couverture Ajustements adaptatifs autour des composants natifs Tabler. ``` html,body{min-height:0;height:auto}body{margin:0}.project-log{max-width:1160px;padding:32px;margin:auto}.project-log .page-header{margin:0 0 24px}.project-log .page-title{font-size:32px;line-height:1.2}.cover-strip{display:flex;gap:12px}.cover-strip>div{flex:1;min-width:0;height:155px;padding:14px;background:#d6dfd2;color:#334834;position:relative;overflow:hidden;border-radius:4px}.cover-strip>div:nth-child(2){background:#cbdbe3;color:#2d4857}.cover-strip>div:nth-child(3){background:#e9d9bc;color:#6a5439}.cover-strip b{letter-spacing:.15em;font-size:14px}.cover-strip i{position:absolute;width:120px;height:90px;border-radius:50%;background:currentColor;opacity:.2;left:20%;top:38%;transform:rotate(-25deg)}.cover-strip>div:nth-child(2) i{width:40px;height:150px;top:30%;left:50%;border-radius:40%}.cover-strip>div:nth-child(3) i{width:160px;height:60px;top:45%;left:10%;border-radius:0;transform:rotate(-12deg)}.cover-strip small{position:absolute;bottom:12px;left:14px;font-size:9px;letter-spacing:.12em}[hidden]{display:none!important}.timeline-event-card .badge{height:fit-content;white-space:nowrap}.timeline-event-card p{line-height:1.65}.timeline-event-icon{font-size:11px;font-weight:700}@media(max-width:650px){.project-log{padding:24px 14px}.project-log .page-title{font-size:27px}.page-header .col-auto{width:100%;margin-top:16px}.cover-strip{gap:6px}.cover-strip>div{height:120px;padding:8px}.cover-strip b{font-size:10px}.cover-strip small{left:8px;font-size:7px}.timeline-event-card .d-flex{flex-wrap:wrap}.timeline-event-card{margin-inline-start:calc(var(--tblr-timeline-icon-size) + 12px)}} ``` Référence du code - Les illustrations de couverture représentent trois études de design fictives. - Le document utilise une hauteur ajustée au contenu pour l’intégration. ## Tabler Configuration de l’agent du système de design ### Point de départ de l’implémentation Tabler 1.6.1 vérifié. Enregistrez les modules de mise en page et d’application fournis sous les noms style.css et app.js. Utilise les attributs de données natifs de la fenêtre modale API. L’enveloppe HTML comprend l’intégralité du balisage du body ; enregistrez les exemples d’interaction et de CSS fournis sous les noms de fichiers indiqués ici. ```
TABLER · PROJECT JOURNAL

Atlas field notes

Decisions, prototypes and review checkpoints for a small editorial project.

  • A clearer route through the issue

    Decision
    Alex Morgan · 02 OCT

    Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.

  • Three cover directions

    Prototype
    Jules Chen · 01 OCT
    ATLASRIDGE / 01
    ATLASRIVER / 02
    ATLASPLAIN / 03

    Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.

  • Reference package reviewed

    Review
    Sam Rivera · 30 SEP

    Image captions, credit lines and print dimensions are recorded alongside each selected reference.

``` ### Un prompt pour votre projet ``` Utilisez Tabler 1.6.1 pour reproduire le journal de projet Atlas avec sa chronologie, ses cartes de contexte, sa grille de données et sa fenêtre modale native. Gardez le formulaire de jalon validé séparé de la chronologie enregistrée : l’annulation ne modifie pas le journal, tandis qu’un envoi valide ajoute le jalon saisi aux enregistrements locaux. Conservez les attributs data-bs, le bundle Tabler correspondant et le traitement des thèmes. Gardez les études de couverture d’origine à titre décoratif et veillez à ce que le texte des jalons reste lisible sur les écrans étroits. Ne laissez pas entendre qu’il existe un inventaire d’infrastructure ou une publication externe. ``` ## Tabler Sources et périmètre du système de design Tabler 1.6.1. Les variables de thème réelles et les composants natifs sont distingués du contenu original du projet et des illustrations de couverture. Les nouveaux jalons restent locaux. - Installation Ressources du package assorti. - Couleurs Référence des rôles du thème. - Typographie Styles typographiques natifs. - Chronologie Anatomie du nœud, du connecteur et de la carte d’événement. - Grille de données Attributs du projet sous forme compacte. - Fenêtre modale Configuration native de la fenêtre modale. - Modes de couleur Commande du thème clair et sombre. ## Tabler Ressources associées au système de design ### Tamagui Explorez les véritables catégories de tokens v5 de Tamagui et ses thèmes bleus clair et sombre dans un tableau de suivi complet composé de composants natifs, avec validation, progression et récupération depuis un état vide. ### UIkit UIkit associe un framework CSS, une personnalisation Less et des composants JavaScript pilotés par attributs. Son Switcher, son Accordion et sa grille adaptative fonctionnent de concert dans le planificateur d’atelier ci-dessous, pour illustrer la limite entre le comportement natif des composants et l’état de sélection de l’application. ### Vant Un parcours mobile de sélection d’adresse conçu avec Vant 4 : de vraies variables CSS, une identité d’adresse contrôlée, la validation des champs, le changement de thème et un enregistrement explicitement limité au stockage local. - [Référence de mise en œuvre](https://docs.tabler.io/ui/components/timeline) - [Source](https://docs.tabler.io/ui/base/colors) - [Source](https://docs.tabler.io/ui/base/typography) - [Source](https://docs.tabler.io/ui/components/timeline) - [Source](https://docs.tabler.io/ui/components/card) - [Consultez la spécification associée](https://docs.tabler.io/ui/getting-started/upgrade-to-1.6) - [Consultez la spécification associée](https://docs.tabler.io/ui/getting-started/color-modes) - [Consultez la spécification associée](https://docs.tabler.io/ui/base/typography) - [Consultez la spécification associée](https://docs.tabler.io/ui/components/timeline) - [Consultez la spécification associée](https://docs.tabler.io/ui/components/data-grid) - [Consultez la spécification associée](https://docs.tabler.io/ui/components/modal) - [Consultez la spécification associée](https://docs.tabler.io/ui/layout/page-layouts) - [Consultez la spécification associée](https://docs.tabler.io/ui/getting-started/installation) - [Référence du code](https://docs.tabler.io/ui/components/timeline) - [Référence du code](https://docs.tabler.io/ui/components/modal) - [Référence du code](https://docs.tabler.io/ui/layout/page-layouts) - [Installation Ressources du package assorti.](https://docs.tabler.io/ui/getting-started/installation) - [Couleurs Référence des rôles du thème.](https://docs.tabler.io/ui/base/colors) - [Typographie Styles typographiques natifs.](https://docs.tabler.io/ui/base/typography) - [Chronologie Anatomie du nœud, du connecteur et de la carte d’événement.](https://docs.tabler.io/ui/components/timeline) - [Grille de données Attributs du projet sous forme compacte.](https://docs.tabler.io/ui/components/data-grid) - [Fenêtre modale Configuration native de la fenêtre modale.](https://docs.tabler.io/ui/components/modal) - [Modes de couleur Commande du thème clair et sombre.](https://docs.tabler.io/ui/getting-started/color-modes)