Muestra contenido flotante centrado en un elemento disparador (trigger). Ideal para configuraciones rápidas o detalles adicionales.
Trigger · Floating Content · Alignment
Importa los estilos base y los componentes del Popover.
1import 'nave-ui-library/styles.css'2import { Popover, PopoverTrigger, PopoverContent } from 'nave-ui-library/react'Un uso muy común es utilizar el Popover para ajustes rápidos que no requieren navegación completa.
Controla la posición del Popover respecto al trigger usando side y align.
Props principales del Popover y PopoverContent.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenreq | ReactNode | — | Trigger y Content del popover. |
open | boolean | — | Controla la apertura (controlled mode). |
onOpenChange | (open: boolean) => void | — | Callback al cambiar visibilidad. |
align | "start" | "center" | "end" | "center" | Alineación del contenido respecto al trigger. |
side | "top" | "right" | "bottom" | "left" | "bottom" | Lado de aparición del popover. |
sideOffset | number | 4 | Distancia en px desde el trigger. |
1{2 "name": "Popover",3 "description": "Popover para mostrar contenido flotante.",4 "component": "Popover",5 "files": [6 "components/base/data-display/overlays/Popover.tsx"7 ],8 "dependencies": [9 "react",10 "@radix-ui/react-popover"11 ],12 "props": {13 "defaultOpen": {14 "type": "boolean",15 "description": "Estado inicial del popover (modo no controlado)."16 },17 "onOpenChange": {18 "type": "(open: boolean) => void",19 "description": "Callback cuando cambia el estado del popover."20 },21 "align": {22 "type": "'start' | 'center' | 'end'",23 "default": "center",24 "description": "Alineación horizontal respecto al trigger."25 },26 "side": {27 "type": "'top' | 'right' | 'bottom' | 'left'",28 "default": "bottom",29 "description": "Lado donde se posiciona el popover."30 },31 "sideOffset": {32 "type": "number",33 "default": 4,34 "description": "Distancia en píxeles desde el trigger al popover."35 },36 "alignOffset": {37 "type": "number",38 "default": 0,39 "description": "Offset adicional en el eje de alineación."40 },41 "avoidCollisions": {42 "type": "boolean",43 "default": true,44 "description": "Evita que el popover se salga del viewport."45 },46 "collisionPadding": {47 "type": "number | { top?: number; right?: number; bottom?: number; left?: number }",48 "description": "Padding interno del viewport para colisiones."49 },50 "sticky": {51 "type": "'partial' | 'always'",52 "default": "partial",53 "description": "Define comportamiento cuando no hay espacio suficiente."54 }55 }56}