Scission verticale
5 min
Fractionnement vertical organise le contenu en deux colonnes côte à côte. Elles sont utiles pour des comparaisons, des mises en page avec des informations de soutien ou pour présenter du code avec des explications.
Syntaxe
Vous pouvez ajouter ce composant en utilisant soit Markdown soit MDX.
:::::VerticalSplit{layout="middle"}
::::VerticalSplitItem
Left content.
::::
::::VerticalSplitItem
Right content.
::::
:::::Les blocs Vertical Split prennent en charge trois options de mise en page :
- gauche, crée une colonne de gauche plus large.
- milieu, crée deux colonnes de taille égale.
- droite, crée une colonne de droite plus large.
Chaque mise en page nécessite exactement deux VerticalSplitItem blocs.
Exemple MDX
Les exemples suivants démontrent les trois options de mise en page disponibles.
Colonnes égales (milieu)
<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>Disposition dominante à gauche (gauche)
<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>Disposition dominante à droite (droite)
<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.