Allez directement au contenu principal
Retour aux plugins
@capgo/capacitor-barre_de_navigation
Tutoriel
par github.com/Cap-go

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

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

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 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

Récupérer 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 En utilisant @capgo/capacitor-barre-de-navigation pour planifier le comportement natif des médias et de l'interface, 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 Utilisation de @capgo/capacitor-activités-en-vive pour la capacité native dans Utilisation de @capgo/capacitor-activités-en-vive @capgo/capacitor-activités-en-vive pour les détails d'implémentation dans @capgo/capacitor-activités-en-vive, et Utilisation de @capgo/capacitor-joueur-de-videos pour la capacité native dans Utilisation de @capgo/capacitor-joueur-de-videos