diff --git a/docs/01-builder-fields.md b/docs/01-builder-fields.md index cab724b..786b58a 100644 --- a/docs/01-builder-fields.md +++ b/docs/01-builder-fields.md @@ -3,7 +3,7 @@ title: "Campos editables del builder" tags: [builder, twig, html, modules] load_priority: 80 load_when: [always] -summary: "Atributos data-field-* (textfield, headfield, link, upload, list, multiv2, checkbox), c-if/c-for/c-class, c-form, componentes built-in del builder Acai." +summary: "Atributos data-field-* (textfield, headfield, link, upload, list, multiv2, checkbox), agrupar campos en pestañas con data-field-group, c-if/c-for/c-class, c-form, componentes built-in del builder Acai." --- # Builder Fields — Campos editables del index-base.tpl @@ -108,7 +108,25 @@ Devuelve un array. Acceso en Twig: `{{ imagen[0].urlPath }}`. Atributos disponibles: - `data-lazy="true"` — carga perezosa - `data-field-width="1400"` — ancho máximo sugerido -- `data-field-info1="titulo"` — campo de información adicional (típicamente alt) +- `data-field-info1` … `data-field-info5` — labels de los campos de información por imagen + +Los `data-field-infoN` (hasta 5) definen los labels que el builder muestra como campos editables **en cada imagen subida** (van a `infoLabels` en el `builder.json`). Sus valores se leen luego como `info1`…`info4` dentro del array del var. + +```html + +``` + +```twig +{{ imagenprincipal[0].info1 }} +
{{ imagenprincipal[0].info2 }}
+``` + +Los `data-field-infoN` funcionan igual en `uploadMulti`. ### uploadMulti @@ -200,6 +218,41 @@ Devuelve `1` o `0` (número), nunca `true`/`false`. Devuelve un string hexadecimal (`#ff0000`). Almacenado en config-vars (no en `builder_custom`). +## Agrupar campos en pestañas (`data-field-group`) + +Los campos de un módulo se reparten en pestañas dentro del panel de configuración añadiendo `data-field-group="Nombre del grupo"` al mismo elemento que ya lleva `data-field-type`. + +Mecanismo: cualquier atributo `data-field-*` extra —aparte de `data-field-type`, `data-field-label` y `data-field-value`— se recoge en el objeto `customDataField` del var, recortando el prefijo `data-field-`. Es decir, `data-field-group="Estilos"` acaba como `customDataField: { group: "Estilos" }` en el `builder.json`. + +Comportamiento del panel: +- Los vars se agrupan por `customDataField.group` y se muestran en pestañas laterales. +- Los vars sin `data-field-group` caen en la pestaña **Principal**. +- El orden de las pestañas es el de primera aparición de cada grupo en el template. +- Con un solo grupo no se muestran pestañas. +- Funciona igual en vars de primer nivel y dentro de `multiv2`. + +```html +
+ Título de la sección +
+
+ Texto de apoyo +
+ +
+
+
+
+``` + +Recomendación de uso: +- Agrupa cuando el módulo pase de ~6-8 vars; por debajo, una sola lista se lee mejor. +- Reparto habitual: **Contenido** (textos e imágenes), **Estilos** (colores, alineación, bordes), **Ajustes** (opciones de comportamiento, límites, enlaces). +- Mantén los nombres de grupo consistentes entre módulos y en español. Son literales: `Estilos` y `estilos` generan dos pestañas distintas. + ## Atributos Acai ### `c-if` — Renderizado condicional diff --git a/docs/11b-rules-cheat-sheet.md b/docs/11b-rules-cheat-sheet.md index d8e05a0..c4c05b9 100644 --- a/docs/11b-rules-cheat-sheet.md +++ b/docs/11b-rules-cheat-sheet.md @@ -45,6 +45,8 @@ Resumen ejecutable de reglas críticas, tipos de campo, filtros y formatos de da | `checkbox` | `` o `
` | `1` / `0` | | `colorpicker` | `
` | Hex color | +Pestañas en el panel del módulo: `data-field-group="Estilos"` en el elemento del campo (sin group → pestaña "Principal"). + ## Atributos Acai | Atributo | Uso | Ejemplo |