# Tabler-Designsystem ## Vorschau der Tabler-Designsystem-Oberfläche Sieh dir Designentscheidungen und Coverstudien an, füge einen validierten Meilenstein hinzu und wechsle den nativen Farbmodus. ## Designreferenz für das Tabler-Designsystem Kompilierte Variablen von CSS 1.6.1 Tabler. Dieses Release verwendet OKLCH-Grundwerte sowie light-dark()/color-mix() in semantischen Rollen; ältere hexadezimalbasierte Tabler-Beispiele sollten nicht als dasselbe Theme betrachtet werden. Die folgenden Werte entsprechen den tatsächlich installierten Standardwerten. ### Standardfarben für Status und Aktionen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --tblr-primary | oklch(54.6% 0.1724 254.2deg) | Rolle für die Hauptaktion. | | --tblr-secondary | oklch(55.55% 0 0deg) | Sekundäre Rolle. | | --tblr-success | oklch(67.38% 0.1885 145.43deg) | Erfolgsrolle. | | --tblr-info | oklch(66.26% 0.1358 246.81deg) | Informationsrolle. | | --tblr-warning | oklch(77.02% 0.1658 71.02deg) | Warnrolle. | | --tblr-danger | oklch(58.29% 0.1941 25.59deg) | Gefahrenrolle. | | --tblr-purple | oklch(57.83% 0.2186 319.15deg) | Prototyp-Kategoriefarbe in dieser Anwendung. | | --tblr-body-color | light-dark(oklch(26.86% 0 0deg), oklch(92.19% 0 0deg)) | Die Textfarbe passt sich dem aktuellen Farbschema an. | | --tblr-body-bg | light-dark(oklch(98.51% 0 0deg), oklch(20.46% 0 0deg)) | Der Seitenhintergrund passt sich dem Farbschema an. | | --tblr-bg-surface | light-dark(var(--tblr-bg-surface-primary), var(--tblr-gray-800)) | Hintergrundrolle für Karten/Oberflächen. | ### Fließtexttypografie und Eckenradien | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --tblr-font-sans-serif | system-ui, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif | System-Sans-Serif-Schriftstapel im installierten Release. | | --tblr-body-font-size | 0.875rem | Standardwert entsprechend 14px bei einem Browser-Root-Wert von 16px. | | --tblr-body-font-weight | 400 | Normale Stärke des Fließtexts. | | --tblr-body-line-height | 1.4285714286 | Etwa 20px bei der standardmäßigen Fließtextgröße. | | --tblr-border-radius | 6px | Standardradius von 6px. | | --tblr-border-radius-sm | 4px | Kleiner Radius von 4px. | | --tblr-border-radius-lg | 8px | Großer Radius von 8px. | | --tblr-border-radius-xl | 1rem | Extra großer Radius von 1rem. | | --tblr-border-radius-pill | 100rem | Pillenförmige Abrundung. | ### Abstände und Geometrie der nativen Timeline | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --tblr-spacer-0 | 0 | Benannter nativer Abstandswert. | | --tblr-spacer-1 | 0.25rem | Benannter nativer Abstandswert. | | --tblr-spacer-2 | 0.5rem | Benannter nativer Abstandswert. | | --tblr-spacer-3 | 1rem | Benannter nativer Abstandswert. | | --tblr-spacer-4 | 1.5rem | Benannter nativer Abstandswert. | | --tblr-spacer-5 | 2rem | Benannter nativer Abstandswert. | | --tblr-spacer-6 | 2.5rem | Benannter nativer Abstandswert. | | --tblr-page-padding | var(--tblr-spacer-3) | Variable für den Abstand zwischen Seite und Timeline; responsive Überschreibungen können den Wert ändern. | | --tblr-card-spacer-x | 1.25rem | Standardmäßiger horizontaler Innenabstand des Karteninhalts. | | --tblr-card-spacer-y | 1.25rem | Standardmäßiger vertikaler Innenabstand des Karteninhalts. | | --tblr-timeline-icon-size | 2.5rem | Icon-Knoten mit 40px bei einem Standard-Root-Wert von 16px. | ### Originale Gestaltungsentscheidungen des Journals | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Project layout | col-lg-8 + col-lg-4 | Natives Grid; ab dem lg-Breakpoint zweispaltig. | | Page padding | 32px; 24px 14px below 650px | Eigener Innenabstand der Anwendung. | | Journal title | 32px / 1.2; 27px on mobile | Überschreibung des originalen Seitentitels. | | Cover studies | 155px tall; 120px on mobile | Originale dekorative CSS-Grafik. | ## Vollständiger Leitfaden zum Tabler-Designsystem 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. ## Tabler-Designsystem: Verwende das Theme, das zum Tabler-Release passt ### Verwende das Theme, das zum Tabler-Release passt > Das Projekttagebuch wurde mit Tabler 1.6.1 erstellt. Die kompilierte Palette verwendet OKLCH-Farben, während semantische Variablen light-dark und color-mix nutzen. Die Referenz gibt daher diese tatsächlichen Ausdrücke wieder, statt Hexadezimalwerte aus einem älteren Bootstrap- oder Tabler-Leitfaden zu übernehmen. Die primäre Aktion, Status-Badges und Oberflächenrollen stammen alle aus diesem installierten Release. Tabler erweitert das Komponentenvokabular von Bootstrap um eigene Layout- und Informationsdarstellungsmuster. Das Beispiel verwendet native Timeline-, Page-Header-, Datagrid- und Avatar-Klassen neben vertrauten Karten, Formularen und einem Modal. Diese Details machen daraus eine Tabler-Komposition und kein generisches Kartengrid mit anderem Logo. Unterstützende Spezifikation lesen ## Tabler-Designsystem: Der Farbmodus verändert Oberflächen ebenso wie Text ### Der Farbmodus verändert Oberflächen ebenso wie Text Die Theme-Steuerung ändert data-bs-theme am html-Element und aktualisiert ihren eigenen Pressed-Status sowie die Aktionsbeschriftung. Die semantischen Ausdrücke von Tabler wählen dann helle oder dunkle Werte. Für dieses einfache Beispiel mit zwei Zuständen ist kein separater JavaScript-Theme-Manager erforderlich; die Einstellung wird nicht über die Seite hinaus gespeichert. Für Entscheidung, Prototyp und Review werden die nativen blauen, violetten und grünen Tönungsklassen verwendet. Die Textlabels vermitteln ihre Bedeutung auch unabhängig von der Farbe. Die Grafiken zur Titelbildstudie behalten in beiden Modi ihre ursprüngliche papierartige Farbpalette; die umgebenden Karten, die Seite und der Text verwenden das tatsächliche Komponententhema. Unterstützende Spezifikation lesen ## Tabler-Designsystem: Kompakte Fließtextschrift mit eigener Seitenhierarchie ### Kompakte Fließtexttypografie mit separater Seitenhierarchie Der Standard-Fließtext hat eine Größe von 0.875rem und eine Zeilenhöhe von ungefähr 1.4286. Bei einer Root-Schriftgröße von 16 Pixeln ergibt das Text mit ungefähr 14 Pixeln. Der installierte Schriftstapel verwendet serifenlose Systemschriften, daher benötigt diese Vorschau keine externe Schriftart. Kartentitel und Metadaten behalten ihre nativen Klassen; der Seitentitel erhält eine eigene Größe von 32 Pixeln. Die nativen Abstandswerte steigen in den Stufen 0, 0.25, 0.5, 1, 1.5, 2 und 2.5rem an. Es handelt sich um benannte Variablen in CSS, nicht um eine angenommene Skala. Das Standard-Innenabstandsmaß des Karteninhalts beträgt in beide Richtungen 1.25rem. Der Zeitleistenknoten ist 2.5rem groß; sein Verbindungselement verwendet die Variable für den Seitenabstand, um die Lücke zwischen den Einträgen zu überbrücken. Unterstützende Spezifikation lesen ## Tabler-Designsystem: Eine Zeitleiste ist mehr als ein vertikaler Rand ### Eine Timeline ist mehr als ein vertikaler Rand Jeder Meilenstein ist ein Listenelement mit timeline-event-icon und timeline-event-card. Das native CSS positioniert den Knoten, zeichnet die Verbindung zwischen allen Einträgen außer dem letzten und versetzt die Inhaltskarte um die Knotenbreite plus den Seitenabstand. Das Beispiel täuscht die Linie weder mit einem Hintergrundbild vor noch stützt es sich für jede Karte auf absolute Positionierung. Die Karten enthalten unterschiedliche Inhalte. Eine hält eine strukturelle Entscheidung fest, eine enthält drei tatsächliche Titelbildstudien und eine dokumentiert die Überprüfung von Referenzen. Der Projektkontext steht außerhalb der Abfolge, denn Format und aktueller Schwerpunkt sind dauerhafte Merkmale und keine datierten Ereignisse. Auf kleineren Bildschirmen folgt die Seitenleiste in der Dokumentreihenfolge auf die Zeitleiste. Unterstützende Spezifikation lesen ## Tabler-Designsystem: Datagrid für kleine Gruppen aus Beschriftungen und Werten verwenden ### Verwende Datagrid für kleine Gruppen aus Bezeichnungen und Werten Die Karte zum Projektkontext verwendet Paare aus datagrid-item, datagrid-title und datagrid-content. Format, Team, Meilensteine und aktueller Schwerpunkt sind gleichrangige Merkmale. Daher werden sie in einem kompakten nativen Datagrid statt in einer Tabelle mit überflüssigen Zeilenüberschriften dargestellt. Für Initialen-Avatare werden Textinitialen verwendet; externe Bilddateien sind nicht erforderlich. In diesem Beispiel wird nur die Anzahl der Meilensteine im Kontext geändert. Beim Hinzufügen eines lokalen Eintrags steigt sie von drei auf vier, während die ursprüngliche Projektbeschreibung unverändert bleibt. So werden keine Dashboard-Kennzahlen erfunden: Die Zahl entspricht direkt den sichtbaren Listeneinträgen. Unterstützende Spezifikation lesen ## Tabler-Designsystem: Das gebündelte Modal verwaltet Sichtbarkeit und Fokus ### Das integrierte Modal verwaltet Sichtbarkeit und Fokus „Meilenstein hinzufügen“ öffnet das native Modal über data-bs-toggle und data-bs-target. Das gebündelte Tabler JavaScript stellt die Modal-Implementierung bereit. Ein Listener für shown.bs.modal fokussiert nach dem Übergang das Titelfeld, sobald das Eingabefeld tatsächlich sichtbar ist. Schließen und Abbrechen verwenden data-bs-dismiss und folgen damit demselben Komponentenlebenszyklus. Das Modal enthält ein echtes Formular. Pflichtfeld- und Längenprüfungen weisen unvollständige Felder zurück, bevor der Submit-Handler ausgeführt wird. Der Handler prüft zusätzlich die Länge nach dem Entfernen von Leerzeichen am Anfang und Ende, denn eine Zeichenfolge aus Leerzeichen ist kein sinnvoller Titel oder Begründungstext. Bei der Validierung bleibt der eingegebene Text zur Korrektur erhalten; das Formular wird erst zurückgesetzt, nachdem ein Eintrag erfolgreich hinzugefügt wurde. 1. Öffnen Sie das Modal und senden Sie leere Felder ab, um das erste ungültige Feld zu überprüfen. 2. Geben Sie einen Titel an, wählen Sie eine Art von Meilenstein und erläutern Sie den Grund. 3. Senden Sie das Formular ab und prüfen Sie, ob der neue Eintrag und die Anzahl im Kontext gemeinsam aktualisiert werden. Unterstützende Spezifikation lesen ## Tabler-Designsystem: Sicheren Text hinzufügen und lokale Einträge kennzeichnen ### Text sicher anhängen und den lokalen Geltungsbereich kennzeichnen Die Anwendung erstellt ein festgelegtes Kartengerüst und fügt Titel und Begründung über textContent ein. Nur eine feste Zuordnung der drei Auswahlmöglichkeiten bestimmt die Tönungsklasse. Vom Benutzer eingegebener Text wird niemals in die Karte HTML interpoliert. Der neue Eintrag wird an den Anfang gesetzt und klar als LOKALER EINTRAG gekennzeichnet, statt einen erfundenen Serverzeitstempel zu verwenden. Nach dem Einfügen wird die vorhandene Modal-Instanz ausgeblendet und eine Statusmeldung nennt den neuen Meilenstein. Sie weist ausdrücklich darauf hin, dass kein Projektdienst aktualisiert wurde. Ein gemeinschaftlich genutztes, echtes Journal würde Persistenz, die Identität der Verfassenden und eine garantierte Reihenfolge erfordern; das lokale Hinzufügen eines DOM-Elements bietet diese Funktionen nicht. Unterstützende Spezifikation lesen ## Tabler-Designsystem: Dichte Inhalte auf einer schmalen Zeitleiste lesbar halten ### Dichte Inhalte in einer schmalen Timeline gut lesbar halten Das Haupt-Grid verwendet col-lg-8 und col-lg-4. Unterhalb des nativen großen Breakpoints wird der Projektkontext unter dem Journal angeordnet. Das ursprüngliche Stylesheet für kleine Bildschirme verkleinert den seitlichen Abstand der Zeitleiste, lässt Titel- und Badge-Gruppen umbrechen und skaliert die Titelbildstudien. Text und Aktionen bleiben dabei unverändert. Eine Zeitleiste kann eng wirken, wenn Symbolspalte, Karteninnenabstand und langer Titel um dieselbe Breite konkurrieren. Das Beispiel für Mobilgeräte behält den Knoten als verlässliche Orientierung bei, verwendet aber einen kompakteren Versatz. Die ursprünglichen Titelbildstudien bleiben als drei kleine Vergleiche erhalten, weil ihr Verhältnis zueinander wichtig ist; ihre Bildunterschriften ergänzen den angrenzenden Erläuterungsabsatz. - Titel und Art des Meilensteins auch bei Zeilenumbrüchen gut lesbar halten. - Den Begründungstext beibehalten, statt jeden Eintrag der Zeitleiste zu kürzen. - Die Kontextkarte auf Mobilgeräten nach der Hauptlesereihenfolge anzeigen. Unterstützende Spezifikation lesen ## Tabler-Designsystem: Ein aufeinander abgestimmtes CSS- und JavaScript-Paar laden ### Ein zusammenpassendes CSS- und JavaScript-Paar laden Die Einrichtung verwendet @tabler/core 1.6.1 und kopiert dessen dist-Assets in ein lokales öffentliches Verzeichnis. Laden Sie tabler.min.css vor dem Stylesheet der Anwendung und tabler.min.js vor dem lokalen Interaktionscode. Ein zweites, nicht dazugehöriges Bootstrap-Bundle könnte dieselben Datenattribute doppelt initialisieren; dieses Beispiel verwendet ausschließlich das dazugehörige Tabler-Bundle. Das aktuelle Stylesheet verwendet moderne Farbfunktionen. Beachten Sie beim Einsatz in einem Produkt mit Anforderungen an ältere Browser die Hinweise zur Browserunterstützung von Tabler. Das lokale Beispiel wurde in Chromium auf native Modal-Validierung, das Hinzufügen von Zeitleisteneinträgen, den Dunkelmodus und ein Layout mit 390px Breite geprüft. Es handelt sich weder um eine Produktionsbereitstellung noch um eine Aussage zur Unterstützung jedes denkbaren Browsers. Unterstützende Spezifikation lesen ## Tabler-Designsystem: Komponentenbeispiele ### Zeitleiste, Kontextkarte und Formular für neue Einträge Aufbau der nativen Komponenten timeline-event, card, datagrid, badge und modal. ```
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.

