Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Primitives

HStack

Oppdatert 6. september 2023
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

    Intro

    HStack er en layout-komponent for å horisontalt gruppere elementer sammen med riktig spacing.

    Egnet til:

    • Gruppering av skjema-elementer
    • Gruppering av Tags
    • Gruppering av Cards

    Uegnet til:

    • Oppbygging av større side-layout

    Eksempler

    HStack er en enkel layout-komponent for flexbox.

    Åpne eksempel i nytt vindu

    Som standard er 'wrap' satt til 'true'.

    Endrer 'align-items'.

    Endrer 'justify-content'.

    Med responsive gap kan man redusere/øke mellomrom basert på brekkpunktene våre. Implementasjonen er mobile-first, slik at man 'sm: 8' vil sette gap for 'md', 'lg' og 'xl' også.

    Ønsker du å endre fra 'row' til 'column' ved et brekkpunkt kan du bruke 'Stack'-komponenten. Husk å også oppdatere 'align' og 'justify' samtidig.

    Spacer lar deg lett legge inn automatisk stretch mellom elementer. Dette kan komme inn nyttig når man f.eks skal plassere knapper i 'InternalHeader'.

    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

    HStack

    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
    wrap? boolean
    flex-wrap
    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
    HStack extends HTMLDivElement

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack