Guide
Comment utiliser la Navigation Bar dans Capacitor
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
- GitHub : https://github.com/Cap-go/capacitor-navigation-bar/
- Docs : /docs/plugins/navigation-bar/
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.