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
Eksempler
Popover kan kobles til de fleste typer elementer med bruk av ref.
Her kan du teste ulike 'placement'-verdier. Legg merke til at Popover overstyrer valget hvis hvis det ikke er plass i den retningen.
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 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
- flip?boolean
- Changes placement of the floating element in order to keep it in view.
- 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
| Token | Fallback |
|---|---|
| --ac-popover-bg | --a-surface-default |
| --ac-popover-border | --a-border-default |
