Hopp til innhold
Aksel

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
GithubEndringslogg

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

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"
  • Description:

    Will show/hide element above breakpoint (inclusive)

below?

  • Type:
    "sm" | "md" | "lg" | "xl" | "2xl"
  • 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

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