Komponentenübersicht
Entdecken Sie Jamdesk-MDX-Komponenten wie Karten, Tabs, Hinweise und Codeblöcke für Ihre Dokumentation.
Jamdesk enthält MDX-Komponenten, die Sie auf jeder Seite verwenden können. Diese Übersicht hilft Ihnen, die passende Komponente für Ihre Inhalte auszuwählen.
Verwendung
Fügen Sie Komponenten direkt in Ihr MDX ein:
<Card title="Quickstart" icon="rocket" href="/quickstart">
Launch your docs in minutes.
</Card>
Layout und Navigation
Einklappbare Inhaltsabschnitte, in denen Benutzer nur das anzeigen, was sie benötigen. Ideal für FAQs, Feature-Listen und Konfigurationsoptionen.
Erfahren Sie, wie Sie die Card-Komponente verwenden, um anklickbare, formatierte Container mit Icons, Bildern, Links und CTAs in Rasterlayouts zu erstellen.
Responsives Rasterlayout zur Darstellung von Cards, Tiles und anderen Inhalten nebeneinander. Passt sich automatisch an die Bildschirmgröße an.
Frame umschließt Bilder und Demos mit einem Rahmen und optionalen Beschriftungen, sodass die visuellen Elemente der Dokumentation einheitlich bleiben.
Verwenden Sie Panel, um benutzerdefinierte Inhalte wie Warnungen oder Kurzhinweise in der Seitenleiste zu fixieren, damit sie beim Scrollen sichtbar bleiben.
Nummerierte Schritt-für-Schritt-Anleitungen für Einrichtungsabläufe, Tutorials und Fehlerbehebung. Unterstützt Icons, Codeblöcke und verschachtelte Inhalte.
Umschaltbare Bereiche für sich gegenseitig ausschließende Inhalte wie Paketmanager oder Programmiersprachen. Übereinstimmende Tab-Titel werden auf der gesamten Seite synchronisiert.
Tiles zeigen Inhaltsvorschauen mit einem formatierten Musterhintergrund und einem hervorgehobenen Bildbereich an. Verwenden Sie sie für Integrationen, Vorlagen oder visuelle Galerien.
Zeigen Sie Datei- und Ordnerhierarchien mit interaktivem Auf- und Zuklappen sowie Tastaturnavigation an. Ideal für die Dokumentation von Projektstrukturen.
Erstellen Sie Dokumentation, die sich an das Framework oder die Programmiersprachenwahl des Lesers anpasst. Ganze Abschnitte werden abhängig von der Auswahl des Benutzers umgeschaltet.
Inhalte und Hervorhebungen
Inline-Labels für Status, Kategorien und Metadaten – 11 Farbvarianten, 4 Größen, Icons, pillenförmige und abgerundete Formen sowie Umrisse.
Erfahren Sie, wie Sie die Komponenten Note, Tip, Warning, Danger, Check und benutzerdefinierte Callout-Komponenten verwenden, um wichtige Informationen in Ihrer Dokumentation hervorzuheben.
Expandable erstellt eine einfache Ein-/Ausblenden-Funktion für Inhalte, die Leser möglicherweise sehen möchten, die aber für den Hauptablauf nicht erforderlich sind.
Zeigen Sie Definitionen und Kontext beim Überfahren mit dem Mauszeiger an. Definieren Sie Begriffe, erklären Sie Abkürzungen oder verlinken Sie verwandte Inhalte, ohne die Seite zu überladen.
Änderungsprotokolleinträge im Zeitleistenstil mit Datumsangaben, Beschreibungen und Kategorietags. Wird zur Navigation in das Inhaltsverzeichnis integriert.
Zeigen Sie menschlichen Lesern und AI-Agenten auf derselben Seite unterschiedliche Inhalte an. Nur für Agenten bestimmter Kontext, Anweisungen und Definitionen, die nicht in der gerenderten Dokumentation erscheinen.
Code und Daten
Zeigen Sie Codeblöcke in einer Oberfläche mit Tabs an. Stellen Sie denselben Vorgang in mehreren Programmiersprachen wie cURL, Python und JavaScript dar.
Fixieren Sie Codeblöcke auf Desktopgeräten in einer klebrigen rechten Seitenleiste, damit Leser beim Scrollen darauf zugreifen können. Unterstützt Programmiersprachen in Tabs.
Dokumentieren Sie API-Parameter und Antwortfelder mit den Komponenten ParamField und ResponseField. Unterstützt Typen, Standardwerte und verschachtelte Objekte.
Verwenden Sie Prompt, um wiederverwendbare AI-Anweisungen mit Kopierfunktion, integrierten Aktionen zum Öffnen, benutzerdefinierten Zielen, Icons und kompakten Anzeigeoptionen darzustellen.
Organisieren Sie Daten in Zeilen und Spalten. Unterstützt Markdown-Tabellen und Table-Komponenten mit Sortierung, Hervorhebung und Zusammenführung.
Diagramme und visuelle Elemente
Die Color-Komponente zeigt Farbpaletten zur Dokumentation von Designsystemen, Markenrichtlinien oder beliebigen Farbspezifikationen an.
Rendern Sie Flussdiagramme, Sequenzdiagramme, Zeitleisten, Kreisdiagramme und mehr aus textbasierter Mermaid-Syntax. Diagramme werden zur Build-Zeit als SVG erstellt.
Rendern Sie Architekturdiagramme, Flussdiagramme, Sequenzen und SQL-Modelle aus textbasierter D2-Syntax. Diagramme werden als SVG mit automatischer Unterstützung für helle und dunkle Themes gerendert.
Interaktion
Fügen Sie jeder Dokumentationsseite mit der EmailSubscribe-Komponente ein Formular zur Anmeldung für Newsletter oder Änderungsprotokolle hinzu: native Erfassung für sieben Anbieter und Einbettungen für die übrigen.
Betten Sie eine Live-Demo des What's New-Widgets mit der Widget-MDX-Komponente in Ihre Dokumentation ein: eine Schaltfläche, die Ihr Änderungsprotokoll in einem Modal öffnet, ohne dass ein Script-Tag erforderlich ist.
