División vertical
5 min
División vertical organiza el contenido en dos columnas una al lado de la otra. Es útil para comparaciones, diseños con información de apoyo o para presentar código junto con explicaciones.
Sintaxis
Usted puede agregar este componente usando ya sea Markdown o MDX.
:::::VerticalSplit{layout="middle"}
::::VerticalSplitItem
Left content.
::::
::::VerticalSplitItem
Right content.
::::
:::::Los bloques de División Vertical admiten tres opciones de diseño:
- izquierda, crea una columna izquierda más ancha.
- medio, crea dos columnas de igual tamaño.
- derecha, crea una columna derecha más ancha.
Cada diseño requiere exactamente dos VerticalSplitItem bloques.
Ejemplo en MDX
Los siguientes ejemplos demuestran las tres opciones de diseño disponibles.
Columnas Iguales (medio)
<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>Diseño con Mayor Peso a la Izquierda (izquierda)
<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>Diseño con Mayor Peso a la Derecha (derecha)
<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.