Hoja (Sheet)

El componente Sheet (Hoja) se utiliza para mostrar paneles deslizantes desde los bordes de la pantalla. Puede abrirse desde arriba, abajo, izquierda o derecha, y puede ser opaco o transparente.

Uso

Para usar Sheet, impórtalo desde tus componentes y pasa las props open (abierto), side (lado), transparent (transparente) y onOpenChange (al cambiar apertura).

Hoja básica

Una hoja simple que se desliza desde la derecha.

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

Hoja desde la parte superior

Este ejemplo demuestra una hoja que se desliza desde la parte superior (top).

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

Hoja transparente

Esta hoja está configurada 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>
    );
}