Une primitive de mise en page qui peut être utilisée pour créer une pile verticale ou horizontale d'éléments.

Utilisation

import { Stack } from '../components/ui/stack'

export const Example = () => (
  <Stack direction="row" gap="4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </Stack>
)

Constructeur de pages CMS

Ce composant est disponible sous forme de bloc stack dans Page Builder (content/pages/*.json) :

{
  "type": "stack",
  "direction": "horizontal",
  "gap": "4",
  "children": [
    { "type": "text", "content": "Item 1" },
    { "type": "text", "content": "Item 2" }
  ]
}

Propriétés

Propriété	Type	Défaut	Description
direction	flex-direction	column	La direction de flexion de la pile.
gap	spacing	8px	L'écart entre les éléments de la pile.
align	align-items	-	L'alignement des éléments dans la pile.
justify	justify-content	-	La justification des éléments dans la pile.

Réactivité

Le composant Stack prend en charge les valeurs réactives pour tous ses accessoires.

<Stack direction={{ base: 'column', md: 'row' }} gap={{ base: '4', md: '8' }}>
  {/* Elements will be stacked vertically on mobile and horizontally on desktop */}
</Stack>