Zum Hauptinhalt springen
Capgo Logo
Zurück zu Plugins
@capgo/capacitor-Navigation-Leiste
Anleitung
@capgo/capacitor-Navigation-Leiste

Navigationsleiste

Benutzerdefinierte Android-Navigation-Leiste Farbe und Sichtbarkeit für immersive UI-Erfahrungen

Richtlinie

Tutorial zur Navigationsschaltfläche

Gerät testen

Laden Sie die Capgo-App herunter, dann scannen Sie die QR-Code code.

Navigation Bar-Plugin-Vorschau-QR-Code code

Verwendung von @capgo/capacitor-navigation-bar

Capacitor Navigation Bar Plugin für die Anpassung der Android-Navigationsleiste.

Installieren

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

Was dieses Plugin bereitstellt

  • setNavigationBarColor - Navigationsschaltfläche farbe und Tasten-Thema einstellen.
  • getNavigationBarColor - Holen Sie sich die aktuelle Navigationsleiste-Farbe und die Schaltflächenthematik.

Beispiel für die Verwendung

setNavigationBarColor

Farbe und Schaltflächenthema der Navigationsleiste einstellen.

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

Derzeitige Farbe und Schaltflächenthema der Navigationsleiste abrufen.

import { NavigationBar } from '@capgo/capacitor-navigation-bar';

const { color, darkButtons } = await NavigationBar.getNavigationBarColor();
console.log('Current color:', color);
console.log('Using dark buttons:', darkButtons);

Vollständige Referenz

Fortsetzen von @capgo/capacitor-Navigationsleiste

Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-Navigationsleiste verwenden @capgo/capacitor-Navigationsleiste verwenden um native Medien- und Schnittstellenverhalten zu planen, verbinden Sie es mit @capgo/capacitor-Navigationsleitfaden für die Implementierungsdetails in @capgo/capacitor-Navigationsleiste Getting Started für die Implementierungsdetails in Einstieg Mit @capgo/capacitor-live-aktivitäten für die native Fähigkeit in Mit @capgo/capacitor-live-aktivitäten @capgo/capacitor-live-aktivitäten für die Implementierungsdetails in @capgo/capacitor-live-aktivitäten und Mit @capgo/capacitor-video-player für die native Fähigkeit in Mit @capgo/capacitor-video-player