Komponentensystem für Unternehmen · Neue Ressource
CoreUI-Designsystem.
Eine mit echten 5.9-Theme-Variablen erstellte Prüfwarteschlange für CoreUI mit nativen Tabs, Mehrfachauswahl per Kontrollkästchen und einer dauerhaft eingeblendeten Toast-Meldung, über die sich der letzte lokale Archivierungsvorgang rückgängig machen lässt.
Natives CoreUI für Bootstrap 5.9.0 CSS sowie gebündelte Tab-/Toast-JavaScript. · Implementierungsreferenz
02
CoreUI-Designsystem: Designreferenz
CoreUI für die hellen Theme-Standardwerte von Bootstrap 5.9.0 aus dem installierten, kompilierten Stylesheet. Diese --cui-*-Namen sind tatsächliche Laufzeitvariablen. Die Beispielanwendung verwendet kostenlose Komponenten; PRO-Widgets von CoreUI werden nicht vorausgesetzt.
CoreUI-Designsystem: Wählen Sie die tatsächlich verwendete Laufzeitumgebung
Wählen Sie die tatsächlich verwendete CoreUI-Laufzeitumgebung
Dieses Beispiel verwendet CoreUI für Bootstrap 5.9.0, das CSS- und Browser-JavaScript-Paket. CoreUI bietet außerdem framework-spezifische Pakete. Deren Komponentenimporte sind jedoch nicht mit den Datenattributen in diesem Beispiel austauschbar. Die Einrichtung stellt ein aufeinander abgestimmtes Stylesheet und ein gebündeltes Skript bereit, ohne einen React- oder Vue-Provider vorauszusetzen.
Der Review-Bereich verwendet kostenlose Karten, Tabellen, Formulare, Tabs und Toasts. Dabei werden nicht unbemerkt ein PRO-Datengitter oder ein erweiterter kostenpflichtiger Selektor eingesetzt. So lässt sich das vollständige Beispiel mit dem genannten Paket reproduzieren, ohne dass ein nicht dokumentierter Template-Kauf erforderlich ist.
CoreUI-Designsystem: Verwenden Sie das tatsächliche primäre Lila und die dazugehörigen Statusrollen
Verwenden Sie das tatsächliche lila Primär- und die dazugehörigen Statusrollen
Die helle Primärfarbe von CoreUI ist #5856d6; der Kontrast der Primärfarbe ist Weiß. Die Karte mit den Review-Prinzipien kombiniert primary-bg-subtle, primary-border-subtle und primary-text-emphasis. Diese Bezeichnungen stehen für eine abgestimmte Oberflächengestaltung. Der ergänzende Text steht daher nicht auf einem getönten Hintergrund mit einer willkürlich gewählten Vordergrundfarbe.
Auch die Badges „Hoch“ und „Mittel“ kombinieren dezente Gefahr- oder Warnoberflächen mit hervorgehobenem Text. Die Textbezeichnungen geben die Einstufung unabhängig von der Farbe wieder. Dies sind beispielhafte Prioritäten für Design-Reviews und keine Behauptung, dass jedes rote Badge in einem Produkt denselben fachlichen Status bedeuten muss.
CoreUI-Designsystem: Trennen Sie die Standardschriftgröße des Fließtexts von einer dichten Arbeitstabelle
Trennen Sie den Standardtext im Fließtext von einer dichten Arbeitstabelle
Der kompilierte Fließtext von CoreUI hat standardmäßig eine Schriftgröße von einem rem und einen Zeilenabstand von 1,5. Das Beispiel verwendet in der Tabelle bewusst eine Schriftgröße von vierzehn Pixeln und zwölf Pixel für die Spaltenbeschriftungen, damit eine dichte Review-Warteschlange gut lesbar bleibt. Überschrift und Zusammenfassungswerte der Seite haben jeweils eigene, größere Ausgangsgrößen. Der Leitfaden bezeichnet diese anwendungsspezifischen Anpassungen nicht fälschlich als bibliotheksweite Standardwerte.
Die drei Kontextkarten verwenden das native responsive Raster und den Abstand g-3. Posteingang und Archiv bleiben auf kleinen Bildschirmen nebeneinander, während die dritte Karte mit Erläuterungen eine ganze Zeile einnimmt. Jede Zahl basiert auf den fünf sichtbaren Beispieldatensätzen; es gibt weder sachfremde Dashboard-Kennzahlen noch erfundene Wachstumsgrafiken.
Posteingang und Archiv sind Tabs auf Schaltflächenbasis mit data-coreui-toggle="tab" und Verweisen auf die zugehörigen Tab-Panels. Das Markup enthält die Beziehungen zwischen tablist, tab, tabpanel, aria-controls und aria-labelledby. Die CoreUI-Komponente von JavaScript aktualisiert den aktiven Status und die Sichtbarkeit, statt dass ein Anwendungs-Handler lediglich eine Unterstreichung ändert.
Die Klasse nav-underline-border sorgt für die visuelle Gestaltung dieser Komponente. Ein Tabwechsel archiviert keine Datensätze und hebt keine Auswahl auf. Der Tab bestimmt, welcher Teil der lokalen Warteschlange angezeigt wird; die Sets für Auswahl und Archiv bleiben davon getrennte Anwendungszustände.
CoreUI-Designsystem: „Alle auswählen“ hat einen aussagekräftigen Zwischenzustand
„Alle auswählen“ hat einen aussagekräftigen Zwischenzustand
Jede Notiz hat eine stabile ID der R-Serie. Wird eine Zeile ausgewählt, kommt ihre ID in ein ausgewähltes Set. Das Kontrollkästchen in der Kopfzeile ist aktiviert, wenn alle aktuellen Posteingangseinträge ausgewählt sind, und zeigt einen Zwischenzustand, wenn nur einige ausgewählt sind. Ist der Posteingang leer, ist es deaktiviert. Diese Zustände werden bei jeder Darstellung der Warteschlange neu berechnet.
Die Stapelschaltfläche ist deaktiviert, wenn nichts ausgewählt ist; der danebenstehende Text zeigt die aktuelle Anzahl an. Nach dem Archivieren wird die Auswahl aufgehoben, damit ein bereits archivierter Datensatz nicht versehentlich im nächsten Stapel verbleibt. Die ursprüngliche Notiz und die zuständige Person bleiben dem Datensatz zugeordnet, statt durch eine allgemeine Bezeichnung wie „Erledigt“ ersetzt zu werden.
Wählen Sie zwei Notizen aus und prüfen Sie den Zwischenzustand des Kontrollkästchens in der Kopfzeile.
Archivieren Sie die Auswahl und überprüfen Sie, ob die Anzahl im Posteingang um zwei sinkt.
Öffnen Sie das Archiv, um die ursprünglichen Anfragen und die zuständigen Personen zu lesen.
CoreUI-Designsystem: Ein Toast bietet eine konkrete, rückgängig zu machende Aktion
Eine Toast-Meldung stellt eine konkrete, umkehrbare Aktion dar
Die Anwendung speichert die genauen IDs des zuletzt archivierten Stapels und ruft anschließend die show-Methode der nativen Toast-Instanz auf. autohide ist false, da die Meldung eine Rückgängig-Aktion enthält; das Beispiel lässt die Möglichkeit zum Rückgängigmachen nicht nach einem beliebig kurzen Timer verfallen. Der Toast kann weiterhin ausdrücklich geschlossen werden.
Beim Rückgängigmachen werden nur die gespeicherten IDs aus dem archivierten Set entfernt, die Momentaufnahme des letzten Stapels gelöscht und die zugehörige Aktion deaktiviert. Ein früherer Archivierungsstapel bleibt archiviert, wenn ein späterer Stapel rückgängig gemacht wird. Dies ist bewusst eine einstufige Aktion und keine irreführende Behauptung, es gebe einen vollständigen Rückgängigmachungsverlauf.
CoreUI-Designsystem: Anfragen bleiben nach dem Archivieren lesbar
Die Anfrage bleibt nach der Archivierung lesbar
Die Tabelle im Posteingang zeigt den Notiztitel, die konkrete gewünschte Änderung, den Bereich, die Priorität und die zuständige Person. Das Archiv stellt eine kompakte Liste dar, in der Titel, ID, zuständige Person und vollständige Anfrage erhalten bleiben. Nach der Bearbeitung wird der Tabellenrahmen reduziert, ohne Informationen zu löschen, die zum Verständnis der Änderung benötigt werden.
Auf Mobilgeräten behält die Tabelle innerhalb von table-responsive eine Mindestbreite von 740px. Der benannte Bereich ist per Tastatur fokussierbar und hat eine sichtbare Fokusdarstellung. Horizontales Scrollen bleibt auf die Tabelle beschränkt, statt das Dokument zu verbreitern. Wichtige Spalten nur deshalb zu entfernen, um eine Bildlaufleiste zu vermeiden, würde die Review-Aufgabe beeinträchtigen.
CoreUI-Designsystem: Ein dauerhaftes Ergebnis anzeigen, ohne ein Backend zu erfinden
Verwenden Sie ein dauerhaftes Ergebnis, ohne ein Backend vorzutäuschen
Der Toast hat die höfliche Statusrolle und eine atomare Ansage. Ein zweiter Inline-Status beschreibt das lokale Archivierungs- oder Rückgängig-Ergebnis. Keiner der beiden behauptet, ein externes Issue sei geschlossen worden: Die Seite ist ausdrücklich nicht mit einem Issue-Tracker verbunden. Die Vorschau ändert nur ihre Sets im Arbeitsspeicher. Nach einem Neuladen werden daher die ursprünglichen fünf Notizen wiederhergestellt.
Notiztitel und Beschreibungen werden einschließlich der Archivliste mit textContent eingefügt. Feste Klassenzuordnungen bilden die beiden bekannten Prioritäten ab. So bleibt nutzerähnlicher Text von der HTML-Struktur getrennt und der Datenfluss im Beispiel nachvollziehbar.
Geben Sie die tatsächliche Stapelgröße und den lokalen Geltungsbereich an.
Lassen Sie die Rückgängig-Schaltfläche verfügbar, solange ihre Momentaufnahme gültig ist.
Bezeichnen Sie eine lokale DOM-Aktualisierung nicht als erfolgreiche Behebung aus der Ferne.
CoreUI Design-System: Lade das CoreUI-Bundle vor dem lokalen Modul
Laden Sie das CoreUI-Bundle vor dem lokalen Modul
Bei der vollständigen Einrichtung werden die Assets des Pakets aus dist an einen lokalen öffentlichen Pfad kopiert und coreui.bundle.min.js vor app.js geladen. Das Bundle stellt coreui.Toast bereit und ermöglicht das Tab-Verhalten für die data-coreui-Attribute. Für diese Zusammensetzung ist keine zweite Bootstrap-Laufzeitumgebung erforderlich; sie könnte außerdem zu unklaren Zuständigkeiten durch doppelte Einbindung führen.
Das helle Theme wird explizit mit data-coreui-theme="light" festgelegt. Eine größere Anwendung kann den Farbmodus-Mechanismus von CoreUI übernehmen, sollte aber die semantischen Text- und Oberflächenkombinationen gemeinsam überprüfen. Die lokale Überprüfung umfasste eine teilweise Auswahl, einen Stapel mit zwei Datensätzen, das Lesen im Archiv-Tab, das Wiederherstellen per Rückgängig und einen Viewport von 390px.
Verwende mit diesem Bundle data-coreui-*-Attribute, nicht data-bs-*, die aus einer anderen Bibliothek übernommen wurden.
Die Tabelle befindet sich in einem benannten lokalen Bereich mit horizontalem Scrollen.
Prioritätsfarben werden durch explizite Bezeichnungen wie „Hoch“ und „Mittel“ ergänzt.
Stapelauswahl und Rückgängigmachen des letzten Stapels
Stabile Datensatz-IDs steuern die ausgewählten und archivierten Mengen, während der native Toast die Sichtbarkeit des Hinweises verwaltet.
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();
Die Tabellenbreite von 740px ist eine Lesbarkeitsentscheidung der Anwendung, kein CoreUI-Standardwert.
04
CoreUI Design-System: Einrichtung für AI Agents
Ausgangspunkt für die Implementierung
Verifiziert mit CoreUI für Bootstrap 5.9.0. Die bereitgestellte app.js erwartet das vollständige Markup der Warteschlange und führt keine Netzwerkoperationen aus. Der HTML-Wrapper enthält das vollständige Body-Markup; speichere die bereitgestellten Beispiele für Interaktionen und CSS unter den hier angegebenen Dateinamen.
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>
Ein Prompt für dein Projekt
Agenten-Prompt
Ausgangspunkt ist der Design-Review-Arbeitsplatz von CoreUI 5.9.0. Behalte die nativen Tabs und den Rückgängig-Toast mit data-coreui-Attributen bei, ebenso die fünf Review-Datensätze und die Menge der ausgewählten IDs mit einem daraus abgeleiteten gemischten Auswahlzustand. Archiviere den ausgewählten Stapel, zeige ihn im Archiv-Tab an und ermögliche mit „Rückgängig“ das Wiederherstellen des letzten Stapels. Begrenze das horizontale Scrollen der Tabelle auf ihren Bereich und unterscheide zwischen Auswahl und Zugehörigkeit zum Archiv. Verwende das passende CoreUI-Bundle; ersetze keine Attributnamen durch Bootstrap-Namen und behaupte nicht, dass die Archivierung serverseitig erfolgt.
05
CoreUI Design-System: Quellen und Geltungsbereich
CoreUI für die kostenlosen Komponenten von Bootstrap 5.9.0. Theme-Standardwerte und ursprüngliche Dichteentscheidungen sind voneinander abgegrenzt. Archivierung und Rückgängigmachen betreffen nur die lokalen Beispieldatensätze.
