Zum Hauptinhalt springen
@capgo/capacitor-navigation-bar UI & System Open Source

Navigationsleiste Capacitor Plugin

Passe Farbe und Sichtbarkeit der Android Navigation Bar für immersive UI-Erlebnisse an

Installieren

bun add @capgo/capacitor-navigation-bar bunx cap sync
npm, pnpm oder yarn
  • npm install @capgo/capacitor-navigation-bar
  • pnpm add @capgo/capacitor-navigation-bar
  • yarn add @capgo/capacitor-navigation-bar

Anleitung

So nutzt du die Navigation Bar in Capacitor

Auf dem Gerät testen

Lade die Capgo App herunter und scanne den QR code.

QR-Code für die Navigation-Bar-Plugin-Vorschau code

Verwendung von @capgo/capacitor-navigation-bar

Capacitor Navigation Bar Plugin zur Anpassung der Android-Navigationsleiste.

Installieren

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

Was dieses Plugin bereitstellt

  • 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

Weiter mit der Verwendung von @capgo/capacitor-navigation-bar

Wenn du es nutzt Verwendung von @capgo/capacitor-navigation-bar , um natives Media- 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 die Implementierungsdetails 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 Verwendung von @capgo/capacitor-video-player für die native Funktionalität in „Verwendung von @capgo/capacitor-video-player.“

FAQ

Navigation Bar Plugin FAQ

Wie installiere ich das Navigation Bar Plugin in einer Capacitor App?

Führe "bun add @capgo/capacitor-navigation-bar" (oder "npm install @capgo/capacitor-navigation-bar") aus und danach "bunx cap sync", damit die iOS- und Android-Projekte die nativen code übernehmen. Importiere es in deiner App code aus "@capgo/capacitor-navigation-bar".

Funktioniert @capgo/capacitor-navigation-bar mit React, Vue und Angular?

Ja. Navigation Bar ist ein Capacitor Package und funktioniert daher mit jedem Web-Framework, das in Capacitor läuft, einschließlich Ionic, React, Vue, Angular, Svelte und reinem JavaScript.

Welche Capacitor Version wird von @capgo/capacitor-navigation-bar unterstützt?

Capgo Plugins folgen der Major-Version von Capacitor: Nutze die Plugin-Major-Version, die zu deiner Capacitor Major-Version passt (z. B. Plugin v8 bei Capacitor 8). Die Kompatibilitätstabelle im GitHub README listet die gepflegten Versionen auf.

Ist @capgo/capacitor-navigation-bar kostenlos und Open Source?

Ja. Der Quellcode von code ist öffentlich auf GitHub unter https://github.com/Cap-go/capacitor-navigation-bar/ einsehbar und das Paket lässt sich kostenlos über npm installieren. Bug-Reports und Pull Requests sind willkommen.

Kann ich code, das die Navigation Bar nutzt, ohne App-Store-Review aktualisieren?

Die Installation oder ein Upgrade des Plugins ändert den nativen code, weshalb ein neuer Store-Build nötig ist. Danach können JavaScript-, HTML- und CSS-Änderungen, die das Plugin aufrufen, sofort per Capgo Live Updates ausgeliefert werden.

Navigation Bar Änderungen ohne App-Review ausrollen

Sobald das Plugin in deinem Store-Build ist, bringt Capgo mit Live-Updates deine JavaScript-, HTML- und CSS-Änderungen in Minuten zu den Nutzern.

Starte mit Capgo