Tabs sind das optimale UI-Muster für die Darstellung von sich gegenseitig ausschließenden oder verwandten Datensätzen (z. B. Installationsanweisungen “NPM vs. Yarn” oder “macOS vs. Windows”) in einem kompakten, interaktiven Format.

Syntax-Referenz

Der Container tabs verwendet das spezielle Unter-Trennzeichen == tab "Label". Jedes Label definiert einen eigenen Bereich, zwischen dem Benutzer umschalten können.

::: tabs

== tab "Label 1"
Inhalt für den ersten Tab.

== tab "Label 2"
Inhalt für den zweiten Tab.

:::

Implementierungs-Galerie

1. Paketverwaltung

Tabs werden am häufigsten verwendet, um Installationsanweisungen für verschiedene Paketmanager in einer einzigen Ansicht zu zeigen.

pnpm add @docmd/core

npm install @docmd/core

yarn add @docmd/core

2. Mehrsprachige Code-Snippets

Halten Sie Ihre Logik sauber, indem Sie verschiedene Programmiersprachen oder Umgebungen trennen.

import { build } from '@docmd/core';
await build('./docmd.config.js');

const { build } = require('@docmd/core');
build('./docmd.config.js');

Kernfunktionen

Isomorphes Lazy-Rendering

docmd implementiert Conditional Resource Laziness. Wenn ein Tab rechenintensive Elemente enthält (z. B. Mermaid.js-Diagramme oder hochauflösende Bilder), werden diese Assets erst initialisiert und gerendert, wenn der Benutzer diesen spezifischen Tab aktiviert. Dies gewährleistet schnelle anfängliche Seitenladezeiten.

Zustands-Persistenz

Der Standard-SPA-Router verfolgt den Index des aktiven Tabs über ähnliche Dokumentationsseiten hinweg. Wenn ein Benutzer auf einer Seite “pnpm” auswählt und zu einer anderen Seite mit einer passenden Tab-Struktur navigiert, bleibt der “pnpm”-Tab automatisch aktiv.

Technische Einschränkungen