Iniziare

Copia un prompt di configurazione con i passaggi di installazione e la guida markdown completa per questo 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.

Installazione

Puoi utilizzare la nostra configurazione assistita da AI per installare il plugin. Aggiungi le Capgo abilità al tuo strumento AI utilizzando il seguente comando:

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

Usa poi il seguente prompt:

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

Se preferisci la configurazione Manuale, installa il plugin eseguendo i seguenti comandi e segui le istruzioni specifiche del tuo platform:

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

Importazione

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

API Panoramica

`setNavigationBarColor`

Imposta il colore della barra di navigazione e il tema del pulsante.

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`

Ottieni il colore corrente della barra di navigazione e il tema del pulsante.

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

const { color, darkButtons } = await NavigationBar.getNavigationBarColor();
console.log('Current color:', color);
console.log('Using dark buttons:', darkButtons);

Riferimento di tipo

`NavigationBarColor`

Colori predefiniti della barra di navigazione.

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

Fonte di verità

Questa pagina è generata dal plugin e si basa sulla sua configurazione. src/definitions.tsRiepiloga la sincronizzazione quando le modifiche pubbliche API vengono apportate in fase di sviluppo.

Continua da Iniziare

Se stai utilizzando Iniziare per pianificare il comportamento dei media e dell'interfaccia nativa, connettilo con Usando @capgo/capacitor-barra_di_navigazione per la capacità nativa in Usando @capgo/capacitor-barra_di_navigazione, Usando @capgo/capacitor-attività_viva per la capacità nativa in Usando @capgo/capacitor-attività_viva, @capgo/capacitor-attività_viva per il dettaglio di implementazione in @capgo/capacitor-attività_viva, Usando @capgo/capacitor-lettore_di_video per la capacità nativa in Usando @capgo/capacitor-lettore_di_video, e @capgo/capacitor-lettore_di_video per il dettaglio di implementazione in @capgo/capacitor-lettore_di_video.