Vertikale Aufteilung
5 min
Vertikale Teilung Blöcke ordnen Inhalte in zwei nebeneinander liegende Spalten an. Sie sind nützlich für Vergleiche, Layouts mit unterstützenden Informationen oder die Darstellung von Code zusammen mit Erklärungen.
Syntax
Sie können diese Komponente entweder mit Markdown oder MDX hinzufügen.
:::::VerticalSplit{layout="middle"}
::::VerticalSplitItem
Left content.
::::
::::VerticalSplitItem
Right content.
::::
:::::Vertical Split Blöcke unterstützen drei Layoutoptionen:
- links, erzeugt eine breitere linke Spalte.
- Mitte, erzeugt zwei gleich breite Spalten.
- rechts, erzeugt eine breitere rechte Spalte.
Jedes Layout erfordert genau zwei VerticalSplitItem Blöcke.
MDX Beispiel
Die folgenden Beispiele zeigen die drei verfügbaren Layoutoptionen.
Gleich breite Spalten (Mitte)
<VerticalSplit layout="middle">
<VerticalSplitItem>
### Left Column
This column takes up equal space with the right column.
</VerticalSplitItem>
<VerticalSplitItem>
### Right Column
Perfect for comparing features, showing before/after, or code + explanation.
</VerticalSplitItem>
</VerticalSplit>Linkslastiges Layout (links)
<VerticalSplit layout="left">
<VerticalSplitItem>
### Main Content
The left column is wider — use this when the left side has the primary content and the right side has supplementary info.
</VerticalSplitItem>
<VerticalSplitItem>
<hint type="info">
This sidebar provides extra context.
</hint>
</VerticalSplitItem>
</VerticalSplit>Rechtslastiges Layout (rechts)
<VerticalSplit layout="right">
<VerticalSplitItem>
**Quick links:**
- [Tabs](/tabs)
- [Tables](/tables)
</VerticalSplitItem>
<VerticalSplitItem>
### Detailed Explanation
The right column is wider — use this when the right side has the primary content.
</VerticalSplitItem>
</VerticalSplit>Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.