FOOTER

El componente FOOTER no es un componente de página, sino una configuración a nivel de aplicación que permite mostrar una barra inferior fija con información contextual.

El contenido del footer se evalúa en el servidor usando Handlebars, pero la visibilidad según el tamaño de pantalla se resuelve en el cliente.

---

Propiedades de aplicación

Propiedad	Tipo	Obligatorio	Valor predeterminado	Descripción
footerSlot1	string	No	—	Slot de contenido #1
footerSlot2	string	No	—	Slot de contenido #2
footerSlot3	string	No	—	Slot de contenido #3
footerSlot4	string	No	—	Slot de contenido #4
footerSlot5	string	No	—	Slot de contenido #5

---

Sintaxis de slots

Cada slot acepta:

contenido

o:

breakpoint; contenido

Donde breakpoint puede ser: xs, sm, md, lg, xl, xxl.

Si no se especifica breakpoint, se usa xs (visible en todos los tamaños).

Espacios alrededor del punto y coma

Los espacios antes y después del ; se ignoran. Los siguientes ejemplos son equivalentes:

footerSlot1: "md; {{appName}}"
footerSlot1: "md;{{appName}}"
footerSlot1: "md ; {{appName}}"

Prefijos no reconocidos

Si el texto comienza con un prefijo que no corresponde a un breakpoint válido, se trata como contenido normal y el slot se muestra en todos los tamaños:

footerSlot1: "mobile; {{appName}}"

Esto renderiza: mobile; Mi App con breakpoint xs.

---

Breakpoints

Breakpoint	Ancho mínimo	Orden
xs	0px	0
sm	576px	1
md	768px	2
lg	992px	3
xl	1200px	4
xxl	1400px	5

Un item es visible cuando el breakpoint actual de la pantalla es mayor o igual al breakpoint del item.

---

Ejemplo completo

props:
  footerSlot1: "md; {{appName}}"
  footerSlot2: "lg; {{tenantName}}"
  footerSlot3: "{{environment}}"
  footerSlot4: "xl; v{{version}}"
  footerSlot5: "xxl; {{userFullName}}"

Esto genera:

Breakpoint	Texto renderizado
md	Mi App
lg	Tenant ABC
xs	Production
xl	v1.2.0
xxl	Juan Pérez

Vista en escritorio (≥1400px)

Mi App | Tenant ABC | Production | v1.2.0 | Juan Pérez

Vista en tablet (≥768px, <992px)

Mi App | Production

Vista en mobile (<576px)

Production

---

Comportamiento

• Si el array de footer está vacío, null o todos los items están ocultos, el footer no se renderiza.
• Los textos de los items visibles se concatenan con |.
• Nunca hay separadores al inicio, al final ni duplicados.
• El footer es fixed en la parte inferior, ocupa todo el ancho y tiene un alto compacto (~34px).
• El fondo se adapta al tema claro/oscuro automáticamente usando las variables CSS de Tabler.