Komponenter
Hide
Hide er en av våre layout primitives. Komponenten gjør det enkelt å gjemme elementer ved bestemte brekkpunkt.
StabilOppdatert 9. mai 2025
Egnet til:
- Gjemme elementer basert på brekkpunkt
- Gjemme sidebar på desktop
- Gjemme menypunkt i header på desktop
Uegnet til:
- Gjemme elementer basert på state
Eksempler
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" - 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.currenttonull(or call the ref withnullif you passed a callback ref). React Docs