docs: data-field-show para condicionar campos y pestanas del panel de modulos
El doc cubria data-field-group (repartir vars en pestanas) pero no habia forma documentada de condicionar que se ve: los modulos con modos excluyentes ensenaban al usuario todos los campos de todos los modos a la vez. Se documentan los dos atributos nuevos (data-field-show en el campo, data-field-group-show en una var del grupo), que llegan al builder.json por el mismo mecanismo generico que data-field-group, con la tabla de la gramatica y un ejemplo de las dos formas de uso. Dos avisos que ahorran el error tipico: el campo se referencia por su NOMBRE DE VARIABLE y no por su label (los acentos se borran, no se transliteran: "Titulo" es `ttulo`), y `campo=` significa vacio, que es la clave de la primera opcion de todo `list`.
This commit is contained in:
@@ -294,6 +294,54 @@ Recomendación de uso:
|
||||
- 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.
|
||||
|
||||
## Mostrar u ocultar campos y pestañas (`data-field-show`)
|
||||
|
||||
Un campo o una pestaña entera pueden depender del valor de otro campo del mismo módulo. Se declara con dos atributos, que viajan al `builder.json` por el mismo mecanismo genérico que `data-field-group` (`customDataField.show` y `customDataField['group-show']`):
|
||||
|
||||
- `data-field-show="campo=valor"` — en el elemento del campo que se quiere condicionar.
|
||||
- `data-field-group-show="campo=valor"` — en **una** var del grupo; condiciona la pestaña completa.
|
||||
|
||||
Gramática:
|
||||
|
||||
| Condición | Se muestra cuando |
|
||||
|-----------|-------------------|
|
||||
| `modo=1` | el valor es `1` |
|
||||
| `modo=1,2` | el valor es `1` o `2` |
|
||||
| `modo=` | el campo está **vacío** — es la clave de la primera opción de todo `list` |
|
||||
| `modo!=1` | el valor NO es `1` |
|
||||
| `modo=1;otro=2` | se cumplen ambas (AND) |
|
||||
|
||||
El campo se referencia por su **nombre de variable**, no por su label: se aplican las [reglas de nomenclatura](#reglas-de-nomenclatura-de-variables), así que `Mostrar Estilos` se referencia como `mostrarestilos` y `Título` como `ttulo` (los acentos se borran, no se transliteran). Los valores no pueden contener coma ni punto y coma.
|
||||
|
||||
```html
|
||||
<div c-hidden="true">
|
||||
<!-- Pestaña completa: "Estilos" solo aparece si el usuario activa el switch -->
|
||||
<div data-field-type="list" data-field-label="Mostrar Estilos" data-list-options="|No,1|Si"></div>
|
||||
<div data-field-type="textfield"
|
||||
data-field-label="Texto de Estilos"
|
||||
data-field-group="Estilos"
|
||||
data-field-group-show="mostrarestilos=1"></div>
|
||||
|
||||
<!-- Campo a campo: cada opción del list muestra su propio campo -->
|
||||
<div data-field-type="list"
|
||||
data-field-label="Modo Modulo"
|
||||
data-list-options="|Opcion 1,1|Opcion 2,2|Opcion 3"
|
||||
data-field-group="Contenido"></div>
|
||||
<div data-field-type="textfield" data-field-label="Opcion 1" data-field-group="Contenido" data-field-show="modomodulo="></div>
|
||||
<div data-field-type="textfield" data-field-label="Opcion 2" data-field-group="Contenido" data-field-show="modomodulo=1"></div>
|
||||
<div data-field-type="textfield" data-field-label="Opcion 3" data-field-group="Contenido" data-field-show="modomodulo=2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Comportamiento del panel:
|
||||
- **Ocultar no borra.** El valor sigue guardado y sigue llegando al Twig; si el usuario vuelve a mostrar el campo, lo escrito sigue ahí.
|
||||
- **Por eso la plantilla debe repetir la condición con `c-if`.** Ocultar el campo en el panel NO lo quita de la web: si `Texto de Estilos` no debe pintarse cuando `mostrarestilos` está a `0`, el `index-base.tpl` necesita su propio `c-if="mostrarestilos = '1'"`.
|
||||
- Una pestaña se oculta sola cuando todos sus campos han quedado ocultos por su `show`; en la mayoría de casos basta con condicionar los campos y no hace falta `data-field-group-show`.
|
||||
- Si varias vars del mismo grupo declaran `data-field-group-show`, **gana la primera** y las demás se ignoran.
|
||||
- Si una condición apunta a un campo que no existe (typo, o un label renombrado que cambió el nombre de variable), el campo **se muestra igualmente** y el aviso queda en la consola del navegador. Nunca desaparece en silencio.
|
||||
- Dentro de `multiv2` la condición se evalúa contra los valores **de ese item**, no contra los del módulo.
|
||||
- En modo traducción las condiciones se evalúan contra los valores del **idioma base**.
|
||||
|
||||
## Atributos Acai
|
||||
|
||||
### `c-if` — Renderizado condicional
|
||||
|
||||
Reference in New Issue
Block a user