Stack
Stack forma parte del apartado «Layout y marca» del kit. Cards, contenedores, stacks, carruseles y las piezas de identidad del kit (Logo, Sello, olas).
Instalación#
bash
pnpm add @tsukira/uiUso#
tsx
import { Stack } from "@tsukira/ui"; export function Ejemplo() { return <Stack />;}Ejemplos#
Los ejemplos detallados de Stack están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.
Ver demo en Layout y marcaAPI#
StackPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'title'>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
direction | 'row' | 'column' | 'column' | Dirección del flow. Default 'column'. |
gap | StackGap | 4 (16px) | Gap entre items. Acepta tokens (1..16) o número px. Default 4 (16px). |
align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | — | Alineación cruzada (align-items). |
justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | — | Alineación principal (justify-content). |
wrap | 'nowrap' | 'wrap' | 'wrap-reverse' | 'nowrap' | Wrap. Default 'nowrap'. |
grow | boolean | — | Hace cada hijo flex:1. |
inline | boolean | — | Inline-flex en lugar de flex. |
as | 'div' | 'section' | 'header' | 'footer' | 'nav' | 'main' | 'article' | 'aside' | 'ul' | 'ol' | 'li' | — | — |