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

HGrid

Oppdatert 4. 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

    HGrid brukes for å fordele elementer horisontalt med riktig spacing og dynamiskt basert på brekkpunktene våre. Løsningen er basert på CSS-grid.

    Egnet til:

    • Oppbygging av sidelayout
    • Gruppering av Cards

    Eksempler

    HGrid lar deg enkelt dele innholdet opp i kolonner. Basert på CSS-grid

    Åpne eksempel i nytt vindu

    Columns støtter både statisk antall kolonner med 'number' og mer fleksible kolonner med 'string'.

    Med responsive kolonner kan man dynamiskt tilpasse dem basert på brekkpunktene våre.

    Med responsiv gap kan man dynamiskt tilpasse spacing basert på brekkpunktene våre.

    Med responsiv gap kan man dynamiskt tilpasse spacing basert på brekkpunktene våre.

    Varianter

    Columns

    Bruker api-et `ResponsiveProp<number|string>`. Dette lar deg sette en statisk verdi basert på tokens fra Aksel, eller verdier som bare brukes på spesifikke brekkpunkt.

    Number

    Hvis du bruker `number` til å definer columns blir det automatisk omgjort til `repeat(<number>, minmax(0, 1fr))`.

    String

    Ønsker man mer kontroll kan du manuelt definere columns

    Gap

    Bruker api-et `ResponsiveProp<SpacingTokens>`.

    Props

    HGrid

    columns? ResponsiveProp<string | number>
    Number of columns to display. Can be a number, a string with a unit or tokens for spesific breakpoints. Sets `grid-template-columns`, so `fr`, `minmax` etc. works. @example columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}} @example columns={3} @example columns="repeat(3, minmax(0, 1fr))"
    gap? ResponsiveProp<SpacingScale>
    Spacing between columns. Based on spacing-tokens. @example gap="6" gap={{ sm: "2", md: "2", lg: "6", 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
    HGrid 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