Sauter au contenu principal
@capgo/capacitor-barre-de-navigation UI & Système Source ouvert

Barre de navigation plugin Capacitor

Personnalisez la couleur et la visibilité de la barre de navigation Android pour des expériences 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 barre de navigation dans Capacitor

Tester sur appareil

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

Barre de navigation plugin preview QR code

Utiliser @capgo/capacitor-navigation-bar

Plugin de barre de navigation Capacitor pour 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 et le thème du menu de navigation.
  • getNavigationBarColor - Récupérer la couleur et le thème actuels du menu de navigation.

Exemple d'utilisation

setNavigationBarColor

- Définir la couleur et le thème du menu de navigation.

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érer la couleur et le thème actuels du menu de navigation.

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

Continuez à partir de l'utilisation de @capgo/capacitor-navigation-bar

Si vous utilisez Utiliser @capgo/capacitor-barre_de_navigation pour planifier le comportement de médias et d'interface natifs, la connecter avec @capgo/capacitor-barre_de_navigation pour les détails d'implémentation dans @capgo/capacitor-barre_de_navigation, Prise en main pour les détails d'implémentation dans Prise en main, Utiliser @capgo/capacitor-activités_en_direct pour la capacité native dans Utiliser @capgo/capacitor-activités_en_direct, @capgo/capacitor-activités_en_direct pour les détails d'implémentation dans @capgo/capacitor-activités_en_direct, et Utiliser @capgo/capacitor-lecteur_de_videos pour la capacité native dans Utiliser @capgo/capacitor-lecteur_de_videos.

FAQ

Barre de navigation plugin FAQ

Comment installer le plugin de barre de navigation dans une application Capacitor?

Exécutez « bun add @capgo/capacitor-barre de navigation » (ou « npm install @capgo/capacitor-barre de navigation »), puis exécutez « bunx cap sync » afin que les projets iOS et Android prennent en compte le code natif. Importez-l’à partir de « @capgo/capacitor-barre de navigation » dans votre application code.

Fonctionne-t-il @capgo/capacitor-barre de navigation avec React, Vue et Angular ?

Oui. La barre de navigation est un paquet Capacitor, elle fonctionne donc avec tout framework web qui tourne à l'intérieur de Capacitor, y compris Ionic, React, Vue, Angular, Svelte et JavaScript pur.

Quelle version de Capacitor supporte @capgo/capacitor-barre de navigation ?

Les plugins Capgo suivent la version majeure de Capacitor : utilisez la version majeure du plugin qui correspond à votre version majeure de Capacitor (par exemple, plugin v8 avec Capacitor 8). La table de compatibilité dans le README du GitHub liste 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 à https://github.com/Cap-go/capacitor-barre de navigation/ et le paquet est gratuit pour l'installer depuis npm. Les rapports de bugs et les demandes de pull sont les bienvenus.

Peut-on mettre à jour code qui utilise la barre de navigation sans passer par une revue de l'App Store ?

L'installation ou la mise à niveau du plugin modifie le code natif, il faut donc une nouvelle construction de l'application. Après cela, les modifications JavaScript, HTML et CSS qui appellent le plugin peuvent être envoyées instantanément avec les mises à jour Capgo.

Ship Navigation Bar changes without waiting for app review

Une fois le plugin est dans votre build de magasin, Capgo les mises à jour en direct poussent vos modifications JavaScript, HTML et CSS chez les utilisateurs en quelques minutes.

Commencez par Capgo