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
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.currenttonull(or call the ref withnullif you passed a callback ref). React Docs