Vai direttamente al contenuto principale
@capgo/capacitor-barra di navigazione Interfaccia utente & Sistema Sorgente aperta

Barra di navigazione plugin Capacitor

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

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 utilizzare la barra di navigazione in Capacitor

Testa sul dispositivo

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

App Store Google Play
Barra di navigazione plugin anteprima QR code

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

Capacitor Barra di Navigazione Plugin per personalizzare la barra di navigazione Android.

Installa

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

Cos'è che questo plugin espone

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

Utilizzo di esempio

setNavigationBarColor

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

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 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 Utilizzo di @capgo/capacitor-barra-di-navigazione

Se stai utilizzando Utilizzo di @capgo/capacitor-barra-di-navigazione per pianificare il comportamento dei media nativi e dell'interfaccia, collega @capgo/capacitor-barra-di-navigazione per i dettagli di implementazione in @capgo/capacitor-barra-di-navigazione Getting Started per i dettagli di implementazione in Getting Started, Usando @capgo/capacitor-attività-in-vivo per la capacità nativa in Usando @capgo/capacitor-attività-in-vivo, @capgo/capacitor-attività-in-vivo per i dettagli di implementazione in @capgo/capacitor-attività-in-vivo, e Usando @capgo/capacitor-lettore-di-video per la capacità nativa in Usando @capgo/capacitor-lettore-di-video.

FAQ

Barra di navigazione plugin FAQ

Come posso installare il plugin di barra di navigazione in un'app Capacitor?

Esegui "bun add @capgo/capacitor-navigation-bar" (o "npm install @capgo/capacitor-navigation-bar"), quindi esegui "bunx cap sync" affinché i progetti iOS e Android recuperino il nativo code. Importalo da "@capgo/capacitor-navigation-bar" nella tua app code.

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

Sì. La barra di navigazione è un pacchetto Capacitor, quindi funziona con qualsiasi framework web che esegue all'interno di Capacitor, compresi Ionic, React, Vue, Angular, Svelte e JavaScript puro.

Qual è la versione di Capacitor supportata da @capgo/capacitor-navigation-bar?

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

È @capgo/capacitor-navigation-bar gratuito e open source?

Yes. Il sorgente code è pubblico su GitHub a https://github.com/Cap-go/capacitor-barra_di_navigazione/ e il pacchetto è gratuito per l'installazione da npm.

Posso aggiornare code che utilizza la barra di navigazione senza una revisione dell'App Store?

L'installazione o l'aggiornamento del plugin modifica il code nativo, quindi richiede una nuova costruzione dello store. Dopo di che, le modifiche JavaScript, HTML e CSS che chiamano il plugin possono essere distribuite immediatamente con gli aggiornamenti Capgo in tempo reale.

Interfaccia utente & Sistema

Plugin correlati

Esplora tutti i plugin →

Invia modifiche alla barra di navigazione senza attendere la revisione dell'app

Una volta che il plugin è presente nella tua build di store, le Capgo aggiornamenti live inviano i tuoi cambiamenti JavaScript, HTML e CSS ai utenti in pochi minuti

Inizia con Capgo