ExpandablePanel

ExpandablePanel é um componente versátil que permite que o conteúdo seja recolhível, melhorando a organização da interface ao ocultar conteúdo que não é imediatamente relevante para o usuário. Este componente pode operar em modo controlado ou não controlado, com recursos adicionais como um modo invisível para uma interface mais sutil e um modo de campo opcional para alinhar com o estilo dos campos de formulário.

Uso

Para usar o ExpandablePanel, importe-o dos seus componentes e forneça as props necessárias incluindo title, children e props de controle como expanded, onExpandedChange e props de estilo como titleClassName, className.

ExpandablePanel básico

Um exemplo mostrando o uso básico do 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 como campo

Esta variante mostra o ExpandablePanel utilizado como campo em um formulário, demonstrando a combinação da propriedade 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 invisível

Um exemplo de ExpandablePanel onde as bordas do painel são invisíveis para uma integração mais suave com a interface circundante.

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