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.
Egnet til:
- Visning av elementer basert på brekkpunkt
- Visning av sidebar på desktop
- Visning av menypunkt header på desktop
Uegnet til:
- Visning av 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.
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? "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
- Show extends HTMLDivElement