Saltar al contenido principal
@capgo/capacitor-navigation-bar UI y Sistema Código abierto

Barra de navegación plugin Capacitor

Personaliza el color y la visibilidad de la barra de navegación en Android para una UI inmersiva

Instalar

bun add @capgo/capacitor-navigation-bar bunx cap sync
npm, pnpm o yarn
  • npm install @capgo/capacitor-navigation-bar
  • pnpm add @capgo/capacitor-navigation-bar
  • yarn add @capgo/capacitor-navigation-bar

Guía

Cómo usar Navigation Bar en Capacitor

Probar en dispositivo

Descarga la app Capgo y escanea el QR code.

Vista previa del plugin Navigation Bar QR code

Usando @capgo/capacitor-navigation-bar

Plugin Capacitor Navigation Bar para personalizar la barra de navegación de Android.

Instalar

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

Qué expone este plugin

  • setNavigationBarColor - Configura el color de la barra de navegación y el tema de los botones.
  • getNavigationBarColor - Obtén el color actual de la barra de navegación y el tema de los botones.

Ejemplo de uso

setNavigationBarColor

Set the navigation bar color and button theme.

import { NavigationBar, NavigationBarColor } 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

Obtén el color actual de la barra de navegación y el tema de los botones.

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

Continúa con Usando @capgo/capacitor-navigation-bar

Si estás usando Usando @capgo/capacitor-navigation-bar para planificar el comportamiento de los medios y la interfaz nativos, conéctalo con @capgo/capacitor-navigation-bar para los detalles de implementación en @capgo/capacitor-navigation-bar, Primeros pasos para los detalles de implementación en Primeros pasos, Uso de @capgo/capacitor-live-activities para la capacidad nativa en Uso de @capgo/capacitor-live-activities, @capgo/capacitor-live-activities para el detalle de implementación en @capgo/capacitor-live-activities, y Uso de @capgo/capacitor-video-player para la capacidad nativa en Uso de @capgo/capacitor-video-player.

FAQ

FAQ del plugin Navigation Bar

¿Cómo instalo el plugin Navigation Bar en una app Capacitor?

Ejecuta "bun add @capgo/capacitor-navigation-bar" (o "npm install @capgo/capacitor-navigation-bar"), luego ejecuta "bunx cap sync" para que los proyectos de iOS y Android reconozcan el code nativo. Impórtalo desde "@capgo/capacitor-navigation-bar" en el code de tu app.

¿Es compatible @capgo/capacitor-navigation-bar con React, Vue y Angular?

Sí. Navigation Bar es un paquete Capacitor, por lo que funciona con cualquier framework web que se ejecute dentro de Capacitor, incluyendo Ionic, React, Vue, Angular, Svelte y JavaScript puro.

¿Qué versión de Capacitor es compatible con @capgo/capacitor-navigation-bar?

Los plugins de Capgo siguen la versión mayor de Capacitor: usa la versión mayor del plugin que coincida con la versión mayor de tu Capacitor (por ejemplo, el plugin v8 con Capacitor 8). La tabla de compatibilidad del README de GitHub lista las versiones mantenidas.

¿Es @capgo/capacitor-navigation-bar gratuito y de código abierto?

Sí. El código fuente de code es público en GitHub en https://github.com/Cap-go/capacitor-navigation-bar/ y el paquete se puede instalar gratis desde npm. Se aceptan reportes de errores y pull requests.

¿Puedo actualizar code que usa Navigation Bar sin pasar por la revisión de la App Store?

Instalar o actualizar el plugin cambia el code nativo, así que requiere un nuevo build para la tienda. Después, los cambios en JavaScript, HTML y CSS que llamen al plugin pueden publicarse al instante con las live updates de Capgo.

Lanza cambios en la Navigation Bar sin esperar la revisión de la app

Una vez que el plugin esté en tu build de la tienda, Capgo live updates envía tus cambios de JavaScript, HTML y CSS a los usuarios en minutos.

Empieza con Capgo