Saltare al contenuto principale
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

Testa sul dispositivo

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

Anteprima del collegamento QR del plugin per la barra di navigazione code

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

Capacitor Plugin per la barra di navigazione personalizzabile per l'Android.

Installa

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

Cosa questo plugin espone

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

Esempio di utilizzo

setNavigationBarColor

Imposta il colore e il tema della barra di navigazione.

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 e il tema attuale della barra di navigazione.

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 Utilizzare @capgo/capacitor-barra_di_navigazione

Se stai utilizzando Utilizzare @capgo/capacitor-barra_di_navigazione per pianificare il comportamento dei media e dell'interfaccia nativi, collegalo con @capgo/capacitor-barra_di_navigazione per i dettagli di implementazione in @capgo/capacitor-barra_di_navigazione Guida introduttiva per i dettagli di implementazione in Guida introduttiva Utilizzare @capgo/capacitor-attività_in_vivo per la capacità nativa in Utilizzare @capgo/capacitor-live-attivitàs @capgo/capacitor-live-attivitàs per il dettaglio di implementazione in @capgo/capacitor-live-attivitàs, e Utilizzare @capgo/capacitor-video-player per la capacità nativa in Utilizzare @capgo/capacitor-video-player.