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.
Egnet til:
- Gjemme elementer basert på brekkpunkt
- Gjemme sidebar på desktop
- Gjemme menypunkt header på desktop
Uegnet til:
- Gjemme elementer basert på state
Eksempler
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? "sm" | "md" | "lg" | "xl"
- @example above='md'
- below? "sm" | "md" | "lg" | "xl"
- @example below='md'
- as?"div" | "span"
- Overrides html-tag
- className? string
- ref? Ref<HTMLDivElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Hide extends HTMLDivElement