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 ekstra 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

Varianter

Plassering

Popover kan plasseres top, right, bottom og left relatert til elementet. Disse orienteringene har også muligheten til å definere start/end, for eksempel top-end. Se "placement"-eksempelet for en demonstrasjon.

Popover styrer selv plassering hvis den ikke har plass i ønsket retning. Dette kan overstyres ved å sette prop flip til false.

Arrow

Popover kan brukes med eller uten pil.

Offset

Offset er avstanden mellom elementet og popoveren, og kan overstyres.

Padding

Selve Popover-komponenten har ingen padding, men du kan bruke utility-komponenten Popover.Content som legger på 16px padding.

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