Aksel

Meny

Komponenter / Primitives

VStack

Oppdatert
GithubYarnEndringslogg

Beta

Komponenten er under utvikling, men klar for adopsjon. Vi ønsker gjerne innspill på hvordan den fungerer og hvilke forbedringer vi kan gjøre.

Send innspill

VStack er en layout-komponent for å vertikalt gruppere elementer sammen med riktig spacing.

Egnet til:

  • Gruppering av skjema-elementer

Uegnet til:

  • Oppbygging av større side-layout

Eksempler

VStack er en enkel layout-komponent for flexbox med flex-direction: column.

Åpne eksempel i nytt vindu

Varianter

Gap

For spacing bruker vi et nytt api ResponsiveProp. Dette lar deg sette en statisk verdi basert på tokens fra Aksel, eller verdier som bare brukes på spesifikke brekkpunkt.

Props

VStack

as? React.ElementType
OverridableComponent-api
justify? "start" | "center" | "end" | "space-around" | "space-between" | "space-evenly"
Justify-content
align? "start" | "center" | "end" | "baseline" | "stretch"
Align-items
gap? ResponsiveProp<SpacingScale>
@example gap='4' gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
className? string
ref? Ref<HTMLDivElement>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
VStack extends HTMLDivElement