Saltare al contenuto principale

Guida

Tutoriale sulla barra di navigazione

Testa sul dispositivo

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

Previsualizzazione del collegamento QR del plugin di barra di navigazione code

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

Capacitor Plugin di barra di navigazione personalizzabile 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 e il tema del pulsante 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 del pulsante 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à @capgo/capacitor-live-attività per il dettaglio di implementazione in @capgo/capacitor-live-attività, e Utilizzare @capgo/capacitor-player-video per la capacità nativa in Utilizzare @capgo/capacitor-player-video.