Blatt (Sheet)

Die Sheet-Komponente wird verwendet, um gleitende Panels von den Rändern des Bildschirms aus anzuzeigen. Sie können von oben, unten, links oder rechts geöffnet werden und können entweder undurchsichtig oder transparent sein.

Verwendung

Um Sheet zu verwenden, importieren Sie es aus Ihren Komponenten und übergeben Sie die Eigenschaften open, side, transparent und onOpenChange.

Einfaches Sheet

Ein einfaches Sheet (Blatt), das von rechts hereingleitet.

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

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

    return (
        <div>
            <Button onClick={() => setOpen(true)}>Open Sheet</Button>
            <Sheet open={open} onOpenChange={setOpen}>
                <div className={"bg-white dark:bg-surface-800 p-4 h-full"}>
                    Sheet Content
                </div>
            </Sheet>
        </div>
    );
}

Sheet von oben

Dieses Beispiel demonstriert ein Sheet, das von oben hereingleitet.

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

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

    return (
        <div>
            <Button onClick={() => setOpen(true)}>Open Top Sheet</Button>
            <Sheet open={open} onOpenChange={setOpen} side="top">
                <div className={"bg-white dark:bg-surface-800 p-4 w-full"}>
                    Sheet Content
                </div>
            </Sheet>
        </div>
    );
}

Transparentes Sheet

Dieses Sheet ist so konfiguriert, dass es transparent ist.

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

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

    return (
        <div>
            <button onClick={() => setOpen(true)}>Open Transparent Sheet</button>
            <Sheet open={open} onOpenChange={setOpen} transparent>
                <div style={{ padding: "1rem" }}>Transparent Sheet Content</div>
            </Sheet>
        </div>
    );
}