Aller au contenu principal
@capgo/capacitor-navigation-bar UI & système Open source

Barre de navigation Plugin Capacitor

Personnalisez la couleur et la visibilité de la barre de navigation Android pour une UI immersive

Installer

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

Guide

Comment utiliser la Navigation Bar dans Capacitor

Tester sur l'appareil

Téléchargez l'application Capgo, puis scannez le QR code.

QR code pour l'aperçu du plugin Navigation Bar

Utiliser @capgo/capacitor-navigation-bar

Le plugin Capacitor Navigation Bar permet de personnaliser la barre de navigation Android.

Installer

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

Ce que ce plugin expose

  • setNavigationBarColor - Définir la couleur de la barre de navigation et le thème des boutons.
  • getNavigationBarColor - Récupérer la couleur actuelle de la barre de navigation et le thème des boutons.

Exemple d'utilisation

setNavigationBarColor

Set the navigation bar color and button theme.

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

Récupérez la couleur actuelle de la barre de navigation et le thème des boutons.

import { NavigationBar } from '@capgo/capacitor-navigation-bar';

const { color, darkButtons } = await NavigationBar.getNavigationBarColor();
console.log('Current color:', color);
console.log('Using dark buttons:', darkButtons);

Référence complète

Continuer depuis Utiliser @capgo/capacitor-navigation-bar

Si vous utilisez Utiliser @capgo/capacitor-navigation-bar pour planifier le comportement des médias et de l'interface natifs, connectez-l’à @capgo/capacitor-navigation-bar pour les détails d'implémentation dans @capgo/capacitor-navigation-bar, Prise en main pour les détails d'implémentation dans Getting Started Utiliser @capgo/capacitor-live-activities pour la capacité native dans Utiliser @capgo/capacitor-live-activities @capgo/capacitor-live-activities pour les détails d'implémentation dans @capgo/capacitor-live-activities, et Utiliser @capgo/capacitor-video-player pour la fonctionnalité native dans Utilisation de @capgo/capacitor-video-player.

FAQ

FAQ du plugin Navigation Bar

Comment installer le plugin Navigation Bar dans une application Capacitor ?

Exécutez "bun add @capgo/capacitor-navigation-bar" (ou "npm install @capgo/capacitor-navigation-bar"), puis lancez "bunx cap sync" pour que les projets iOS et Android prennent en compte le code natif. Importez-le depuis "@capgo/capacitor-navigation-bar" dans votre code.

Est-ce que @capgo/capacitor-navigation-bar fonctionne avec React, Vue et Angular ?

Oui. Navigation Bar est un package Capacitor, il fonctionne donc avec n'importe quel framework web tournant sous Capacitor, y compris Ionic, React, Vue, Angular, Svelte et le JavaScript pur.

Quelle version de Capacitor est supportée par @capgo/capacitor-navigation-bar ?

Les plugins Capgo suivent la version majeure de Capacitor : utilisez la version majeure du plugin qui correspond à la version majeure de votre Capacitor (par exemple le plugin v8 avec Capacitor 8). Le tableau de compatibilité du README de GitHub recense les versions maintenues.

Est-ce que @capgo/capacitor-navigation-bar est gratuit et open source ?

Oui. Le code source de code est public sur GitHub à l'adresse https://github.com/Cap-go/capacitor-navigation-bar/ et le package est gratuit à installer via npm. Les rapports de bugs et les pull requests sont les bienvenus.

Puis-je mettre à jour code utilisant Navigation Bar sans passer par une revue de l'App Store ?

L'installation ou la mise à jour du plugin modifie le code natif, ce qui impose un nouveau build pour les stores. Ensuite, les changements JavaScript, HTML et CSS qui appellent le plugin peuvent être livrés instantanément via les live updates de Capgo.

Déployez les modifications de Navigation Bar sans attendre la validation de l'app

Une fois le plugin intégré à votre build de store, Capgo live updates déploie vos changements JavaScript, HTML et CSS aux utilisateurs en quelques minutes.

Commencez avec Capgo