Panel expandible (ExpandablePanel)

ExpandablePanel (Panel expandible) es un componente versátil que permite que el contenido sea plegable, mejorando la organización de la interfaz de usuario al ocultar contenido que no es inmediatamente relevante para el usuario. Este componente puede funcionar en modo controlado o incontrolado, con características adicionales como un modo invisible para una interfaz de usuario más sutil, y un modo de campo opcional para alinearse con el estilo de los campos de formulario.

Uso

Para usar el ExpandablePanel, impórtalo desde tus componentes y proporciona las props necesarias incluyendo title (título), children (elementos secundarios), y props de control como expanded (expandido), onExpandedChange (al cambiar estado expandido), y props de estilo como titleClassName (clase del título), className (clase CSS).

Panel expandible básico

Un ejemplo que muestra el uso básico 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>
    );
}

Panel expandible como campo

Esta variante muestra el ExpandablePanel utilizado como un campo en un formulario, demostrando la combinación de la propiedad asField (como campo).

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 expandible invisible

Un ejemplo de ExpandablePanel donde los bordes del panel se hacen invisibles para una integración más perfecta en la interfaz de usuario 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>
    );
}