Saltar al contenido principal

Ver en npm

Guía

Tutorial sobre Barra de Navegación

Download the Capgo app, then scan the 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 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

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 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 nativos, conecta con @capgo/capacitor-bar-de-navegación para el detalle de implementación en @capgo/capacitor-bar-de-navegación Iniciación para el detalle de implementación en Iniciación 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.