Système de composants d’entreprise · Nouvelle ressource
Système de design CoreUI.
Une file de révision CoreUI reposant sur les véritables variables de thème 5.9, des onglets natifs, la sélection par lots avec cases à cocher et une notification persistante permettant d’annuler la dernière opération d’archivage locale.
CoreUI natif pour Bootstrap 5.9.0 CSS et onglets/notifications JavaScript intégrés. · Référence de mise en œuvre
02
Référence de conception du système de design CoreUI
Valeurs par défaut du thème clair de CoreUI pour Bootstrap 5.9.0, tirées de la feuille de style compilée installée. Ces noms --cui-* correspondent à de véritables variables d’exécution. L’application d’exemple utilise des composants gratuits ; elle ne suppose pas l’utilisation de composants CoreUI PRO.
Système de design CoreUI : choisissez le runtime CoreUI que vous utilisez réellement
Choisissez le runtime CoreUI que vous utilisez réellement
Cet exemple utilise CoreUI pour Bootstrap 5.9.0, le package CSS et celui destiné au navigateur JavaScript. CoreUI propose également des packages spécifiques à certains frameworks, mais leurs imports de composants ne sont pas interchangeables avec les attributs de données de cet exemple. La configuration fournit une feuille de style adaptée et un script intégré, sans supposer l’utilisation de React ou d’un fournisseur Vue.
L’espace de gestion utilise des cartes, tableaux, formulaires, onglets et notifications gratuits. Il ne remplace pas discrètement ces éléments par une grille de données PRO ou un sélecteur avancé payant. Cette limite permet de reproduire l’exemple complet avec le package nommé, sans devoir acheter un modèle dont l’existence n’est pas documentée.
Système de design CoreUI : utilisez la véritable couleur primaire violette et les rôles d’état associés
Utilisez la véritable couleur primaire violette et les rôles d’état associés
La couleur primaire claire de CoreUI est #5856d6, avec un contraste blanc. La carte de principe du récapitulatif associe primary-bg-subtle, primary-border-subtle et primary-text-emphasis. Ces noms désignent un traitement coordonné des surfaces ; le texte d’accompagnement n’est donc pas placé sur un arrière-plan teinté avec une couleur de premier plan choisie arbitrairement.
Les badges High et Medium associent eux aussi des surfaces discrètes de danger ou d’avertissement à leur texte de mise en évidence. Les libellés textuels indiquent la classification indépendamment de la couleur. Il s’agit d’exemples de priorités pour une revue de design, et non d’une affirmation selon laquelle chaque badge rouge d’un produit doit désigner le même état métier.
Système de design CoreUI : distinguer le corps de texte par défaut d’un tableau de travail dense
Distinguez la typographie du corps par défaut de celle d’un tableau dense
Le corps de texte compilé de CoreUI utilise par défaut une taille d’un rem et une hauteur de ligne de 1.5. L’exemple utilise volontairement un texte de quatorze pixels dans le tableau et des libellés de colonnes de douze pixels afin de faciliter la lecture d’une file de revue dense. Le titre de la page et les valeurs du résumé ont leurs propres tailles, plus grandes. Le guide ne présente pas à tort ces adaptations de l’application comme des valeurs par défaut de toute la bibliothèque.
Les trois cartes contextuelles utilisent la grille responsive native et la gouttière g-3. Boîte de réception et Archives restent côte à côte sur les petits écrans, tandis que la troisième carte explicative occupe une ligne entière. Chaque nombre est calculé à partir des cinq exemples d’enregistrements visibles : il n’y a ni indicateurs de tableau de bord sans rapport avec le sujet ni graphiques de croissance inventés.
Système de design CoreUI : des attributs de données pilotent de véritables panneaux d’onglet
Les attributs de données CoreUI contrôlent de véritables panneaux d’onglets
Boîte de réception et Archives sont des onglets basés sur des boutons, avec data-coreui-toggle="tab" et des cibles correspondant aux panneaux d’onglet. Le balisage comprend les relations tablist, tab, tabpanel, aria-controls et aria-labelledby. Le composant CoreUI JavaScript met à jour l’état actif et la visibilité, au lieu de se contenter de modifier un soulignement via un gestionnaire de l’application.
La classe nav-underline-border définit le traitement visuel de ce composant. Changer d’onglet n’archive pas les enregistrements et n’efface aucune sélection. L’onglet détermine la partie de la file locale affichée, tandis que les Sets selected et archived de l’application conservent un état distinct.
Système de design CoreUI : la sélection de tous les éléments comporte un état mixte pertinent
La sélection de tous les éléments prévoit un état mixte pertinent
Chaque note possède un identifiant stable de la série R. Cocher une ligne ajoute cet identifiant à un Set selected. La case à cocher de l’en-tête est cochée uniquement lorsque tous les enregistrements actuels de la boîte de réception sont sélectionnés ; elle est à l’état indéterminé lorsqu’une partie seulement l’est, et désactivée si la boîte de réception est vide. Ces états sont recalculés à chaque affichage de la file.
Le bouton de traitement groupé est désactivé lorsqu’aucun élément n’est sélectionné, et le texte adjacent indique le nombre actuel. La sélection est effacée après l’archivage afin qu’un enregistrement déjà archivé ne puisse pas être inclus par inadvertance dans le traitement groupé suivant. La note d’origine et son propriétaire restent associés à l’enregistrement au lieu d’être remplacés par un libellé générique « Résolu ».
Sélectionnez deux notes et vérifiez l’état mixte de la case à cocher de l’en-tête.
Archivez la sélection et vérifiez que le nombre d’éléments dans la boîte de réception diminue de deux.
Ouvrez Archives pour consulter les demandes d’origine et leurs propriétaires.
Système de design CoreUI : une notification toast présente une opération réversible précise
Une notification présente une opération réversible précise
L’application enregistre les identifiants exacts du dernier lot archivé, puis appelle la méthode show de l’instance native de Toast. autohide est défini sur false, car la notification contient une action Annuler ; cet exemple ne supprime pas cette possibilité après un délai arbitrairement court. La notification peut toujours être fermée explicitement.
L’annulation retire uniquement ces identifiants enregistrés du Set archived, efface l’instantané du dernier lot et désactive son action. Un lot archivé précédemment reste archivé si un lot ultérieur est annulé. Cette opération est volontairement limitée à un seul niveau et ne prétend pas offrir un historique complet des annulations.
Système de design CoreUI : conserver la lisibilité de la demande après son archivage
Gardez la demande lisible après son archivage
Le tableau de la boîte de réception affiche le titre de la note, la modification demandée, la zone concernée, la priorité et le propriétaire. La vue Archives affiche une liste compacte qui conserve le titre, l’identifiant, le propriétaire et la demande complète. Elle réduit les éléments d’habillage du tableau après résolution sans supprimer les informations nécessaires pour comprendre ce qui a été modifié.
Sur mobile, le tableau conserve une largeur minimale de 740px dans table-responsive. La région nommée peut recevoir le focus au clavier et dispose d’un indicateur de focus visible ; le défilement horizontal reste limité au tableau au lieu d’élargir le document. Supprimer des colonnes importantes pour éviter une barre de défilement nuirait à cette tâche de revue.
Système de design CoreUI : afficher un résultat persistant sans inventer de backend
Utilisez un résultat persistant sans inventer de serveur
La notification toast a un rôle status poli et une annonce atomique. Un second message d’état en ligne décrit le résultat local de l’archivage ou de l’annulation. Aucun des deux n’affirme qu’un problème externe a été fermé : la page précise qu’aucun outil de suivi des problèmes n’est connecté. L’aperçu ne modifie que ses Sets en mémoire ; le rechargement rétablit donc les cinq notes d’origine.
Les titres et descriptions des enregistrements sont insérés avec textContent, y compris dans la liste d’archives. Des associations fixes de classes représentent les deux priorités connues. Les textes semblables à ceux fournis par un utilisateur restent ainsi séparés de la structure HTML, et le flux de données de l’exemple peut être examiné.
Indiquez la taille réelle du lot et la portée locale de l’opération.
Laissez le bouton d’annulation disponible tant que son instantané reste valide.
Ne présentez pas une mise à jour locale du DOM comme une résolution distante réussie.
Système de design CoreUI : charger le bundle CoreUI avant le module local
Chargez le bundle CoreUI avant le module local
La configuration complète copie les ressources dist du package vers un chemin public local et charge coreui.bundle.min.js avant app.js. Le bundle expose coreui.Toast et fournit le comportement des onglets pour les attributs data-coreui. Il n’est pas nécessaire d’ajouter un second runtime Bootstrap à cette composition, ce qui pourrait créer une répartition ambiguë des responsabilités.
Le thème clair est explicitement défini avec data-coreui-theme="light". Une application plus vaste peut adopter le mécanisme de gestion des modes de couleur de CoreUI, mais doit examiner ensemble les paires de couleurs sémantiques du texte et des surfaces. La vérification locale a couvert la sélection partielle, un lot de deux enregistrements, la consultation de l’onglet Archives, la restauration après annulation et une fenêtre d’affichage de 390px.
Avec ce bundle, utilisez les attributs data-coreui-*, et non des data-bs-* copiés depuis une autre bibliothèque.
Le tableau se trouve dans une zone nommée de défilement horizontal local.
Les couleurs des priorités sont associées aux libellés explicites High/Élevée et Medium/Moyenne.
Sélection groupée et annulation du dernier lot
Les identifiants stables des enregistrements alimentent les Sets selected et archived, tandis que Toast gère nativement l’affichage de la notification.
javascript
const records=[{id:'R-201',title:'Explain the empty search result',detail:'Offer a way to clear the filter without losing the query.',area:'Search',priority:'High',owner:'Maya'},{id:'R-202',title:'Label the compact navigation icons',detail:'The collapsed sidebar needs understandable accessible names.',area:'Navigation',priority:'High',owner:'Jules'},{id:'R-203',title:'Keep form errors beside their fields',detail:'Retain entered values after a failed submission.',area:'Forms',priority:'High',owner:'Alex'},{id:'R-204',title:'Align the table’s numeric column',detail:'Right-align quantities so differences can be scanned.',area:'Tables',priority:'Medium',owner:'Sam'},{id:'R-205',title:'Clarify the download format',detail:'Show the file type before the visitor starts the download.',area:'Content',priority:'Medium',owner:'Maya'}];const archived=new Set(),selected=new Set();let lastBatch=[];const q=s=>document.querySelector(s),toast=coreui.Toast.getOrCreateInstance(q('#undo-toast'),{autohide:false});
function render(){const inbox=records.filter(r=>!archived.has(r.id));q('#inbox-rows').replaceChildren();q('#archive-list').replaceChildren();records.forEach(r=>{if(archived.has(r.id)){let li=document.createElement('li');li.className='list-group-item px-0';let title=document.createElement('strong'),detail=document.createElement('p');title.textContent=`${r.id} · ${r.title}`;detail.className='small text-body-secondary mb-0 mt-1';detail.textContent=`${r.owner} · ${r.detail}`;li.append(title,detail);q('#archive-list').append(li);return;}let tr=document.createElement('tr');tr.innerHTML='<td><input class="form-check-input" type="checkbox"></td><td><strong></strong><p class="small text-body-secondary mb-0 mt-1"></p></td><td></td><td><span class="badge"></span></td><td></td>';let cells=tr.children,check=tr.querySelector('input');check.setAttribute('aria-label',`Select ${r.id}: ${r.title}`);check.checked=selected.has(r.id);check.onchange=()=>{check.checked?selected.add(r.id):selected.delete(r.id);sync();};cells[1].querySelector('strong').textContent=r.title;cells[1].querySelector('p').textContent=r.detail;cells[2].textContent=r.area;let badge=tr.querySelector('.badge');badge.classList.add(r.priority==='High'?'bg-danger-subtle':'bg-warning-subtle',r.priority==='High'?'text-danger-emphasis':'text-warning-emphasis');badge.textContent=r.priority;cells[4].textContent=r.owner;q('#inbox-rows').append(tr);});q('#inbox-count').textContent=inbox.length;q('#archive-count').textContent=archived.size;q('#inbox-empty').hidden=inbox.length!==0;q('#archive-empty').hidden=archived.size!==0;sync();}
function sync(){let total=records.length-archived.size;q('#selection').textContent=selected.size?`${selected.size} ${selected.size===1?'note':'notes'} selected`:'No notes selected';q('#archive').disabled=!selected.size;q('#select-all').disabled=!total;q('#select-all').checked=total>0&&selected.size===total;q('#select-all').indeterminate=selected.size>0&&selected.size<total;}
q('#select-all').onchange=e=>{selected.clear();if(e.target.checked)records.filter(r=>!archived.has(r.id)).forEach(r=>selected.add(r.id));render();};q('#archive').onclick=()=>{lastBatch=[...selected];lastBatch.forEach(id=>archived.add(id));selected.clear();render();q('#toast-copy').textContent=`${lastBatch.length} ${lastBatch.length===1?'note was':'notes were'} archived locally. You can undo this most recent batch.`;q('#undo').disabled=false;toast.show();q('#result').textContent='The archive is local. No external issue tracker was changed.';};q('#undo').onclick=()=>{let count=lastBatch.length;lastBatch.forEach(id=>archived.delete(id));lastBatch=[];q('#undo').disabled=true;render();toast.hide();q('#result').textContent=`Restored ${count} ${count===1?'note':'notes'} to the inbox.`;};render();
La largeur de tableau de 740px est un choix de lisibilité propre à l’application, et non une valeur par défaut de CoreUI.
04
Configuration de l’agent de système de design CoreUI
Point de départ de l’implémentation
CoreUI vérifié pour Bootstrap 5.9.0. Le fichier app.js fourni attend le balisage complet de la file d’attente et n’expose aucune opération réseau. Le conteneur HTML inclut tout le balisage du corps de la page ; enregistrez les exemples d’interaction et de CSS fournis sous les noms de fichier indiqués ici.
html
<!-- npm install @coreui/[email protected] -->
<!-- Copy node_modules/@coreui/coreui/dist to public/vendor/coreui. -->
<html lang="en" data-coreui-theme="light">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/vendor/coreui/css/coreui.min.css">
<link rel="stylesheet" href="style.css">
<main class="review-desk"><header class="desk-heading"><div><p class="eyebrow">COREUI · REVIEW OPERATIONS</p><h1>Keep the review queue moving.</h1><p class="text-body-secondary">Archive resolved design notes and undo the last local batch.</p></div><span class="badge text-bg-primary">LOCAL WORKSPACE</span></header><div class="row g-3 mb-4"><div class="col-6 col-md-4"><div class="card metric"><div class="card-body"><div class="text-body-secondary small">Inbox</div><strong id="inbox-count">5</strong><span>design notes</span></div></div></div><div class="col-6 col-md-4"><div class="card metric"><div class="card-body"><div class="text-body-secondary small">Archived</div><strong id="archive-count">0</strong><span>local resolutions</span></div></div></div><div class="col-12 col-md-4"><div class="card metric context-card"><div class="card-body"><div class="text-body-secondary small">Review principle</div><p class="mt-2 mb-0">Keep the original request visible, even after the note is resolved.</p></div></div></div></div><section class="card"><div class="card-header bg-body"><ul class="nav nav-underline-border" role="tablist"><li class="nav-item" role="presentation"><button id="inbox-tab" class="nav-link active" data-coreui-toggle="tab" data-coreui-target="#inbox-panel" type="button" role="tab" aria-controls="inbox-panel" aria-selected="true">Inbox</button></li><li class="nav-item" role="presentation"><button id="archive-tab" class="nav-link" data-coreui-toggle="tab" data-coreui-target="#archive-panel" type="button" role="tab" aria-controls="archive-panel" aria-selected="false">Archive</button></li></ul></div><div class="tab-content"><div id="inbox-panel" class="tab-pane fade show active" role="tabpanel" aria-labelledby="inbox-tab" tabindex="0"><div class="batch-bar"><span id="selection" class="small text-body-secondary">No notes selected</span><button id="archive" class="btn btn-primary btn-sm" disabled>Archive selected</button></div><div class="table-responsive" tabindex="0" role="region" aria-label="Design review inbox"><table class="table table-hover align-middle mb-0"><thead><tr><th scope="col"><input id="select-all" class="form-check-input" type="checkbox" aria-label="Select all inbox notes"></th><th scope="col">Design note</th><th scope="col">Area</th><th scope="col">Priority</th><th scope="col">Owner</th></tr></thead><tbody id="inbox-rows"></tbody></table></div><p id="inbox-empty" class="empty-copy" hidden>All sample notes are archived. Open Archive to inspect them.</p></div><div id="archive-panel" class="tab-pane fade" role="tabpanel" aria-labelledby="archive-tab" tabindex="0"><div class="p-4"><h2 class="h5">Resolved in this local session</h2><p class="text-body-secondary small">The original note and owner stay attached to the record.</p><ul id="archive-list" class="list-group list-group-flush"></ul><p id="archive-empty" class="mb-0 text-body-secondary">No notes archived yet.</p></div></div></div></section><section class="decision-key"><span class="badge bg-danger-subtle text-danger-emphasis">High</span><p>Blocks a clear next action or access to important information.</p><span class="badge bg-warning-subtle text-warning-emphasis">Medium</span><p>Creates avoidable friction while the flow remains usable.</p></section><div class="toast-container position-static mt-4"><div id="undo-toast" class="toast w-100" role="status" aria-live="polite" aria-atomic="true"><div class="toast-header"><strong class="me-auto">Local archive updated</strong><button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Dismiss notice"></button></div><div class="toast-body"><p id="toast-copy" class="mb-3"></p><button id="undo" class="btn btn-outline-primary btn-sm">Undo last batch</button></div></div></div><p id="result" class="small text-body-secondary mt-3" role="status">No external issue tracker is connected.</p></main>
<script src="/vendor/coreui/js/coreui.bundle.min.js"></script>
<script src="app.js"></script>
</html>
Un prompt pour votre projet
Prompt pour l’agent IA
Partez du bureau des opérations de revue de conception de CoreUI 5.9.0. Conservez les onglets natifs et la notification d’annulation à l’aide des attributs data-coreui, les cinq éléments à examiner et l’ensemble des identifiants sélectionnés, avec un état mixte de sélection groupée calculé à partir de ces données. Archivez le lot sélectionné, affichez-le dans l’onglet des archives et permettez l’annulation du dernier lot. Contenez le défilement horizontal du tableau et distinguez la sélection de l’appartenance aux archives. Utilisez le bundle CoreUI correspondant ; ne remplacez pas les noms d’attributs Bootstrap et ne prétendez pas que l’archivage est effectué côté serveur.
05
Sources et périmètre du système de design CoreUI
CoreUI pour les composants gratuits de Bootstrap 5.9.0. Les valeurs de thème par défaut sont distinguées des choix de densité d’origine. L’archivage et l’annulation ne concernent que les enregistrements d’exemple locaux.
