Aksel

Meny

Komponenter / Core

Popover

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

Popover er et skjult panel koblet til et element. Popoveren vil legge seg over alle andre elementer i grensesnittet. Du styrer selv når og hvordan den skal vises og skjules.

Egnet til:

  • Å vise informasjon om elementer eller situasjoner.

Uegnet til:

  • Å beskrive handlinger eller elementer (se Tooltip).
  • Mye innhold.
  • Vise innhold ved hover.

Har du innspill til komponenten?

Send forslag

Eksempler

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

SandboxSandbox
Åpne eksempel i nytt vindu

Komponenten brukes i

Retningslinjer

Ikke åpne på hover

Popover kan ikke åpnes på :hover i dag. For å støtte dette vil interaksjonen og oppførselen til komponenten være så ulik dagens Popover, at dette i praksis vil være en ny komponent.

Det er også en teknisk begrensning med at dagens løsning ikke kan brukes sammen med “inline” innhold som f.eks. lenker i løpende tekst. Vi ønsker heller å utvikle en egen komponent som løser hover bra for dette, så hvis det er noe du eller teamet ditt trenger ønsker vi gjerne tilbakemelding på det!

Tilgjengelighet

Elementet som åpner popoveren bør bruke aria-expanded=true/false for å indikere om den er åpen eller ikke.

Interaksjon med skjermleser

Popoveren bør helst ligge rett etter elementet som åpner den i DOM-en.

Props

Popover benytter seg av Floating UI.

Popover

children

  • Type:
    ReactNode
  • Description:

anchorEl

  • Type:
    Element | null
  • Description:

open

  • Type:
    boolean
  • Description:

onClose

  • Type:
    () => void
  • Description:

placement?

  • Type:
    "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
  • Default:
    "top"
  • Description:

arrow?

  • Type:
    boolean
  • Default:
    true
  • Description:

offset?

  • Type:
    number
  • Default:
    16 w/arrow, 4 w/no-arrow
  • Description:

strategy?

  • Type:
    "absolute" | "fixed"
  • Default:
    "absolute"
  • Description:

flip?

  • Type:
    boolean
  • Default:
    true
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

Popover.Content

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

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.

Relaterte komponenter