``` Code-Referenz - Die Zeitleiste ist eine echte Liste in Lesereihenfolge. - Für den Projektkontext werden Paare aus Datagrid-Titel und -Inhalt verwendet. - Der Modal-Auslöser verwendet die gebündelte, mit Bootstrap kompatible Daten-API. ### Validierter lokaler Meilenstein-Eintrag Lebenszyklus des Modals, sichere Texteingabe, Synchronisierung der Anzahl und Farbmodus. ``` 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('')); ``` Code-Referenz - Vom Benutzer eingegebene Zeichenfolgen werden über textContent zugewiesen. - Das Modal wird erst zurückgesetzt, nachdem ein gültiger Eintrag hinzugefügt wurde. - Der Hinweis besagt, dass kein Projektdienst aktualisiert wurde. ### Ursprüngliches Journal-Layout und Titelbildstudien Responsive Anpassungen für native Tabler-Komponenten. ``` 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)}} ``` Code-Referenz - Die Titelbildgrafik zeigt drei fiktive Designstudien. - Das Dokument verwendet für die Einbettung die Inhaltshöhe. ## Tabler Designsystem-Agent – Einrichtung ### Ausgangspunkt für die Implementierung Verifiziert mit Tabler 1.6.1. Speichern Sie die zugehörigen Layout- und Anwendungsdateien als style.css und app.js. Verwendet die native Modal-Daten-API. Der HTML-Wrapper enthält das vollständige Markup des Bodys. Speichern Sie die bereitgestellten Beispiele für Interaktionen und CSS unter den hier angegebenen Dateinamen. ```
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.

