Skip to Content
Paneles IoTPáginas y navegación

Páginas y navegación

Los boards de IronFlock no se limitan a una sola pantalla. Puede crear múltiples páginas y moverse fluidamente entre ellas usando widgets de navegación — ofreciendo a sus usuarios formas simples y clicables de saltar de una página a otra.

Navigation demo

Cómo funciona la navegación

La navegación se basa en rutas. Una ruta es la parte de la URL después de .../home/ e indica a IronFlock qué página mostrar.

  • Agregue una nueva página → se crea una nueva ruta para ella.
  • Un widget de navegación cambia la ruta en la barra de direcciones → IronFlock muestra instantáneamente la página vinculada.

Tipos de widgets de navegación

Hay tres widgets de navegación para elegir:

  • Navegación lateral — un menú de barra lateral vertical, ideal para secciones de nivel superior. Puede mostrar elementos estáticos o generar elementos dinámicamente desde sus datos (por ejemplo, una entrada por máquina en su proyecto).
  • Barra de pestañas — una barra horizontal de pestañas para alternar entre sub-vistas dentro de una página.
  • Botón de navegación — un solo botón que enlaza a una página específica.

Rutas relativas vs. absolutas

Los widgets de navegación soportan dos estilos de enrutamiento:

  • Las rutas absolutas comienzan con una barra (por ejemplo, /settings/device1) y siempre navegan exactamente a esa ruta.
  • Las rutas relativas no tienen barra inicial (por ejemplo, device2/profile) y reemplazan el último segmento de la ruta actual.

Ejemplo: Si está en /settings/device1 y navega a device2/profile, la nueva ruta se convierte en /settings/device2/profile.

Nota: /settings y /settings/ no son lo mismo:

  • Desde /settings, navegar a device1 resulta en /device1
  • Desde /settings/, navegar a device1 resulta en /settings/device1

Enrutamiento dinámico

En lugar de crear una página separada para cada dispositivo en su proyecto, puede usar una ruta comodín con *.

Ejemplo: Cree una página en /assets/*. Cualquier ruta como /assets/device1, /assets/device2 o /assets/anything mostrará esa única página.

Dentro de la página, los widgets pueden leer segmentos de ruta para filtrar sus datos automáticamente. Si la URL es /assets/device1, los segmentos son:

  • Segmento 1 → assets
  • Segmento 2 → device1

Configure un widget para filtrar por el segmento 2 y mostrará automáticamente los datos del dispositivo que esté en la URL. Navegue a /assets/device2 y la misma página se adapta y muestra los datos de device2 — sin necesidad de páginas duplicadas.

Con los widgets de navegación y el enrutamiento dinámico, su board se vuelve modular y consciente del proyecto. Ya sea que tenga 5 dispositivos o 5.000, puede navegar y gestionarlos todos sin desorden ni complejidad.

Last updated on