Collapse

Collapse est un composant de transition qui montre ou cache son contenu avec une animation fluide. Il est utile pour créer des sections repliables dans votre interface.

Utilisation

Importez Collapse depuis @firecms/ui et utilisez la prop in pour contrôler la visibilité du contenu.

Collapse de base

Un exemple basique du composant 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>
    );
}