__CAPGO_KEEP_0__ home
Torna ai plugin
@capgo/capacitor-barra di navigazione
Tutorial
@capgo/capacitor-barra_di_navigazione

Barra di navigazione

Personalizza il colore e la visibilità della barra di navigazione Android per esperienze di interfaccia utente immersive

Guida

Tutorial sulla barra di navigazione

Testare sul dispositivo

Scarica l'app Capgo, poi scansione il codice QR code.

Navigation Bar plugin preview QR code

Utilizzo di @capgo/capacitor-barra-di-navigazione

Plugin di barra di navigazione di Capacitor per la personalizzazione della barra di navigazione Android.

Installa

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

Cosa questo plugin espone

  • setNavigationBarColor - Imposta il colore della barra di navigazione e il tema del pulsante.
  • getNavigationBarColor - Ottieni il colore attuale della barra di navigazione e il tema del pulsante.

Esempio di utilizzo

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 attuale 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 completo

Continua da Using @capgo/capacitor-barra-di-navigazione

If sei stai utilizzando Utilizza @capgo/capacitor-navigation-bar per pianificare il comportamento dei media e dell'interfaccia nativa, collega @capgo/capacitor-navigation-bar per i dettagli di implementazione in @capgo/capacitor-navigation-bar, Avvio per i dettagli di implementazione in Avvio, Utilizza @capgo/capacitor-live-activities per la capacità nativa in Utilizza @capgo/capacitor-live-activities, @capgo/capacitor-live-activities per i dettagli di implementazione in @capgo/capacitor-live-activities, e Utilizza @capgo/capacitor-video-player per la capacità nativa in Utilizza @capgo/capacitor-player-video.