Popover

Die Popover-Komponente ermöglicht es Ihnen, ein Content-Panel schwebend an einem anderen Element zu verankern, ideal für Kontextmenüs, Hover-Karten, Tooltips und vieles mehr.

Verwendung

Um Popover zu verwenden, importieren Sie es aus Ihren Komponenten und übergeben Sie den erforderlichen trigger und die optionalen Props open, onOpenChange, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, enabled und modal.

Einfaches Popover

Ein einfaches Popover, das beim Klicken auf das Trigger-Element angezeigt wird.

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 mit Ausrichtung

Zeigt, wie der Popover-Inhalt relativ zum Trigger-Element ausgerichtet wird.

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

Gesteuertes Popover

Demonstriert die Verwendung der Eigenschaften open und onOpenChange für gesteuertes Verhalten.

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

Verwendung mit benutzerdefiniertem Styling

Veranschaulicht benutzerdefiniertes Styling, das auf den Popover-Inhalt angewendet wird.

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