Popover
Painel flutuante baseado em Radix UI. Suporta 4 lados, seta e animação de abertura/fechamento.
Demonstração
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
side | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | Side of the trigger to render the popover. |
align | 'start' | 'center' | 'end' | 'center' | Alignment of the popover relative to the trigger. |
sideOffset | number | 8 | Distance from the trigger in pixels. |
showArrow | boolean | false | Show an arrow pointing to the trigger. |
Uso
import { Popover, PopoverTrigger, PopoverContent, PopoverClose } from '@ghiberti85/ui'
<Popover>
<PopoverTrigger asChild>
<Button>Open</Button>
</PopoverTrigger>
<PopoverContent side="bottom" align="center" showArrow>
<p>Popover content goes here.</p>
<PopoverClose asChild>
<Button variant="ghost" size="sm">Close</Button>
</PopoverClose>
</PopoverContent>
</Popover>