Vi bruker cookies

Nødvendige informasjonskapsler sørger for at nettstedet fungerer og er sikkert, og kan ikke velges bort. Andre brukes til statistikk og analyse. Godkjenner du alle, hjelper du oss å lage bedre nettsider og tjenester. Mer om våre informasjonskapsler.

Aksel

Meny

Hide

Oppdatert Stabil
GithubYarnEndringslogg

Intro

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

Egnet til:

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

Uegnet til:

  • Gjemme elementer basert på state

Har du innspill til komponenten?

Send forslag

Eksempler

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

SandboxSandbox
Åpne eksempel i nytt vindu

Retningslinjer

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

Props

Hide

above?

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

below?

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

as?

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

asChild?

  • Type:
    boolean
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description: