Anleitung
So nutzt du die Navigation Bar in Capacitor
Auf dem Gerät testen
Lade die Capgo App herunter und scanne den QR code.
@capgo/capacitor-navigation-bar verwenden
Capacitor Navigation Bar Plugin zur Anpassung der Android-Navigationsleiste.
Installieren
bun add @capgo/capacitor-navigation-bar
bunx cap sync
Was dieses Plugin bietet
setNavigationBarColor- Farbe der Navigationsleiste und Button-Theme festlegen.getNavigationBarColor- Aktuelle Farbe der Navigationsleiste und Button-Theme abrufen.
Anwendungsbeispiel
setNavigationBarColor
Farbe der Navigationsleiste und Button-Theme festlegen.
import { NavigationBar, NavigationBarColor } 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
Aktuelle Farbe der Navigationsleiste und Button-Theme 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
- GitHub: https://github.com/Cap-go/capacitor-navigation-bar/
- Docs: /docs/plugins/navigation-bar/
Weiter mit der Nutzung von @capgo/capacitor-navigation-bar
Wenn Sie ... verwenden @capgo/capacitor-navigation-bar verwenden um natives Medien- und Interface-Verhalten zu planen, verbinde es mit @capgo/capacitor-navigation-bar für Details zur Implementierung in @capgo/capacitor-navigation-bar, Erste Schritte für Details zur Implementierung in „Erste Schritte“, @capgo/capacitor-live-activities verwenden für die native Funktion in „@capgo/capacitor-live-activities verwenden“, @capgo/capacitor-live-activities für die Implementierungsdetails in @capgo/capacitor-live-activities und @capgo/capacitor-video-player verwenden für die native Funktion bei der Nutzung von @capgo/capacitor-video-player.