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
Eksempler
Popover kan kobles til de fleste typer elementer med bruk av ref.
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
| Token | Fallback |
|---|---|
| --ac-popover-bg | --a-surface-default |
| --ac-popover-border | --a-border-default |