Tabler-Designsystem.

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

<main class="project-log"><header class="page-header d-print-none"><div class="row align-items-center"><div class="col"><div class="page-pretitle">TABLER · PROJECT JOURNAL</div><h1 class="page-title">Atlas field notes</h1><p class="text-secondary mt-2 mb-0">Decisions, prototypes and review checkpoints for a small editorial project.</p></div><div class="col-auto d-flex gap-2"><button id="theme" class="btn" aria-pressed="false">Dark mode</button><button id="add" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#entry-modal">Add checkpoint</button></div></div></header><div class="row g-4 mt-1"><section class="col-lg-8" aria-label="Project checkpoints"><ul id="timeline" class="timeline"><li class="timeline-event"><div class="timeline-event-icon bg-blue-lt" aria-hidden="true">AM</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">A clearer route through the issue</h2><span class="badge bg-blue-lt">Decision</span></div><div class="text-secondary small mb-3">Alex Morgan · 02 OCT</div><p class="mb-0">Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-purple-lt" aria-hidden="true">JC</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Three cover directions</h2><span class="badge bg-purple-lt">Prototype</span></div><div class="text-secondary small mb-3">Jules Chen · 01 OCT</div><div class="cover-strip" aria-label="Three original cover studies"><div><b>ATLAS</b><i></i><small>RIDGE / 01</small></div><div><b>ATLAS</b><i></i><small>RIVER / 02</small></div><div><b>ATLAS</b><i></i><small>PLAIN / 03</small></div></div><p class="mt-3 mb-0">Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-green-lt" aria-hidden="true">SR</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Reference package reviewed</h2><span class="badge bg-green-lt">Review</span></div><div class="text-secondary small mb-3">Sam Rivera · 30 SEP</div><p class="mb-0">Image captions, credit lines and print dimensions are recorded alongside each selected reference.</p></div></div></li></ul></section><aside class="col-lg-4"><div class="card"><div class="card-header"><h2 class="card-title">Project context</h2></div><div class="card-body"><div class="datagrid"><div class="datagrid-item"><div class="datagrid-title">Format</div><div class="datagrid-content">Editorial field journal</div></div><div class="datagrid-item"><div class="datagrid-title">Team</div><div class="datagrid-content"><span class="avatar avatar-xs me-1">AM</span><span class="avatar avatar-xs me-1">JC</span><span class="avatar avatar-xs">SR</span></div></div><div class="datagrid-item"><div class="datagrid-title">Checkpoints</div><div id="count" class="datagrid-content">3 recorded</div></div><div class="datagrid-item"><div class="datagrid-title">Current focus</div><div class="datagrid-content">Cover selection</div></div></div></div><div class="card-footer text-secondary">Sample project. New entries stay in this page.</div></div><div class="card mt-4"><div class="card-body"><h2 class="card-title">A useful checkpoint</h2><p class="text-secondary">Record the decision and the reason together. A future reader should understand what changed without reopening the meeting.</p><p class="mb-0 small">Choose Decision, Prototype or Review when adding a local entry.</p></div></div></aside></div><div id="notice" class="alert alert-success mt-3" role="status" hidden></div></main><div id="entry-modal" class="modal modal-blur fade" tabindex="-1" aria-labelledby="entry-title" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><form id="entry-form"><div class="modal-header"><h2 id="entry-title" class="modal-title">Add a local checkpoint</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="mb-3"><label for="entry-name" class="form-label">Title</label><input id="entry-name" class="form-control" required minlength="5" maxlength="80" placeholder="What changed?"></div><div class="mb-3"><label for="entry-type" class="form-label">Kind</label><select id="entry-type" class="form-select"><option>Decision</option><option>Prototype</option><option>Review</option></select></div><div><label for="entry-detail" class="form-label">Reason or evidence</label><textarea id="entry-detail" class="form-control" required minlength="15" maxlength="360" rows="4" placeholder="Explain why this checkpoint matters."></textarea></div></div><div class="modal-footer"><button type="button" class="btn" data-bs-dismiss="modal">Cancel</button><button class="btn btn-primary" type="submit">Add to journal</button></div></form></div></div></div>

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=`<div class="timeline-event-icon bg-${color}-lt" aria-hidden="true">YOU</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1"></h2><span class="badge bg-${color}-lt"></span></div><div class="text-secondary small mb-3">You · LOCAL ENTRY</div><p class="mb-0"></p></div></div>`;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(''));

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)}}