Einklappen (Collapse)

Collapse-Komponenten werden verwendet, um Inhalte ein- und auszublenden. Für den Übergang wird eine React-Animation verwendet. Verwenden Sie sie, um die Sichtbarkeit von Inhalten umzuschalten.

Verwendung

Um Collapse zu verwenden, müssen Sie es importieren, untergeordnete Elemente (children) übergeben, die innerhalb der Collapse-Komponente angezeigt werden sollen, und den geöffneten Zustand (open state) steuern. Optional können Sie auch die Dauer der Animation anpassen.

Einfaches Einklappen

Ein einfaches Beispiel für die Verwendung der Collapse-Komponente.

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

Einklappen mit benutzerdefinierter Dauer

Veranschaulicht, wie eine benutzerdefinierte Dauer für die Einklapp-Animation verwendet wird.

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