Passer au contenu principal
Retour aux plugins
@capgo/capacitor-barre_de_navigation
Tutoriel
@capgo/capacitor-barre_de_navigation

Barre de navigation

Personnalisez la couleur et la visibilité de la barre de navigation Android pour des expériences UI immersive

Guide

Tutoriel sur la barre de navigation

Tester sur appareil

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

Lien QR de prévisualisation du plugin de barre de navigation code

Utilisation de @capgo/capacitor-barre-de-navigation

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

Exemple d'utilisation

setNavigationBarColor

Définir la couleur et le thème de la barre de navigation.

import { NavigationBar } 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 de la barre 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-barre-de-navigation

Si vous utilisez L'utilisation de @capgo/capacitor-barre-de-navigation pour planifier le comportement des médias et de l'interface native, connectez-le avec @capgo/capacitor-barre-de-navigation pour les détails d'implémentation dans @capgo/capacitor-barre-de-navigation Démarrage pour les détails d'implémentation dans Démarrage L'utilisation de @capgo/capacitor-activités-en-vivre For la capacité native dans Utilisation de @capgo/capacitor-live-activités, @capgo/capacitor-live-activités Pour le détail d'implémentation dans @capgo/capacitor-live-activités, et Utilisation de @capgo/capacitor-video-joueur Pour la capacité native dans Utilisation de @capgo/capacitor-video-joueur.