Passer au contenu principal
Retour à plugins
@capgo/capacitor-barre_de_navigation
Manuel
@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écharger l'application Capgo, puis scanner le code QR code.

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

Utilisation de @capgo/capacitor-navigation-bar

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

Exemple d'utilisation

setNavigationBarColor

Définir la couleur et le thème de la barre de navigation et 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

Récupérer la couleur et le thème actuels de la barre de navigation et 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 des médias et de l'interface natifs, connectez-l’à @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 Prise en main 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-joueur-de-videos pour la capacité native dans l'utilisation de @capgo/capacitor-joueur-de-videos.