Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Primitives

Hide

Oppdatert 11. september 2023
GithubYarnEndringslogg

    Beta

    Komponenten er under utvikling, men klar for adopsjon. Vi ønsker gjerne innspill på hvordan den fungerer og hvilke forbedringer vi kan gjøre.

    Send innspill

    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

    Åpne eksempel i nytt vindu

    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

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack