Allez directement au contenu principal
Retour aux plugins
@capgo/capacitor-barre de navigation
Guide
@capgo/capacitor-barre de navigation

Barre de navigation

Personnalisez la couleur et la visibilité de la barre de navigation Android pour des expériences d'interface utilisateur immersive

Guide

Tutoriel sur la barre de navigation

Testez sur appareil

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

Prévisualisation du QR code du plugin de barre de navigation

En utilisant @capgo/capacitor-barre-de-navigation

Plugin de barre de navigation Capacitor pour personnaliser la barre de navigation Android.

Installer

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

Ce plugin expose cela

  • setNavigationBarColor - Définir la couleur de la barre de navigation et le thème du bouton.
  • getNavigationBarColor - Obtenir la couleur actuelle de la barre de navigation et le thème du bouton.

Exemple d'utilisation

setNavigationBarColor

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

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

Obtenir 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 Utilisation de @capgo/capacitor-barre-de-navigation pour planifier le comportement des médias et des interfaces natives, connectez-le à @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, En utilisant @capgo/capacitor-activités_en_direct pour la capacité native dans En utilisant @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 En utilisant @capgo/capacitor-joueur_de_videos pour la capacité native dans En utilisant @capgo/capacitor-joueur_de_videos.