Ausklappbares Panel (ExpandablePanel)

ExpandablePanel ist eine vielseitige Komponente, die es ermöglicht, Inhalte einklappbar zu machen. Dadurch wird die Organisation der Benutzeroberfläche verbessert, indem Inhalte ausgeblendet werden, die für den Benutzer nicht unmittelbar relevant sind. Diese Komponente kann im gesteuerten (controlled) oder ungesteuerten (uncontrolled) Modus arbeiten, mit zusätzlichen Funktionen wie einem unsichtbaren Modus für eine subtilere UI und einem optionalen Feldmodus (asField), um sich an das Styling von Formularfeldern anzupassen.

Verwendung

Um das ExpandablePanel zu verwenden, importieren Sie es aus Ihren Komponenten und übergeben Sie die erforderlichen Props einschließlich title, children sowie Steuerungs-Props wie expanded und onExpandedChange und Styling-Props wie titleClassName, className.

Einfaches ausklappbares Panel

Ein Beispiel, das die grundlegende Verwendung der Komponente ExpandablePanel zeigt.

import React, { useState } from "react";
import { ExpandablePanel } from "@firecms/ui";

export default function ExpandablePanelBasicDemo() {
    const [expanded, setExpanded] = useState(false);

    return (
        <ExpandablePanel
            title={"Click to expand"}
            expanded={expanded}
            onExpandedChange={setExpanded}
        >
            <div className={"p-4"}>
                Here is some content that was hidden but now is visible!
            </div>
        </ExpandablePanel>
    );
}

Ausklappbares Panel als Feld

Diese Variante zeigt das ExpandablePanel, das als Feld in einem Formular verwendet wird, und demonstriert die Kombination aus der Eigenschaft asField.

import React, { useState } from "react";
import { ExpandablePanel } from "@firecms/ui";

export default function ExpandablePanelFieldDemo() {
    const [expanded, setExpanded] = useState(false);

    return (
        <ExpandablePanel
            title={"Field Expandable Panel"}
            expanded={expanded}
            onExpandedChange={setExpanded}
            asField={true}
        >

            <div className={"p-4"}>
                This Expandable Panel is styled as a field, making it a great choice for forms.
            </div>
        </ExpandablePanel>
);
}

Unsichtbares ausklappbares Panel

Ein ExpandablePanel-Beispiel, bei dem die Panelränder unsichtbar gemacht werden, um eine nahtlosere Integration in die umgebende UI zu erreichen.

import React, { useState } from "react";
import { ExpandablePanel } from "@firecms/ui";

export default function ExpandablePanelInvisibleDemo() {
    const [expanded, setExpanded] = useState(false);

    return (
        <ExpandablePanel
            title={"Invisible Expandable Panel"}
            expanded={expanded}
            onExpandedChange={setExpanded}
            invisible={true}
        >
            <div className={"p-4"}>
                This content is hidden inside an invisible panel, making the UI cleaner.
            </div>
        </ExpandablePanel>
    );
}