Recolher (Collapse)

Componentes Collapse são usados para mostrar e ocultar conteúdo. Animação React é usada para a transição. Use-o para alternar a visibilidade do conteúdo.

Uso

Para usar o Collapse, você precisa importá-lo de onde está definido, passar os filhos a serem exibidos dentro do componente de colapso e controlar seu estado aberto. Opcionalmente, você também pode personalizar a duração da animação.

Collapse básico

Um exemplo simples de como usar o componente Collapse.

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

Collapse com duração personalizada

Ilustra como usar uma duração personalizada para a animação 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>
    );
}