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
Vurder noe annet:
- Når funksjonaliteten kan erstattes med Tooltip
- Når det blir mye informasjon, som fungerer dårlig på mindre flater
Har du innspill til komponenten?
Send forslagEksempler
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
- className? string
- ref? Ref<HTMLDivElement>
- Popover extends HTMLDivElement
Popover.Content
- children ReactNode
- Modal.Content content
- className? string
- ref? Ref<HTMLDivElement>
- Popover.Content extends HTMLDivElement
Tokens
| Token | Fallback |
| --ac-popover-bg | --a-surface-default |
| --ac-popover-border | --a-border-default |