Salta al contenuto principale
@capgo/capacitor-navigation-bar UI e sistema Open source

Barra di navigazione Plugin Capacitor

Personalizza colore e visibilità della navigation bar Android per un'interfaccia immersiva

Installa

bun add @capgo/capacitor-navigation-bar bunx cap sync
npm, pnpm o yarn
  • npm install @capgo/capacitor-navigation-bar
  • pnpm add @capgo/capacitor-navigation-bar
  • yarn add @capgo/capacitor-navigation-bar

Guida

Come usare la Navigation Bar in Capacitor

Testa sul dispositivo

Scarica l'app Capgo, poi scansiona il QR code.

App Store Google Play
QR code per l'anteprima del plugin Navigation Bar

Utilizzo di @capgo/capacitor-navigation-bar

Plugin Capacitor Navigation Bar per personalizzare la barra di navigazione Android.

Installa

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

Cosa espone questo plugin

  • setNavigationBarColor - Imposta il colore della navigation bar e il tema dei pulsanti.
  • getNavigationBarColor - Ottieni il colore attuale della navigation bar e il tema dei pulsanti.

Esempio d'uso

setNavigationBarColor

Imposta il colore della navigation bar e il tema dei pulsanti.

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

Ottieni il colore attuale della navigation bar e il tema dei pulsanti.

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 Utilizzo di @capgo/capacitor-navigation-bar

Se stai usando Utilizzo di @capgo/capacitor-navigation-bar per pianificare il comportamento dei media nativi e dell'interfaccia, collegalo a @capgo/capacitor-navigation-bar per i dettagli di implementazione in @capgo/capacitor-navigation-bar, Per iniziare per i dettagli di implementazione nella guida introduttiva, Uso di @capgo/capacitor-live-activities per la funzionalità nativa nella pagina Uso di @capgo/capacitor-live-activities, @capgo/capacitor-live-activities per i dettagli di implementazione in @capgo/capacitor-live-activities, e Uso di @capgo/capacitor-video-player per la funzionalità nativa in Usare @capgo/capacitor-video-player.

FAQ

FAQ sul plugin Navigation Bar

Come installo il plugin Navigation Bar in un'app Capacitor?

Esegui "bun add @capgo/capacitor-navigation-bar" (o "npm install @capgo/capacitor-navigation-bar"), poi lancia "bunx cap sync" in modo che i progetti iOS e Android integrino il code nativo. Importalo da "@capgo/capacitor-navigation-bar" nel tuo code.

@capgo/capacitor-navigation-bar funziona con React, Vue e Angular?

Sì. Navigation Bar è un pacchetto Capacitor, quindi funziona con qualsiasi framework web che giri all'interno di Capacitor, inclusi Ionic, React, Vue, Angular, Svelte e JavaScript puro.

Quale versione di Capacitor supporta @capgo/capacitor-navigation-bar?

I plugin Capgo seguono la major version di Capacitor: usa la major version del plugin che corrisponde alla tua major version di Capacitor (ad esempio plugin v8 con Capacitor 8). La tabella di compatibilità nel README di GitHub elenca le versioni mantenute.

@capgo/capacitor-navigation-bar è free e open source?

Sì. Il codice sorgente di code è pubblico su GitHub all'indirizzo https://github.com/Cap-go/capacitor-navigation-bar/ e il pacchetto è gratuito su npm. Bug report e pull request sono i benvenuti.

Posso aggiornare code che usa la Navigation Bar senza passare per la revisione dell'App Store?

Installare o aggiornare il plugin modifica il code nativo, quindi serve una nuova build per lo store. Dopo, le modifiche a JavaScript, HTML e CSS che chiamano il plugin possono essere rilasciate subito con le live updates di Capgo.

UI e sistema

Plugin correlati

Sfoglia tutti i plugin →

Pubblica modifiche alla Navigation Bar senza attendere la revisione dell'app

Una volta incluso il plugin nel tuo store build, Capgo invia le modifiche a JavaScript, HTML e CSS tramite live updates in pochi minuti.

Inizia con Capgo