``` ### Ein Prompt für dein Projekt ``` Verwenden Sie Tabler 1.6.1, um das Atlas-Projektjournal mit seiner Zeitleiste, den Kontextkarten, dem Datagrid und dem nativen Modal nachzubilden. Halten Sie das validierte Meilensteinformular getrennt von der gespeicherten Zeitleiste: Beim Abbrechen bleibt das Journal unverändert, und bei einer gültigen Eingabe wird der angegebene Meilenstein an die lokalen Einträge angehängt. Behalten Sie die data-bs-Attribute, das passende Tabler-Bundle und die Theme-Gestaltung bei. Die ursprünglichen Titelbildstudien sollen dekorativ bleiben, und der Text der Meilensteine muss auch auf schmalen Bildschirmen gut lesbar sein. Erwecken Sie nicht den Eindruck, es gebe ein Infrastrukturinventar oder eine externe Veröffentlichung. ``` ## Quellen und Geltungsbereich des Tabler-Designsystems Tabler 1.6.1. Tatsächliche Theme-Variablen und native Komponenten werden von ursprünglichen Projektinhalten und Titelbildgrafiken unterschieden. Neue Meilensteine bleiben lokal. - Installation Passende Paketressourcen. - Farben Referenz für Theme-Rollen. - Typografie Native Textstile. - Zeitleiste Aufbau von Knoten, Verbindungslinie und Ereigniskarte. - Datagrid Kompakte Projektattribute. - Modal Einrichtung des nativen Modals. - Farbmodi Steuerung für helle und dunkle Themes. ## Verwandte Ressourcen zum Tabler-Designsystem ### Tamagui Erkunden Sie die tatsächlichen Token-Kategorien von Tamagui v5 und die hellen und dunklen blauen Themes anhand einer vollständigen, mit nativen Komponenten erstellten Gewohnheitentafel mit Validierung, Fortschrittsanzeige und Wiederherstellung bei leerem Zustand. ### UIkit UIkit kombiniert ein CSS-Framework, Less-Anpassungen und attributgesteuerte JavaScript-Komponenten. Der Switcher, das Accordion und das responsive Raster greifen im folgenden Workshop-Planer ineinander. So wird deutlich, wo das Verhalten nativer Komponenten endet und der Auswahlzustand der Anwendung beginnt. ### Vant Ein mobiler Ablauf zur Adressauswahl mit Vant 4: echten CSS-Variablen, kontrollierter Adressidentität, Feldvalidierung, Theme-Wechsel und explizitem Speichern ausschließlich lokal. - [Implementierungsreferenz](https://docs.tabler.io/ui/components/timeline) - [Quelle](https://docs.tabler.io/ui/base/colors) - [Quelle](https://docs.tabler.io/ui/base/typography) - [Quelle](https://docs.tabler.io/ui/components/timeline) - [Quelle](https://docs.tabler.io/ui/components/card) - [Unterstützende Spezifikation lesen](https://docs.tabler.io/ui/getting-started/upgrade-to-1.6) - [Unterstützende Spezifikation lesen](https://docs.tabler.io/ui/getting-started/color-modes) - [Unterstützende Spezifikation lesen](https://docs.tabler.io/ui/base/typography) - [Unterstützende Spezifikation lesen](https://docs.tabler.io/ui/components/timeline) - [Unterstützende Spezifikation lesen](https://docs.tabler.io/ui/components/data-grid) - [Unterstützende Spezifikation lesen](https://docs.tabler.io/ui/components/modal) - [Unterstützende Spezifikation lesen](https://docs.tabler.io/ui/layout/page-layouts) - [Unterstützende Spezifikation lesen](https://docs.tabler.io/ui/getting-started/installation) - [Code-Referenz](https://docs.tabler.io/ui/components/timeline) - [Code-Referenz](https://docs.tabler.io/ui/components/modal) - [Code-Referenz](https://docs.tabler.io/ui/layout/page-layouts) - [Installation Passende Paketressourcen.](https://docs.tabler.io/ui/getting-started/installation) - [Farben Referenz für Theme-Rollen.](https://docs.tabler.io/ui/base/colors) - [Typografie Native Textstile.](https://docs.tabler.io/ui/base/typography) - [Zeitleiste Aufbau von Knoten, Verbindungslinie und Ereigniskarte.](https://docs.tabler.io/ui/components/timeline) - [Datagrid Kompakte Projektattribute.](https://docs.tabler.io/ui/components/data-grid) - [Modal Einrichtung des nativen Modals.](https://docs.tabler.io/ui/components/modal) - [Farbmodi Steuerung für helle und dunkle Themes.](https://docs.tabler.io/ui/getting-started/color-modes)