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

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

Exemples 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

Obtenez la couleur actuelle de la barre de navigation et le thème du bouton.

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 natif des médias et de l'interface, connectez-l’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 Getting Started, Utilisation de @capgo/capacitor-activités-en-ligne pour la capacité native dans l'utilisation de @capgo/capacitor-activités-en-ligne, @capgo/capacitor-activités-en-ligne pour les détails d'implémentation dans @capgo/capacitor-activités-en-ligne, et Utilisation de @capgo/capacitor-joueur-de-videos pour la capacité native dans l'utilisation de @capgo/capacitor-joueur-de-videos.