vaiperui

componentes / stack

Stack

Layout flex en una dirección con gap, alineación y divisor opcional.

Cómo usar

Alinea los hijos en vertical (por defecto) u horizontal. `direction` puede cambiar por breakpoint: `{ base: 'vertical', md: 'horizontal' }`. `divider` se renderiza entre cada par de hijos, nunca antes del primero ni después del último.

preview
1
2
3
Stack.tsx
import { Divider, Stack } from "vaiperui";
 
<Stack direction={{ base: "vertical", md: "horizontal" }} gap={3} align="center"
  divider={<Divider orientation="vertical" />}>
  <span>One</span>
  <span>Two</span>
</Stack>

Dirección

preview
1
2
3
vertical
1
2
3
horizontal
direccion.tsx
<Stack direction="vertical" />
<Stack direction="horizontal" />

Gap

preview
1
2
3
gap={0}
1
2
3
gap={1}
1
2
3
gap={2}
1
2
3
gap={4}
1
2
3
gap={8}
gap.tsx
<Stack direction="horizontal" gap={1} />
<Stack direction="horizontal" gap={8} />

Alineación y justify

preview
1
2
align="end"
1
2
3
justify="between"
alineacion.tsx
<Stack direction="horizontal" align="end" />
<Stack direction="horizontal" justify="between" />

Divider

preview
1
2
3
divider
divider.tsx
<Stack divider={<Divider />}>...</Stack>

Props

PropValoresPredeterminadoDescripción
directionvertical | horizontal | { base, sm, md, lg, xl }verticalEje principal, opcionalmente por breakpoint
gap0 | 1 | 2 | 3 | 4 | 6 | 84Espacio entre los hijos (pasos de 4px)
alignstart | center | end | stretch | baselineningunoAlineación en el eje cruzado (`align-items`)
justifystart | center | end | between | around | evenlyningunoDistribución en el eje principal (`justify-content`)
wrapbooleanfalseDeja que los hijos pasen a otra línea
dividerReactNodeningunoElemento renderizado entre los hijos
asElementType"div"Elemento o componente a renderizar (`section`, `ul`, `main`...)

Accesibilidad

  • Renderiza un `<div>` (flex) simple por defecto, sin rol; `as` cambia el elemento (por ejemplo `ul`, `nav`, `section`).
  • No añade foco, teclado ni comportamiento ARIA; las props extra llegan al elemento.
  • `direction` responsivo solo cambia la apariencia; el orden de lectura y de Tab sigue siendo el del DOM.
  • La prop `divider` se inserta entre los hijos tal como se pasa, así que un `Divider` ahí se anuncia como separador salvo que sea `decorative`.

Ten en cuenta

  • Con `as="ul"`, un divider entre los elementos pasa a ser un hijo del `ul` que no es `li`, lo que es HTML inválido.