Uansett valg deler vi aldri dine data med andre. Mer om informasjonskapsler på aksel.nav.no

  • Godta alle: Hjelper oss gjøre tjenestene bedre for deg basert på anonymisert bruk.
  • Bare nødvendige: Sikrer at tjenesten fungerer og er trygg. Kan ikke velges bort.
Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

Show

Show er en av våre layout primitives. Komponenten gjør det enkelt å vise elementer ved bestemte brekkpunkt.

StabilOppdatert 9. mai 2025

Egnet til:

  • Vise elementer basert på brekkpunkt
  • Vise sidebar på desktop
  • Vise menypunkt i header på desktop

Uegnet til:

  • Vise elementer basert på state

Eksempler

Endre størrelsen på eksempelvinduet for å se komponenten i aksjon. Les mer om asChild her.

Sandbox
Åpne eksempel i nytt vindu
TSX
<HGrid columns={2} gap="4">
<Placeholder text="Alltid synlig" />
<Show below="md" asChild>
<Placeholder desktop text="Synlig bare på mobil" />
</Show>
</HGrid>

Retningslinjer

Show fungerer ved å sette display: none. Det betyr at children som ikke vises fortsatt vil rendres i DOM-en. Show er derfor ikke en erstatning for lazy-loading, men en utility for å vise elementer på spesifikke brekkpunkt.

Props

Show

above?

  • Type:
    "sm" | "md" | "lg" | "xl" | "2xl"
  • Default:
    "null"
  • Description:

    Will show/hide element above breakpoint (inclusive)

below?

  • Type:
    "sm" | "md" | "lg" | "xl" | "2xl"
  • Default:
    "null"
  • Description:

    Will show/hide element below breakpoint (inclusive)

as?

  • Type:
    "div" | "span"
  • Default:
    ""div""
  • Description:

    Overrides html-tag

asChild?

  • Type:
    boolean
  • Description:

    When true, will render element as its child. This merges classes, styles and event handlers.

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    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). React Docs