Komponenter
Show
Show er en av våre layout primitives. Komponenten gjør det enkelt å vise elementer ved bestemte brekkpunkt.
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
<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
tonull
(or call the ref withnull
if you passed a callback ref). React Docs