Primeros pasos

Copia un prompt de configuración con los pasos de instalación y la guía completa en markdown para este plugin.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-navigation-bar`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/navigation-bar/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Instalar

Puedes usar nuestro setup asistido por IA para instalar el plugin. Añade las skills de Capgo a tu herramienta de IA con el siguiente comando:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Luego usa el siguiente prompt:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-navigation-bar` plugin in my project.

Si prefieres la configuración manual, instala el plugin ejecutando estos comandos y sigue las instrucciones de cada plataforma:

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

Importar

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

Inicio rápido

Ajusta la barra de navegación a un encabezado oscuro e iconos claros.

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

await NavigationBar.setNavigationBarColor({
  color: '#0f172a',
  darkButtons: false,
});

Ejemplo: modo de lectura inmersivo

await NavigationBar.hide();
// later, when leaving the reader
await NavigationBar.show();

Ejemplo: leer el tema actual

const { color, darkButtons } = await NavigationBar.getNavigationBarColor();

Errores comunes

Solo Android: no hay un equivalente de barra de navegación de iOS en este plugin.
De borde a borde: combínalo con el CSS de la barra de estado y el área segura de WebView para que el contenido no quede oculto al volver a mostrar la barra.

Resumen de API

`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 de tipos

`NavigationBarColor`

Colores de la barra de navegación predefinidos.

export enum NavigationBarColor {
  /** White color */
  WHITE = '#FFFFFF',
  /** Black color */
  BLACK = '#000000',
  /** Transparent color */
  TRANSPARENT = 'transparent',
}

Fuente de verdad

Esta página se genera a partir del plugin src/definitions.ts. Vuelve a ejecutar el sync cuando el API público cambie en upstream.

Continúa desde Getting Started

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