Saltar al contenido principal
Volver a plugins
@capgo/capacitor-barra-de-navegación
Tutorial
@capgo/capacitor-barra-de-navegación

Barra de navegación

Personaliza el color y la visibilidad de la barra de navegación de Android para experiencias de interfaz de usuario inmersivas

Guía

Tutoriales sobre Barra de Navegación

Probar en dispositivo

Descargar la aplicación Capgo, luego escanea el código QR code.

Enlace QR de vista previa del plugin de barra de navegación code

Usando @capgo/capacitor-barra-de-navegación

Capacitor Plugin de barra de navegación personalizable para Android.

Instalar

bun add @capgo/capacitor-navigation-bar
bunx cap sync

¿Qué expone este plugin?

  • setNavigationBarColor - Establecer el color y el tema de la barra de navegación.
  • getNavigationBarColor - Obtener el color y el tema actual de la barra de navegación.

Uso de ejemplo

setNavigationBarColor

Establecer el color y el tema de la barra de navegación.

import { NavigationBar } from '@capgo/capacitor-navigation-bar';

// Set to white with dark buttons
await NavigationBar.setNavigationBarColor({
  color: NavigationBarColor.WHITE,
  darkButtons: true
});

// Set to custom color
await NavigationBar.setNavigationBarColor({
  color: '#FF5733',
  darkButtons: false
});

// Set a custom divider color on Android 9+
await NavigationBar.setNavigationBarColor({
  color: NavigationBarColor.WHITE,
  darkButtons: true,
  dividerColor: '#D9D9D9'
});

getNavigationBarColor

Obtener el color y el tema actual de la barra de navegación.

import { NavigationBar } from '@capgo/capacitor-navigation-bar';

const { color, darkButtons } = await NavigationBar.getNavigationBarColor();
console.log('Current color:', color);
console.log('Using dark buttons:', darkButtons);

Referencia completa

Sigue adelante desde [Usando @capgo/capacitor-bar-de-navegación]

Si estás utilizando Usando @capgo/capacitor-bar-de-navegación para planificar el comportamiento de medios y interfaz nativa, conecta con @capgo/capacitor-bar-de-navegación para los detalles de implementación en @capgo/capacitor-bar-de-navegación Iniciar para los detalles de implementación en Iniciar Usando @capgo/capacitor-actividades-en-vivo para la capacidad nativa en Usando @capgo/capacitor-actividades-en-vivo, @capgo/capacitor-actividades-en-vivo para el detalle de implementación en @capgo/capacitor-actividades-en-vivo, y Usando @capgo/capacitor-reproductor-de-videos para la capacidad nativa en Usando @capgo/capacitor-reproductor-de-videos.