ExpandablePanel

ExpandablePanel est un composant polyvalent qui permet au contenu d’être réductible, améliorant l’organisation de l’interface en masquant le contenu qui n’est pas immédiatement pertinent pour l’utilisateur.

Utilisation

Pour utiliser le ExpandablePanel, importez-le depuis vos composants et fournissez les props nécessaires incluant title, children et les props de contrôle comme expanded, onExpandedChange.

Panel extensible de base

Un exemple montrant l’utilisation de base du composant ExpandablePanel.

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

Panel extensible comme champ

Cette variante montre le ExpandablePanel utilisé comme un champ dans un formulaire, démontrant la combinaison avec la propriété 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>
);
}

Panel extensible invisible

Un exemple de ExpandablePanel où les bordures du panel sont rendues invisibles pour une intégration plus transparente dans l’interface.

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