Aller directement 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 d'interface utilisateur immersive

Guide

Tutoriel sur la barre de navigation

Tester sur appareil

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

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

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

Capacitor Plugin de barre de navigation 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.

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-l’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 pour la capacité native dans l'utilisation de @capgo/capacitor-activités-en-vivre-temps @capgo/capacitor-activités-en-vivre-temps pour le détail d'implémentation dans @capgo/capacitor-activités-en-vivre-temps, et l'utilisation de @capgo/capacitor-jouer-le-vide pour la capacité native dans l'utilisation de @capgo/capacitor-jouer-le-vide.