Intro
Show gjør det enkelt å vise elementer ved bestemte brekkpunkt. Hvis brukt sammen med HGrid eller andre Primitives er det enklere å lage gode responsive løsninger.
Eksempler
Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Show + child-komponent skal fungere må child kunne ta inn 'className' og 'style' som prop.
Endre størrelse på nettleservindu for å se komponent i aksjon
Vi anbelfaler konsistent bruk av 'above' og 'below' for bedre lesbarhet.
Show/Hide fungerer bra til dynamisk endring av sidelayout basert på brekkpunkt sammen med HGrid
Show gjør det enklere å konsistent utføre layout-endringer ved konkrete brekkpunkt
Varianter
Above/Below
Når du må vise og skjule elementer i samme komponent, anbefaler vi at man bruker above eller below konsistent. Dette gjør koden enklere å raskt scanne og vedlikeholde.
Retningslinjer
Show fjerner display: none på predefinerte brekkpunkt. Som standard vil innholdet være skjult frem til det gitte brekkpunktet er truffet.
Children som ikke er vist vil fortsatt rendres i dom. Show vil derfor ikke være en erstatning for lazy-loading av lengre lister med elementer, men en utility for å vise elementer ved gitte skjermbredder.
Props
Show
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
ref?
- Type:
LegacyRef<HTMLDivElement> - Description: