Popover
Um container flutuante leve que aparece sobre a interface, geralmente usado para mostrar menus, dicas ou formulários pequenos.
Utilização
import { Popover, PopoverTrigger, PopoverContent } from "@convertcompany/ui";
Exemplos
Customizando o lado
Você pode personalizar o lado de saída do popover usando a propriedade side. Os valores disponíveis são: top, bottom, left e right.
Além disso você pode personalizar o espaçamento entre o popover e o trigger usando a propriedade sideOffset.
Âncoras
Você pode alterar a âncora do popover usando a propriedade align. Os valores disponíveis são: start, center e end. Isso altera o alinhamento do popover em relação ao trigger.
Headless
O componente HeadlessPopoverContent é uma versão mais flexível do PopoverContent, permitindo que você estilize o popover de acordo com suas necessidades. Você pode usar qualquer classe CSS ou estilo inline para personalizar a aparência do popover.
Props
Esse componente extende a implementação do Radix UI, e por isso, possui as mesmas propriedades. Para mais detalhes, consulte a documentação oficial.
Popover
| Propriedade | Tipo |
|---|---|
| childrenComponentes filhos como o gatilho e o conteúdo. | ReactNode |
PopoverTrigger
| Propriedade | Tipo |
|---|---|
| asChildPermite renderizar o trigger como um elemento filho. | boolean |
PopoverContent, HeadlessPopoverContent
| Propriedade | Tipo |
|---|---|
| alignAlinhamento horizontal do popover em relação ao trigger. | start center end |
| sideLado de saída do popover em relação ao trigger. | top bottom left right |
| sideOffsetEspaçamento entre o trigger e o popover. | number |
| classNameClasse CSS adicional. | string |
| childrenConteúdo do popover. | ReactNode |