Popover

Le composant Popover vous permet de faire flotter un panneau de contenu ancré à un autre élément, parfait pour les menus contextuels, les cartes de survol, les infobulles et bien plus encore.

Utilisation

Pour utiliser le Popover, importez-le depuis vos composants et passez les props requises trigger et optionnelles open, onOpenChange, side, sideOffset, align, alignOffset et d’autres.

Popover de base

Un popover simple qui s’affiche en cliquant sur l’élément déclencheur.

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 avec alignement

Montrant comment aligner le contenu du popover par rapport à l’élément déclencheur.

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 contrôlé

Démontre l’utilisation des props open et onOpenChange pour un comportement contrôlé.

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>
    );
}

Utilisation avec un style personnalisé

Illustration du style personnalisé appliqué au contenu du 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>
    );
}