Intro
Hide gjør det enkelt å gjemme 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 Hide + 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.
Hide gjør det enklere å konsistent utføre layout-endringer ved konkrete brekkpunkt
Show/Hide fungerer bra til dynamisk endring av sidelayout basert på brekkpunkt sammen med HGrid
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
Hide 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. Hide vil derfor ikke være en erstatning for lazy-loading av lengre lister med elementer, men en utility for å ikke vise elementer.
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
ref?
- Type:
LegacyRef<HTMLDivElement> - Description: