ExpandablePanel

Contenedor colapsable que alterna el cuerpo entre abierto y cerrado al hacer clic en el encabezado. El cuerpo anima su altura suavemente. Un ícono de chevron rota para indicar el estado actual. El contenido del encabezado y del cuerpo se proveen como funciones de render.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | renderHeader | () => ReactNode | Sí | — | Función que renderiza el contenido del encabezado. | | renderBody | () => ReactNode | Sí | — | Función que renderiza el contenido del cuerpo colapsable. | | collapsedIconDirection | 'down' \| 'right' | No | 'down' | Dirección del chevron cuando el panel está colapsado. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor externo. |

Uso

Básico

import ExpandablePanel from '@/components/ExpandablePanel';

export default function Example() {
  return (
    <ExpandablePanel
      renderHeader={() => <span>Información de Envío</span>}
      renderBody={() => (
        <div>
          <p>Envío estándar: 3–5 días hábiles</p>
          <p>Envío express: 1–2 días hábiles</p>
        </div>
      )}
    />
  );
}

Chevron hacia la derecha (estilo barra lateral)

import ExpandablePanel from '@/components/ExpandablePanel';

export default function Example() {
  return (
    <ExpandablePanel
      collapsedIconDirection="right"
      renderHeader={() => <strong>Configuración Avanzada</strong>}
      renderBody={() => (
        <div style={{ paddingTop: 10 }}>
          <label>
            <input type="checkbox" /> Activar modo debug
          </label>
        </div>
      )}
      containerStyle={{ borderBottom: '1px solid #eee', paddingBottom: 10 }}
    />
  );
}