Folha (Sheet)

O componente Sheet é usado para exibir painéis deslizantes das bordas da tela. Pode ser aberto do topo, inferior, esquerda ou direita, e pode ser opaco ou transparente.

Uso

Para usar o Sheet, importe-o dos seus componentes e passe as props open, side, transparent e onOpenChange.

Sheet básico

Um sheet simples que desliza da direita.

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 with Top Side

Este exemplo demonstra um sheet que desliza do topo.

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

Sheet transparente

Este sheet é configurado para ser transparente.

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