Stack Stapel - Docs - Artefact

Stack Stapel

Layout

Rein darstellend

Ein Layout-Primitive, mit dem sich ein vertikaler oder horizontaler Stapel von Elementen erstellen lässt.

Verwendung

Item 1

Item 2

Item 3

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>
)

CMS-Seitenbauer

Diese Komponente ist als stack-Block im Seitenbauer (content/pages/*.json) verfügbar:

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

Eigenschaften

Eigenschaft	Typ	Standard	Beschreibung
`direction`	`flex-direction`	`column`	Die Flex-Richtung des Stapels.
`gap`	`spacing`	`8px`	Der Abstand zwischen den Elementen im Stapel.
`align`	`align-items`	-	Die Ausrichtung der Elemente im Stapel.
`justify`	`justify-content`	-	Die Ausrichtung der Elemente im Stapel (justify-content).

Responsives Verhalten

Die Stack-Komponente unterstützt responsive Werte für all ihre Props.

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