# CoreUI-Designsystem ## CoreUI-Designsystem: Oberflächenvorschau Wählen Sie Notizen aus, archivieren Sie mehrere auf einmal, öffnen Sie den Tab „Archiv“ und machen Sie die letzte Aktion rückgängig. ## 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. ### Rollen des hellen Themes | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --cui-primary | #5856d6 | Lila Primärfarbe von CoreUI. | | --cui-primary-contrast | #fff | Text in Kombination mit der Primärfarbe. | | --cui-secondary | #6b7785 | Sekundäre Rolle. | | --cui-success | #1b9e3e | Erfolgsrolle. | | --cui-info | #39f | Informationsrolle. | | --cui-warning | #f9b115 | Warnrolle. | | --cui-danger | #e55353 | Gefahrenrolle. | | --cui-primary-bg-subtle | #cfc7f3 | Hintergrund der Kontextkarte in sanfter Primärfarbe. | | --cui-primary-text-emphasis | #3634a3 | Text auf der sanften Primärfläche. | | --cui-primary-border-subtle | #9d92e6 | Rahmen der Kontextkarte. | | --cui-danger-bg-subtle | #f9d4d4 | Fläche des Abzeichens für hohe Priorität. | | --cui-danger-text-emphasis | #671414 | Text des Abzeichens für hohe Priorität. | | --cui-warning-bg-subtle | #feecc5 | Fläche des Abzeichens für mittlere Priorität. | | --cui-warning-text-emphasis | #764705 | Text des Abzeichens für mittlere Priorität. | ### Standardeinstellungen für Typografie und Flächen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --cui-font-sans-serif | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | System-UI-Schriftstapel. | | --cui-body-font-size | 1rem | Standardgröße des Fließtexts: 1rem; für die dichte Tabelle wird eine eigene Überschreibung von 14px verwendet. | | --cui-body-line-height | 1.5 | Standard-Zeilenhöhe des Fließtexts. | | --cui-body-color | rgba(37, 42.92, 54.02, 0.95) | Primäre Textfarbe des hellen Themes. | | --cui-body-bg | #fff | Primärfläche. | | --cui-tertiary-bg | #f3f4f7 | Seitenhintergrund in diesem Beispiel. | | --cui-secondary-color | rgba(37, 42.92, 54.02, 0.681) | Rolle für ergänzenden Text. | | --cui-border-color | #dbdfe6 | Standardfarbe für Trennlinien. | ### Variablen für Ecken und Fokus | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --cui-border-radius | 0.375rem | Standardwert entspricht 6px bei einer Root-Größe von 16px. | | --cui-border-radius-sm | 0.25rem | Klein: entspricht 4px. | | --cui-border-radius-lg | 0.5rem | Groß: entspricht 8px. | | --cui-border-radius-xl | 1rem | Extragroß: entspricht 16px. | | --cui-border-radius-pill | 50rem | Pillenform. | | --cui-focus-ring-width | 0.25rem | Breite des Fokusrahmens. | | --cui-focus-ring-opacity | 0.25 | Deckkraft des Fokusrings. | | --cui-focus-ring-color | rgba(88, 86, 214, 0.25) | Fokusringfarbe auf Basis der Primärfarbe. | ### Eigene Dichteoptionen für die Warteschlange | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Page padding | 32px; 24px 14px mobile | Eigener Innenabstand der Anwendung. | | Table minimum width | 740px | Die Spalten bleiben in einem lokal begrenzten, responsiv scrollbareren Bereich lesbar. | | Table cell padding | 16px | Eigene Dichteoption für den nativen Tabellenaufbau. | | Table text | 14px; headings 12px | Ursprüngliche kompakte Hierarchie. | | g-3 summary row | 1rem native gutter | Responsive Kennzahlenkarten verwenden den standardmäßigen Rasterabstand. | | Toast behavior | autohide: false | Die Rückgängig-Aktion bleibt verfügbar, bis sie geschlossen oder durch einen späteren Stapel ersetzt wird. | ## CoreUI-Designsystem: vollständiger Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## CoreUI-Designsystem: Datenattribute steuern echte Tab-Panels ### CoreUI-Datenattribute steuern echte Tab-Bereiche 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. Unterstützende Spezifikation lesen ## 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. 1. Wählen Sie zwei Notizen aus und prüfen Sie den Zwischenzustand des Kontrollkästchens in der Kopfzeile. 2. Archivieren Sie die Auswahl und überprüfen Sie, ob die Anzahl im Posteingang um zwei sinkt. 3. Öffnen Sie das Archiv, um die ursprünglichen Anfragen und die zuständigen Personen zu lesen. Unterstützende Spezifikation 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## CoreUI Design-System-Komponentenbeispiele ### Warteschlange, Archiv-Tab und Rückgängig-Toast CoreUI-Datenattribute, Tabellensteuerelemente, semantische Prioritäts-Badges und ein dauerhaft eingeblendeter Toast. ```

