ExpandablePanel

ExpandablePanel è un componente versatile che consente di rendere il contenuto comprimibile, migliorando l’organizzazione dell’interfaccia nascondendo contenuti non immediatamente rilevanti per l’utente. Questo componente può operare in modalità controllata o non controllata, con funzionalità aggiuntive come una modalità invisibile per un’interfaccia più sottile e una modalità campo opzionale per allinearsi allo stile dei campi del form.

Utilizzo

Per usare l’ExpandablePanel, importalo dai tuoi componenti e fornisci le prop necessarie tra cui title, children e prop di controllo come expanded, onExpandedChange e prop di stile come titleClassName, className.

ExpandablePanel di base

Un esempio che mostra l’utilizzo base del componente 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>
    );
}

ExpandablePanel come campo

Questa variante mostra l’ExpandablePanel utilizzato come campo in un form, dimostrando la combinazione della proprietà 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>
);
}

ExpandablePanel invisibile

Un esempio di ExpandablePanel dove i bordi del pannello sono resi invisibili per un’integrazione più fluida nell’interfaccia circostante.

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