Colapsar (Collapse)

Los componentes de Colapsar (Collapse) se utilizan para mostrar y ocultar contenido. Se utiliza animación de React para la transición. Úsala para alternar la visibilidad del contenido.

Uso

Para usar Collapse, necesitas importarlo desde donde se define, pasar elementos secundarios (children) para que se muestren dentro del componente de colapso y controlar su estado abierto. Opcionalmente, también puedes personalizar la duración de la animación.

Colapso básico

Un ejemplo simple de cómo usar el componente Colapsar.

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

export default function CollapseBasicDemo() {
    const [isOpen, setIsOpen] = useState(true);

    return (
        <div className={"flex flex-col items-center gap-4"}>
            <Button onClick={() => setIsOpen(!isOpen)}>Toggle</Button>
            <Collapse in={isOpen}>
                <Paper className={"p-4"}>
                    Content to show or hide
                </Paper>
            </Collapse>
        </div>
    );
}

Colapso con duración personalizada

Ilustra cómo utilizar una duración personalizada para la animación de colapso.

import React, { useState } from "react";
import { Button, Collapse, Container, Paper } from "@firecms/ui";

export default function CollapseCustomDurationDemo() {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <div className={"flex flex-col items-center gap-4"}>
            <Button onClick={() => setIsOpen(!isOpen)}>Toggle</Button>
            <Collapse in={isOpen} duration={500}>
                <Paper className={"p-4"}>
                    This content has a custom animation duration.
                </Paper>
            </Collapse>
        </div>
    );
}