COREUI · REVIEW OPERATIONS

Keep the review queue moving.

Archive resolved design notes and undo the last local batch.

LOCAL WORKSPACE
Inbox
5design notes
Archived
0local resolutions
Review principle

Keep the original request visible, even after the note is resolved.

No notes selected
Design noteAreaPriorityOwner

Resolved in this local session

The original note and owner stay attached to the record.

    No notes archived yet.

    High

    Blocks a clear next action or access to important information.

    Medium

    Creates avoidable friction while the flow remains usable.

    Local archive updated

    No external issue tracker is connected.

    ``` Code-Referenz - 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. ``` 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='

    ';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{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(); ``` Code-Referenz - „Alle auswählen“ zeigt die Zustände ausgewählt, nicht ausgewählt und teilweise ausgewählt an. - Mit „Rückgängig“ werden genau die IDs des zuletzt verarbeiteten Stapels wiederhergestellt. - Der gesamte Datensatztext wird mit textContent eingefügt. ### Ursprüngliche Warteschlangendichte Seitenaufbau mit nativen CoreUI-Karten und Tabellenstilen. ``` html,body{min-height:0;height:auto}body{background:var(--cui-tertiary-bg)}.review-desk{max-width:1120px;padding:32px;margin:auto}.desk-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px}.eyebrow{color:var(--cui-primary);font-size:11px;font-weight:700;letter-spacing:.12em}h1{font-size:32px;line-height:1.2;margin:12px 0}.desk-heading p:last-child{font-size:15px;line-height:1.6}.metric{height:100%}.metric strong{display:inline-block;font-size:32px;line-height:1.2;margin:12px 10px 0 0}.metric span{font-size:12px;color:var(--cui-secondary-color)}.context-card{background:var(--cui-primary-bg-subtle);border-color:var(--cui-primary-border-subtle)}.context-card p{font-size:14px;line-height:1.6;color:var(--cui-primary-text-emphasis)}.batch-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px}.table{min-width:740px;font-size:14px}.table th,.table td{padding:16px}.table th:first-child,.table td:first-child{width:48px}.table td:nth-child(2){max-width:380px}.table td:nth-child(2) p{line-height:1.5}.table th{font-size:12px;color:var(--cui-secondary-color);font-weight:600}.empty-copy{padding:24px;margin:0}.decision-key{display:grid;grid-template-columns:max-content 1fr;align-items:start;gap:10px 14px;margin-top:24px;font-size:12px;color:var(--cui-secondary-color)}.decision-key p{margin:0;line-height:1.6}.toast-container{max-width:520px}[hidden]{display:none!important}@media(max-width:650px){.review-desk{padding:24px 14px}.desk-heading{flex-direction:column;gap:4px}h1{font-size:28px}.metric strong{font-size:28px}.batch-bar{padding:14px}.table-responsive:focus-visible{outline:3px solid var(--cui-primary);outline-offset:-3px}} ``` Code-Referenz - Die Tabellenbreite von 740px ist eine Lesbarkeitsentscheidung der Anwendung, kein CoreUI-Standardwert. ## 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. ```

    COREUI · REVIEW OPERATIONS

    Keep the review queue moving.

    Archive resolved design notes and undo the last local batch.

    LOCAL WORKSPACE
    Inbox
    5design notes
    Archived
    0local resolutions
    Review principle

    Keep the original request visible, even after the note is resolved.

    No notes selected
    Design noteAreaPriorityOwner

    Resolved in this local session

    The original note and owner stay attached to the record.

      No notes archived yet.

      High

      Blocks a clear next action or access to important information.

      Medium

      Creates avoidable friction while the flow remains usable.

      Local archive updated

      No external issue tracker is connected.

      ``` ### Ein Prompt für dein Projekt ``` 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. ``` ## 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. - Einführung Abgestimmtes CSS und gebündeltes JavaScript. - CSS-Variablen Anpassung des Themes zur Laufzeit. - Farben Semantische Theme-Rollen. - Typografie Grundlagen der nativen Typografie. - Tabs Datenattribute und Panel-Semantik. - Toasts Dauerhaft eingeblendeter Hinweis und Komponentenmethoden. - Kontrollkästchen Native Zustände von Kontrollkästchen. - Tabellen Zusammensetzung responsiver Tabellen. ## CoreUI Design-System: Verwandte Ressourcen ### daisyUI Ein mit CSS erstelltes Einladungsstudio, das die semantischen Themes von daisyUI 5, passende Inhaltsfarben, verbundene Optionsfelder, Bereichsregler, Browser-Validierung und einen echten Dialog zur Prüfung demonstriert. ### Element Plus Nutze das echte Transfer-Modell von Element Plus, Filter und deaktivierte Optionen, um eine Workbench zur Modulauswahl zu erstellen. Dabei sollen geprüfte Farben, Schriftgrößen und Abmessungen der Bedienelemente zum Einsatz kommen. ### Flowbite Eine native Flowbite-4-Zusammensetzung aus Akkordeon und Drawer mit geprüften semantischen Theme-Aliasen, einer dauerhaft eingeblendeten Packliste und einem barrierefreien lokalen Workflow für Materialnotizen. - [Implementierungsreferenz](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Quelle](https://coreui.io/bootstrap/docs/customize/color/) - [Quelle](https://coreui.io/bootstrap/docs/content/typography/) - [Quelle](https://coreui.io/bootstrap/docs/customize/css-variables/) - [Quelle](https://coreui.io/bootstrap/docs/layout/gutters/) - [Unterstützende Spezifikation lesen](https://coreui.io/bootstrap/docs/getting-started/introduction/) - [Unterstützende Spezifikation lesen](https://coreui.io/bootstrap/docs/customize/color/) - [Unterstützende Spezifikation lesen](https://coreui.io/bootstrap/docs/content/typography/) - [Unterstützende Spezifikation lesen](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Unterstützende Spezifikation lesen](https://coreui.io/bootstrap/docs/forms/checks-radios/) - [Unterstützende Spezifikation lesen](https://coreui.io/bootstrap/docs/components/toasts/) - [Unterstützende Spezifikation lesen](https://coreui.io/bootstrap/docs/content/tables/) - [Code-Referenz](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Code-Referenz](https://coreui.io/bootstrap/docs/components/toasts/) - [Code-Referenz](https://coreui.io/bootstrap/docs/content/tables/) - [Einführung Abgestimmtes CSS und gebündeltes JavaScript.](https://coreui.io/bootstrap/docs/getting-started/introduction/) - [CSS-Variablen Anpassung des Themes zur Laufzeit.](https://coreui.io/bootstrap/docs/customize/css-variables/) - [Farben Semantische Theme-Rollen.](https://coreui.io/bootstrap/docs/customize/color/) - [Typografie Grundlagen der nativen Typografie.](https://coreui.io/bootstrap/docs/content/typography/) - [Tabs Datenattribute und Panel-Semantik.](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Toasts Dauerhaft eingeblendeter Hinweis und Komponentenmethoden.](https://coreui.io/bootstrap/docs/components/toasts/) - [Kontrollkästchen Native Zustände von Kontrollkästchen.](https://coreui.io/bootstrap/docs/forms/checks-radios/) - [Tabellen Zusammensetzung responsiver Tabellen.](https://coreui.io/bootstrap/docs/content/tables/)