Popover

Shows rich content in a panel next to its trigger, such as a few settings or a small form. DialogClose and useDialog work inside a popover too, to close it from its content.

Popover.tsx

import {
  DialogClose,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Switch,
  Text
} from 'alinea/components'
import {IcRoundVisibility} from 'alinea/dashboard/icons'

export function PopoverExample() {
  return (
    <Popover>
      <PopoverTrigger variant="outline" icon={IcRoundVisibility}>
        Visibility
      </PopoverTrigger>
      <PopoverContent side="bottom" align="start" aria-label="Visibility">
        <div style={{display: 'grid', gap: 10, justifyItems: 'start'}}>
          <Text size="sm" color="muted">
            Choose where this entry is shown.
          </Text>
          <Switch defaultChecked>In navigation</Switch>
          <Switch>In search results</Switch>
          <DialogClose size="sm">Done</DialogClose>
        </div>
      </PopoverContent>
    </Popover>
  )
}

Props

`<Popover>`

PropTypeDefaultDescription

modalbooleanDefault trueWhether interaction outside the popover is blocked while it is open. Defaults to true.

openbooleanDefault –

defaultOpenbooleanDefault –

onOpenChange(open: boolean) => voidDefault –

`<PopoverTrigger>`

Accepts every prop of Button.

`<PopoverAnchor>`

Positions the PopoverContent against this element instead of the PopoverTrigger

PropTypeDefaultDescription

asChildbooleanDefault –Render the child element as the anchor instead of a div

virtualRefRefObject<Element | null>Default –Position against an element rendered elsewhere, the anchor then renders only its children (if any)

Also accepts className and style and data-* attributes.

`<PopoverContent>`

PropTypeDefaultDescription

onInteractOutside(event: Event) => voidDefault –Called on a click outside of the popover, call event.preventDefault() to keep the popover open. The page is covered while a modal popover is open, so event.target is that cover rather than the element below it.

sideSideDefault –

alignAlignDefault –

sideOffsetnumberDefault –

alignOffsetnumberDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

Accessibility

Focus moves into the popover when it opens and back to the trigger when it closes. A popover is modal by default: the rest of the page can't be reached until it closes. Set modal={false} to keep the page interactive.