Popover (Aviso emergente)

El componente Popover te permite hacer flotar un panel de contenido anclado a otro elemento, perfecto para menús contextuales, tarjetas al pasar el cursor (hover cards), información sobre herramientas (tooltips) y mucho más.

Uso

Para usar Popover, impórtalo desde tus componentes y pasa las props requeridas trigger (disparador) y las opciones open (abierto), onOpenChange (al cambiar apertura), side (lado), sideOffset (desplazamiento lateral), align (alinear), alignOffset (desplazamiento de alineación), arrowPadding (relleno de flecha), sticky (pegajoso), hideWhenDetached (ocultar cuando se separa), avoidCollisions (evitar colisiones), enabled (habilitado) y modal.

Popover básico

Un popover simple que se muestra al hacer clic en el elemento disparador.

import React from "react";
import { Button, Popover } from "@firecms/ui";

export default function PopoverBasicDemo() {
    return (
        <Popover
            trigger={<Button>Open Popover</Button>}
        >
            <div className="p-4">
                This is a basic Popover.
            </div>
        </Popover>
    );
}

Popover con alineación

Mostrando cómo alinear el contenido del popover en relación con el elemento disparador.

import React from "react";
import { Button, Popover } from "@firecms/ui";

export default function PopoverAlignDemo() {
    return (
        <div>
            <Popover
                trigger={<Button>Open Left</Button>}
                side="left"
            >
                <div className="p-4">
                    Aligned to the left.
                </div>
            </Popover>
            <Popover
                trigger={<Button>Open Bottom</Button>}
                side="bottom"
            >
                <div className="p-4">
                    Aligned to the bottom.
                </div>
            </Popover>
        </div>
    );
}

Popover controlado

Demuestra el uso de las props open y onOpenChange para un comportamiento controlado.

import React, { useState } from "react";
import { Button, Popover } from "@firecms/ui";

export default function PopoverControlledDemo() {
    const [open, setOpen] = useState(false);

    return (
        <Popover
            trigger={<Button onClick={() => setOpen(!open)}>Toggle Popover</Button>}
            open={open}
            onOpenChange={setOpen}
        >
            <div className="p-4">
                This Popover's visibility is controlled externally.
            </div>
        </Popover>
    );
}

Uso con estilo personalizado

Ilustrando el estilo personalizado aplicado al contenido del popover.

import React from "react";
import { Button, Popover } from "@firecms/ui";

export default function PopoverStyledDemo() {
    return (
        <Popover
            trigger={<Button>Open Custom Styled Popover</Button>}
            className="bg-purple-500 text-white p-3 rounded-lg shadow-lg"
        >
            <div>
                This Popover has custom styles applied.
            </div>
        </Popover>
    );
}