Stack
Contêiner flex para compor layouts verticais e horizontais com controle de espaçamento.
Demonstração
Stack vertical (gap 3)
Item 1Item 2Item 3
Stack horizontal (gap 4)
Item 1Item 2Item 3
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
direction | 'horizontal' | 'vertical' | 'vertical' | componentPages.stack_prop_direction |
gap | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 0 | componentPages.stack_prop_gap |
align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | 'stretch' | componentPages.stack_prop_align |
justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'start' | componentPages.stack_prop_justify |
wrap | boolean | false | componentPages.stack_prop_wrap |
as | React.ElementType | 'div' | componentPages.stack_prop_as |
Uso
import { Stack } from '@ghiberti85/ui'
// Vertical stack
<Stack direction="vertical" gap={4}>
<Badge>Item 1</Badge>
<Badge>Item 2</Badge>
<Badge>Item 3</Badge>
</Stack>
// Horizontal stack with alignment
<Stack direction="horizontal" gap={3} align="center">
<Badge>Left</Badge>
<Badge>Center</Badge>
<Badge>Right</Badge>
</Stack>
// Wrapping horizontal stack
<Stack direction="horizontal" gap={2} wrap>
{items.map(item => <Badge key={item}>{item}</Badge>)}
</Stack>
// As a semantic element
<Stack as="ul" direction="vertical" gap={2}>
<li>Item 1</li>
<li>Item 2</li>
</Stack>