Composez un tableau de suivi des livraisons fonctionnel avec les tokens Vibe 4 et les commandes React. Distinguez les couleurs d’action sémantiques des étiquettes du tableau, découvrez les pas d’espacement nommés et les raccourcis de police, ainsi que la configuration explicite de CSS nécessaire à une nouvelle application.
Interprétation indépendante HTML/CSS utilisant la palette, l’espacement et les dimensions typographiques vérifiés du thème clair Vibe ; police de repli du système. · Référence de mise en œuvre
02
Référence de conception du système de design Monday Vibe
Sources publiques de Vibe 4 et intégration de @vibe/core. Les valeurs ci-dessous correspondent aux définitions vérifiées du thème clair et des styles ; les couleurs des libellés du tableau sont distinctes des rôles sémantiques de réussite et d’erreur. L’exemple natif utilise de véritables commandes Vibe Button dans un tableau HTML géré par l’application.
Système de design Monday Vibe : développer avec les points d’entrée Vibe actuels
Les composants principaux et le jeton CSS sont importés séparément
Vibe 4 expose des composants React nommés via @vibe/core et les variables CSS via @vibe/core/tokens. Importez les deux dans toute nouvelle application cliente. Un composant peut injecter ses propres styles tout en s’appuyant sur les variables fournies par le fichier de jetons. L’exemple de tableau utilise une structure de tableau HTML native et de véritables contrôles Vibe Button, avec des données de lignes et une sélection gérées par l’application.
Évitez de mélanger différentes générations de packages
L’ancien package monday-ui-react-core appartient à Vibe 2. Vibe 3 est maintenu pour les correctifs critiques, mais ne reçoit pas de nouvelles fonctionnalités. Ce guide utilise l’interface actuelle de Vibe 4 et ses variables d’espacement numérotées. Cette intégration n’est pas un client du SDK monday.com et ne se connecte à aucun compte, espace de travail ou élément API.
Système de design Monday Vibe : les couleurs d’action et les étiquettes du tableau ont des rôles distincts
Utilisez les rôles sémantiques pour les contrôles
Les actions principales utilisent le rôle primary et la couleur correspondante au survol. La sélection utilise l’arrière-plan selected, tandis que la lecture courante utilise les rôles de texte primary et secondary. Utilisez les valeurs du thème comme un ensemble cohérent au lieu de modifier isolément l’arrière-plan du corps de page. Cette étude locale reste fidèle au thème clair vérifié.
La source comprend des couleurs catégorielles pour le tableau, en plus des couleurs sémantiques de retour d’information. Le vert Done est #00c875, tandis que la couleur positive sémantique est #00854d. Les cellules d’état de nos lignes utilisent les couleurs du tableau avec un texte contrasté et lisible ; elles conservent les libellés Working, Stuck et Done et ne s’appuient jamais uniquement sur la couleur pour indiquer l’état.
Système de design Monday Vibe : utilisez le raccourci typographique complet
Les titres et les lignes de travail ont chacun leur style
La source attribue Poppins aux titres et Figtree au corps du texte, avec des polices de remplacement adaptées au système d’écriture. Le raccourci actuel h1-medium correspond à 600 32px/40px, tandis que text2-normal correspond à 400 14px/20px. Appliquez le raccourci avec la propriété CSS font afin de conserver ensemble la graisse, la taille, la hauteur de ligne et la famille. La source contient aussi des alias de titres plus anciens ; ne les remplacez pas discrètement par une échelle différente.
Chargez les fichiers de polices de manière explicite
Vibe n’importe pas les fichiers des polices recommandées. Ajoutez à l’application le lien vers la feuille de style Figtree/Poppins documenté dans HTML ou hébergez vous-même des fichiers dont la licence le permet. L’exemple hors ligne utilise explicitement les polices de remplacement du système ; son rendu est donc une interprétation et non une reproduction exacte de la typographie de monday.com.
Système de design Monday Vibe : un tableau compact sans contrôles comprimés
Les espacements numérotés définissent le rythme
Utilisez --space-8 entre les actions adjacentes de la barre d’outils, --space-16 pour le remplissage du panneau et --space-24 entre les zones du tableau. Ce sont les noms exacts de la source actuelle. Leur utilisation ici relève de choix propres à cette application. L’échelle comprend aussi un incrément de deux pixels pour les ajustements fins, ainsi que des valeurs allant jusqu’à quatre-vingts pixels pour la composition.
Système de design Monday Vibe : un tableau modifiable avec une barre d’actions groupées
Définissez clairement la structure des données
Chaque élément de travail possède un id stable, un titre, un responsable et un état. Les en-têtes natifs des colonnes décrivent ces valeurs. Une case à cocher de ligne ajoute l’id à un Set ; la modification de l’état remplace l’objet correspondant au lieu de modifier le tableau en place. L’action Terminer la sélection lit ce même Set et ne met à jour que les lignes sélectionnées. Le récapitulatif des tâches terminées est dérivé des lignes.
Le bouton principal d’action groupée est désactivé lorsque le Set de sélection est vide.
L’action tertiaire de chaque ligne fait défiler les états locaux à titre de démonstration.
L’action de réinitialisation restaure les lignes initiales et efface la sélection.
Système de design Monday Vibe : exposez l’état avec le véritable composant Button API
Les états disabled, loading et pressed sont différents
L’exemple natif utilise disabled pour une action groupée indisponible. Il n’affiche ni chargement ni réussite, car aucune opération distante n’est effectuée. Si vous connectez un véritable système de persistance, liez loading au cycle de vie de la requête et n’indiquez la réussite qu’après confirmation. La source de Button expose également active pour l’apparence et aria-pressed pour la sémantique d’un bouton bascule ; l’un ne remplace pas l’autre.
Ne présentez pas les modifications locales comme une action effectuée par un service
Le message dynamique indique le nombre d’éléments locaux modifiés. Il ne prétend pas qu’un tableau monday.com a été mis à jour. Après rechargement, les données d’exemple initiales réapparaissent. Une intégration de production nécessiterait des autorisations explicites sur l’espace de travail, une gestion des erreurs et une synchronisation en dehors de la couche du système de design.
Système de design Monday Vibe : préservez le sens des lignes quelle que soit la largeur
Réorganisez l’exemple avec soin
Sur un écran étroit, le tableau hors ligne présente chaque ligne sous forme de carte d’élément avec libellés. Les noms de colonnes sont répétés sous forme de libellés visibles afin que la personne responsable et le statut restent compréhensibles. Il s’agit d’un choix de mise en page de l’application, et non de l’affirmation que Vibe transforme automatiquement tous les tableaux. Le modèle natif conserve un tableau sémantique dans une zone à défilement horizontal avec libellé, une solution de rechange adaptée aux données plus denses.
Le dimensionnement global en border-box est un prérequis
Appliquez box-sizing: border-box aux éléments et aux pseudo-éléments avant d’utiliser la bibliothèque. Sinon, une cellule de largeur fixe à laquelle s’ajoute du remplissage peut dépasser la taille prévue, en particulier lorsqu’un bouton est imbriqué dans une colonne dense. Gardez le conteneur externe flexible et autorisez les actions de la barre d’outils à passer à la ligne.
Monday Vibe Le système de design doit nommer séparément la sélection et le statut
Attribuez un libellé à chaque commande de ligne
La case de sélection inclut le titre de l’élément de travail dans son nom accessible. Chaque action de changement de statut inclut le nom de l’élément ainsi que son statut actuel. Un message d’état courtois indique le résultat de l’action groupée. Les personnes qui utilisent le clavier peuvent sélectionner des lignes, activer la commande groupée et réinitialiser le tableau à l’aide des commandes natives ; la page n’invente pas de comportement de navigation par les flèches propre aux feuilles de calcul.
Sélectionnez « Transmission du design » et vérifiez que l’action groupée devient disponible.
Terminez la sélection et vérifiez que le texte du statut correspond au décompte calculé.
Réinitialisez et vérifiez que les données et les cases de sélection retrouvent leur état initial.
Monday Vibe Une entrée client complète pour le système de design
Installer, importer, monter
La configuration ci-dessous constitue une entrée main.jsx pour un projet client React contenant un élément racine. Installez react, react-dom et @vibe/core@4, chargez une fois le jeton CSS et appliquez la feuille de style globale indiquée. Le package actuel utilise des exports ES modules. L’extraction des styles côté serveur est documentée comme expérimentale ; ce modèle utilise délibérément le rendu côté client.
Exemples de composants du système de design Monday Vibe
Exemple interactif autonome complet
Enregistrez le document complet sous index.html et ouvrez-le dans un navigateur. Interprétation indépendante de HTML/CSS, fondée sur les dimensions vérifiées de la palette, de l’espacement et de la typographie du thème clair de Vibe ; police de remplacement du système.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Weekly delivery — Vibe study</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f7fb;color:#323338;font:14px/20px Arial,sans-serif}button,input{font:inherit}button{cursor:pointer;border:0;border-radius:4px;padding:8px 16px;background:white;color:#323338}button:hover{background:#e7e9ef}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible{outline:3px solid #0073ea;outline-offset:2px}.shell{display:grid;grid-template-columns:180px minmax(0,1fr);min-height:600px}aside{padding:24px 16px;border-right:1px solid #d0d4e4;background:#fff}.brand{font-size:20px;font-weight:bold;margin-bottom:40px}.brand span{color:#0073ea}aside p{font-size:12px;color:#676879}aside strong{display:block;background:#cce5ff;padding:12px;border-radius:4px;color:#323338}main{padding:32px;min-width:0}h1{font-size:32px;line-height:40px;font-weight:600;margin:0 0 8px}.sub{color:#676879}.overview{margin:24px 0;display:grid;grid-template-columns:1fr 2fr;gap:24px;align-items:center}.count{font-size:32px;line-height:40px}.count small{font-size:14px;color:#676879}.bar{display:flex;border-radius:8px;overflow:hidden;height:16px;background:#e7e9ef}.bar span{transition:width .15s}.legend{display:flex;gap:16px;font-size:12px;margin-top:8px}.legend span:before{content:'●';color:var(--c);margin-right:4px}.tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.primary{background:#0073ea;color:white}.primary:hover{background:#0060b9}h2{font-size:18px;line-height:24px;color:#784bd1;font-weight:600}.board{border-left:6px solid #784bd1;border-radius:8px;background:white;overflow:hidden}.row,.head{display:grid;grid-template-columns:36px minmax(180px,1fr) 90px 130px;align-items:center;min-height:52px;border-bottom:1px solid #d0d4e4}.head{color:#676879;min-height:36px;font-size:12px}.row>*{padding:12px}.head>*{padding:8px}.row label{display:flex;align-items:center;justify-content:center}.row input{accent-color:#0073ea}.row .status{border-radius:0;height:100%;font-weight:500}.status[data-status=Working]{background:#fdab3d}.status[data-status=Stuck]{background:#df2f4a;color:white}.status[data-status=Done]{background:#00c875}.person{display:inline-flex;align-items:center;gap:8px}.avatar{width:24px;height:24px;border-radius:50%;background:#eceff8;display:inline-grid;place-items:center;font-size:11px}.row.selected{background:#f0f7ff}#message{min-height:24px;margin-top:16px;color:#676879}.mobile-label{display:none}footer{padding:16px 24px;color:#676879;font-size:11px;border-top:1px solid #d0d4e4}@media(max-width:800px){.shell{grid-template-columns:1fr}aside{display:none}main{padding:24px}}@media(max-width:560px){main{padding:16px}.overview{grid-template-columns:1fr;gap:12px}.head{display:none}.row{grid-template-columns:36px 1fr}.row .person,.row .status{grid-column:2}.row .status{margin:0 12px 12px;width:calc(100% - 24px);border-radius:4px}.mobile-label{display:inline;color:#676879;margin-right:8px}.row{padding:8px 0}.legend{flex-wrap:wrap}}</style><div class="shell"><aside><div class="brand"><span>▰</span> workroom</div><p>TEAM WORKSPACE</p><strong>Weekly delivery</strong><p>Sample project<br>No external account</p></aside><main><h1>Weekly delivery</h1><div class="sub">A shared view of the work moving this week.</div><section class="overview" aria-label="Completion summary"><div class="count"><span id="done">1</span><small> / 3 completed</small></div><div><div class="bar" aria-hidden="true"><span id="working-bar" style="background:#fdab3d"></span><span id="stuck-bar" style="background:#df2f4a"></span><span id="done-bar" style="background:#00c875"></span></div><div class="legend"><span style="--c:#fdab3d">Working</span><span style="--c:#df2f4a">Stuck</span><span style="--c:#00c875">Done</span></div></div></section><div class="tools"><button class="primary" id="complete" disabled>Complete selected</button><button id="reset">Reset board</button><span id="selection" style="padding:8px;color:#676879">0 selected</span></div><h2>▼ This week</h2><div class="board"><div class="head" aria-hidden="true"><span></span><span>Item</span><span>Owner</span><span>Status</span></div><div id="rows"></div></div><p id="message" role="status">Select items or click a status to change it locally.</p></main></div><footer>Independent Vibe 4 HTML/CSS study. Published light-theme and board-label colors; system fallback fonts. No monday.com workspace connection.</footer><script>
const initial=[{id:1,title:'Design handoff',owner:'Maya',status:'Working'},{id:2,title:'Accessibility review',owner:'Theo',status:'Stuck'},{id:3,title:'Release notes',owner:'Sam',status:'Done'}],states=['Working','Stuck','Done'];let items=structuredClone(initial),selection=new Set();const $=id=>document.getElementById(id);function totals(){$('done').textContent=items.filter(x=>x.status==='Done').length;for(const state of states)$(state.toLowerCase()+'-bar').style.width=items.filter(x=>x.status===state).length/items.length*100+'%';$('complete').disabled=!selection.size;$('selection').textContent=selection.size+' selected'}function render(){$('rows').replaceChildren();for(const item of items){const row=document.createElement('div');row.className='row'+(selection.has(item.id)?' selected':'');const label=document.createElement('label'),check=document.createElement('input');check.type='checkbox';check.checked=selection.has(item.id);check.setAttribute('aria-label','Select '+item.title);check.onchange=()=>{check.checked?selection.add(item.id):selection.delete(item.id);row.classList.toggle('selected',check.checked);totals()};label.append(check);const name=document.createElement('span');name.textContent=item.title;const person=document.createElement('span');person.className='person';const av=document.createElement('span');av.className='avatar';av.setAttribute('aria-hidden','true');av.textContent=item.owner[0];const pl=document.createElement('span');pl.className='mobile-label';pl.textContent='Owner';person.append(pl,av,document.createTextNode(item.owner));const status=document.createElement('button');status.className='status';status.dataset.status=item.status;status.textContent=item.status;status.setAttribute('aria-label',item.title+': '+item.status+'. Change status');status.onclick=()=>{item.status=states[(states.indexOf(item.status)+1)%states.length];status.dataset.status=item.status;status.textContent=item.status;status.setAttribute('aria-label',item.title+': '+item.status+'. Change status');totals();$('message').textContent=item.title+' is now '+item.status+' locally.'};row.append(label,name,person,status);$('rows').append(row)}totals()}
$('complete').onclick=()=>{let n=selection.size;items.forEach(x=>{if(selection.has(x.id))x.status='Done'});selection.clear();render();$('message').textContent=n+' local items completed.'};$('reset').onclick=()=>{items=structuredClone(initial);selection.clear();render();$('message').textContent='Board reset.'};render();
</script></html>
La barre d’outils groupée modifie le statut des tâches d’exemple. Les couleurs des libellés décrivent le flux de travail de ce tableau et ne remplacent pas les jetons d’action sémantiques de Vibe.
Entrée complète de l’implémentation native
L’implémentation complète présentée dans la configuration, réunie ici avec les explications ciblées sur API. Suivez les prérequis documentés concernant les packages et la compilation dans la section de configuration.
Entrée complète du tableau local ; ajoutez board.css à partir de l’exemple de composant. Les polices ne sont pas intégrées automatiquement. Package natif API vérifié à partir de la source officielle ; cet environnement n’a pas compilé l’exemple de package.
Feuille de style du tableau fondée sur des jetons
Utilisez l’export des jetons pour la mise en page et la typographie. La région parente permet d’utiliser le tableau sémantique sur les écrans étroits.
Une configuration de polices sous licence et hébergées localement peut remplacer cette feuille de style externe.
04
Configuration de l’agent pour le système de design Monday Vibe
Point de départ de l’implémentation
Entrée complète du tableau local ; ajoutez board.css à partir de l’exemple de composant. Les polices ne sont pas intégrées automatiquement. Package natif API vérifié à partir de la source officielle ; cet environnement n’a pas compilé l’exemple de package.
Créez le tableau de livraison Vibe 4 fourni. Importez @vibe/core/tokens, utilisez les variables d’espacement numérotées actuelles et les déclarations abrégées complètes de police, et distinguez les couleurs de feedback sémantique de celles des libellés du tableau. Implémentez la sélection locale des lignes, la modification des statuts et un décompte calculé des éléments terminés. Utilisez disabled sur le bouton groupé ; ne simulez pas d’enregistrement à distance.
05
Sources et périmètre du système de design Monday Vibe
Démonstration indépendante de référence Vibe 4 et de tableau local. Aucun compte monday.com, aucune donnée d’espace de travail ni connexion au SDK. Le modèle natif utilise de véritables commandes Button de Vibe et un balisage de tableau géré par l’application.
