Comprimi (Collapse)

I componenti Collapse sono usati per mostrare e nascondere contenuti. L’animazione React viene usata per la transizione. Usalo per alternare la visibilità dei contenuti.

Utilizzo

Per usare il Collapse, devi importarlo da dove è definito, passare i figli da mostrare all’interno del componente collapse e controllare il suo stato aperto. Opzionalmente, puoi anche personalizzare la durata dell’animazione.

Collapse di base

Un esempio semplice di come usare il 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 con durata personalizzata

Illustra come usare una durata personalizzata per l’animazione di collasso.

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