Edifiko
Edifiko UIComponent Catalog
  • Overview
  • Base
  • Shared
Modules
  • Home
  • Users
  • Suppliers
  • Auth
  • Categories
  • Material Catalog
  • Configuration
  • Works
  1. Component Catalog
  3. Shared
  5. section-heading
Shared/Section Heading

Section Heading

Componente de cabecera para secciones y páginas internas. Soporta dos tamaños, dos justificaciones y tres tipos (`primary`, `secondary` y `tertiary`). Para `headingSize="small"`, permite acciones icon-only con `actionsSmall`.

Guía de uso por tamaño:

  • headingSize="large" — Para las cabeceras de secciones principales (ej: "Materiales", "Categorías"). Tipografía prominente (text-4xl), sin breadcrumbs.
  • headingSize="small" — Para las cabeceras de páginas internas (ej: "Editar material", "Detalle de categoría"). Tipografía compacta (text-xl). - Si type="secondary", muestra breadcrumbs y un botón de volver a la izquierda del contenedor título/descripcion. En este tamaño es **icon-only**. - Si type="primary" o type="tertiary", usa actionsSmall para renderizar acciones icon-only.

Props clave (comportamiento real)

PropQué hace
`type`- `primary`: cabecera sin breadcrumbs/back.
- `secondary`: cabecera con breadcrumbs y botón back.
- `tertiary`: cabecera compacta con acciones icon-only.
`headingSize`- `large`: tipografía grande y el botón back (si aplica) incluye texto.
- `small`: tipografía compacta y el back (si aplica) es un botón secundario **icon-only**.
`actions`Se renderiza cuando `headingSize="large"` (y también en centered).
`actionsSmall`Cuando `headingSize="small"`, reemplaza `actions` para `type="primary"` y `type="secondary"`. En `type="tertiary"` se prioriza `actionsSmall` (icon-only).
`breadcrumbs`Solo se renderiza en `type="secondary"` (izquierda).
`onBack`Solo se usa en el botón back de `type="secondary"`.

Nota: para icon-only actions, hoy se puede disparar un dropdown envolviendo el `Button` con `DropdownMenu` dentro de `actionsSmall`. `SectionHeading` no expone un prop/hook específico para dropdown (pendiente de estandarización).

Primary · Centrado · Large

Para hero sections o cabeceras de secciones principales. CTAs opcionales dentro del bloque de contenido.

Gestión de Materiales

Catálogo de Materiales

Administrá el inventario completo de materiales de construcción. Importá, editá y gestioná toda la información desde un único lugar.

Primary · Centrado · Small

Variante compacta centrada para secciones secundarias o paneles con cabecera más discreta.

Gestión de Materiales

Filtros y búsqueda

Encontrá materiales por categoría, proveedor o código de referencia.

Primary · Izquierda · Large

Cabecera principal alineada a la izquierda. Heading y CTAs en la misma fila (flex-wrap en móvil).

Sección principal

Categorías de Materiales

Organizá los materiales en categorías y subcategorías para facilitar la búsqueda y la gestión del inventario.

Primary · Izquierda · Small

Cabecera interna alineada a la izquierda. Para `headingSize='small'` se renderizan acciones icon-only usando `actionsSmall`.

Materiales de construcción

Detalles del material

Visualizá y editá la información completa del material seleccionado.

Secondary · Izquierda · Small

Páginas internas (`type='secondary'` + `headingSize='small'`): back icon-only a la izquierda, sin breadcrumbs. Las acciones icon-only se renderizan vía `actionsSmall`.

Editar material

Modificá los datos del material. Los cambios se guardarán en el catálogo.

Secondary · Izquierda · Large (con breadcrumbs + back con texto)

`type='secondary'` + `headingSize='large'`: back icon-only a la izquierda, breadcrumbs visibles y acciones textuales (slot `actions`).

  1. Materiales
  3. Categorías
  5. Editar material

Editar material

Modificá los datos del material. Los cambios se guardarán en el catálogo.

Tertiary · Izquierda · Small

Tipo compacto (`type='tertiary'`) para acciones icon-only. Usa `actionsSmall` y no renderiza back/breadcrumbs.

Operaciones avanzadas

Acciones rápidas con icon-only (y dropdown opcional).

Tertiary · Izquierda · Large

Versión grande (`headingSize='large'`) de `type='tertiary'`: usa `actionsSmall` para acciones icon-only.

Operaciones avanzadas

Acciones icon-only en una cabecera de mayor jerarquía.

Tertiary · Izquierda · Small (botones expandidos)

Ejemplo del layout 'terciary expanded' usando `actionsSmall` como slot: buscador y acciones secundarias + botón principal.

Heading

Body

Mínimo — Solo heading

Versión reducida sin contentType, body ni acciones. Para contextos donde la cabecera es solo un título.

Configuración