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

Barra de navegación

Personalizar el color y la visibilidad de la barra de navegación de Android para experiencias de interfaz de usuario inmersiva

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

Plugin de barra de navegación de Capacitor para personalizar la barra de navegación de 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 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

Obtenga el color y el tema del botón de la barra de navegación actual.

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

Siga adelante desde Usando @capgo/capacitor-barra-de-navegación

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