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 / Core

Popover

Oppdatert 21. mars 2023Stabil
GithubYarn FigmaEndringslogg

    Intro

    Popover er et skjult panel koblet til et anker. Du styrer selv når det skal vises og brukes ofte som en popup for å fortelle brukeren om noe som har skjedd. Popoveren vil legge seg over alle andre elementer i grensesnittet.

    Egnet til:

    • Å vise ekstra informasjon om elementer eller situasjoner

    Uegnet til:

    • Å beskrive handlinger eller elementer (se Tooltip)
    • Mye informasjon

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Popover kan kobles til de fleste typer elementer med bruk av ref.

    Åpne eksempel i nytt vindu

    Varianter

    Plassering

    Popover tilbyr muligheten til å plassere den top, right, bottom og left relatert til ankeret. Disse orienteringene har også muligheten til å definere start/end, eks top-end. Vi anbefaler for det meste å holde seg til de 4 førstnevnte. Popover styrer selv plassering hvis den ikke har plass i ønsket retning.

    Arrow

    Popover kan brukes med eller uten pil, basert på ønsket variant.

    Offset

    Basert på bruk, kan offset overstyre standardverdiene. Eks for en popover med søketreff under et søkefelt ønskes kanskje 0px offset basert på designet.

    Padding

    Selve Popover-komponenten har ingen padding, men har en utility-komponent `Popover.Content` som legger på 16px padding om ønsket.

    Props

    Popover

    children ReactNode
    Popover content
    anchorEl Element | null
    Element popover anchors to
    open boolean
    Open state
    onClose () => void
    onClose callback
    placement?"top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
    Orientation for popover @note Try to keep general usage to "top", "bottom", "left", "right"
    arrow?boolean
    Adds a arrow from dialog to anchor when true
    offset?number
    Distance from anchor to popover
    strategy?"absolute" | "fixed"
    Changes what CSS position property to use You want to use "fixed" if reference element is inside a fixed container, but popover is not
    bubbleEscape?boolean
    Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
    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
    Popover extends HTMLDivElement

    Popover.Content

    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
    Popover.Content extends HTMLDivElement

    Tokens

    TokenFallback
    --ac-popover-bg--a-surface-default
    --ac-popover-border--a-border-default
    Hva er dette?

    Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

    © 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