Saltar al contenido principal
Volver a plugins
@capgo/capacitor-barra-de-navegación
Tutoriales
@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

Tutoría en Barra de Navegación

Probar en dispositivo

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

Enlace 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 para personalizar la barra de navegación de Android.

Instalar

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

¿Qué se expone con este plugin?

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

Ejemplo de uso

setNavigationBarColor

Establecer el color y el tema de la barra de navegación y el botó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 y el botó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 el uso de @capgo/capacitor-barra-de-navegación

Si estás utilizando Usando @capgo/capacitor-barra-de-navegación para planificar el comportamiento de medios y interfaz nativa, conecta con @capgo/capacitor-barra-de-navegación para los detalles de implementación en @capgo/capacitor-barra-de-navegación, Inicio para los detalles de implementación en Inicio, 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.