Bottom navigation

Destinos y acción

Navegación inferior de una app de móvil: de tres a cinco destinos de primer nivel, cada uno con icono y etiqueta, en una región de navegación con nombre («Navegación principal», cambiable en labels). Los destinos son datos: el consumidor marca el actual (current, que se pinta como aria-current="page") y responde a navigate con el evento nativo para usar su router. La acción destacada (primaryAction) es opcional: un botón en el centro que hace algo, no un destino, y avisa con action. La barra deja libre el área de gestos de Android con el margen seguro inferior (env(safe-area-inset-bottom), con viewport-fit=cover en la página); dónde colocarla es cosa de la app.

Angular

Vue

Pantalla: Inicio · Añadir pulsado 0 veces

<flt-bottom-nav
  [items]="items()"
  [primaryAction]="{ label: 'Añadir', icon: 'M12 5v14M5 12h14' }"
  (navigate)="onNavigate($event)"
  (action)="nuevoMovimiento()"
/>

// items: [{ id, label, href, icon, current?, badge?, disabled? }], de 3 a 5
// icon: el atributo d de un icono de trazo de 24×24
onNavigate({ item, event }: FltBottomNavNavigateEvent) {
  event.preventDefault();
  this.router.navigateByUrl(item.href);
}

<FltBottomNav
  :items="items"
  :primary-action="{ label: 'Añadir', icon: 'M12 5v14M5 12h14' }"
  @navigate="onNavigate"
  @action="nuevoMovimiento"
/>

function onNavigate({ item, event }: FltBottomNavNavigateEvent) {
  event.preventDefault();
  router.push(item.href);
}

Pantalla secundaria

En una pantalla que no es un destino de la barra (Ajustes, un detalle), ningún destino se marca como actual: la barra no dice que estás en Inicio si no lo estás. Al tocar un destino, el consumidor lo marca y vuelve a haber uno.

Angular

Vue

Pantalla: Ajustes (pantalla secundaria) · Añadir pulsado 0 veces

// En Ajustes, una pantalla secundaria: ningún destino lleva current
items = destinos.map((d) => ({ ...d, current: false }));

// En Ajustes, una pantalla secundaria: ningún destino lleva current
items = destinos.map((d) => ({ ...d, current: false }));

Insignia y deshabilitado

La insignia (badge) muestra la cuenta sobre el icono sin mover la etiqueta, hasta 99+; el lector la oye en el nombre del destino tal como se ve, detrás de la etiqueta («Movim., 99+ novedades», textos badgeOne y badgeOther en labels). Un destino deshabilitado sigue siendo un enlace (aria-disabled), sin dirección: sale del orden de tabulación y no navega.

Angular

Vue

Pantalla: Inicio · Añadir pulsado 0 veces

items = [
  { id: 'movimientos', label: 'Movim.', href: '/movimientos', icon, badge: 120 },
  { id: 'estadisticas', label: 'Estad.', href: '/estadisticas', icon, disabled: true },
];
labels = { badgeOther: '{label}, {count} sin revisar' };

items = [
  { id: 'movimientos', label: 'Movim.', href: '/movimientos', icon, badge: 120 },
  { id: 'estadisticas', label: 'Estad.', href: '/estadisticas', icon, disabled: true },
];
labels = { badgeOther: '{label}, {count} sin revisar' };