Langsung ke konten utama
@capgo/capacitor-navigation-bar UI & Sistem Open source

Bilah Navigasi plugin Capacitor

Sesuaikan warna dan visibilitas navigation bar Android untuk pengalaman UI yang imersif

Instal

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

Panduan

Cara menggunakan Navigation Bar di Capacitor

Tes di perangkat

Download aplikasi Capgo, lalu scan QR code.

App Store Google Play
QR pratinjau plugin Navigation Bar code

Menggunakan @capgo/capacitor-navigation-bar

Capacitor Navigation Bar Plugin untuk menyesuaikan navigation bar Android.

Instal

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

Apa yang Diekspos Plugin Ini

  • setNavigationBarColor - Atur warna navigation bar dan tema tombol.
  • getNavigationBarColor - Ambil warna navigation bar dan tema tombol saat ini.

Contoh Penggunaan

setNavigationBarColor

Atur warna navigation bar dan tema tombol.

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

Dapatkan warna navigation bar dan tema tombol saat ini.

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

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

Referensi Lengkap

Lanjutkan dari Menggunakan @capgo/capacitor-navigation-bar

Jika Anda menggunakan Menggunakan @capgo/capacitor-navigation-bar untuk merencanakan perilaku media dan antarmuka native, hubungkan dengan @capgo/capacitor-navigation-bar untuk detail implementasi di @capgo/capacitor-navigation-bar, Panduan Memulai untuk detail implementasi di Getting Started, Menggunakan @capgo/capacitor-live-activities untuk kemampuan native di Menggunakan @capgo/capacitor-live-activities, @capgo/capacitor-live-activities untuk detail implementasi di @capgo/capacitor-live-activities, dan Menggunakan @capgo/capacitor-video-player untuk kapabilitas native saat menggunakan @capgo/capacitor-video-player.

FAQ

FAQ Plugin Navigation Bar

Bagaimana cara install plugin Navigation Bar di aplikasi Capacitor?

Jalankan "bun add @capgo/capacitor-navigation-bar" (atau "npm install @capgo/capacitor-navigation-bar"), lalu jalankan "bunx cap sync" agar proyek iOS dan Android mengenali code native. Import dari "@capgo/capacitor-navigation-bar" di code aplikasi Anda.

Apakah @capgo/capacitor-navigation-bar bisa digunakan dengan React, Vue, dan Angular?

Ya. Navigation Bar adalah package Capacitor, jadi bisa digunakan dengan framework web apa pun yang berjalan di dalam Capacitor, termasuk Ionic, React, Vue, Angular, Svelte, dan JavaScript biasa.

Versi Capacitor mana yang didukung oleh @capgo/capacitor-navigation-bar?

Plugin Capgo mengikuti versi mayor Capacitor: gunakan versi mayor plugin yang sesuai dengan versi mayor Capacitor Anda (contoh: plugin v8 dengan Capacitor 8). Tabel kompatibilitas di README GitHub mencantumkan versi yang masih di-maintain.

Apakah @capgo/capacitor-navigation-bar gratis dan open source?

Ya. Source code tersedia secara publik di GitHub pada https://github.com/Cap-go/capacitor-navigation-bar/ dan paketnya gratis untuk diinstal dari npm. Bug report dan pull request sangat kami terima.

Bisakah saya update code yang menggunakan Navigation Bar tanpa review App Store?

Instalasi atau upgrade plugin akan mengubah native code, jadi butuh build store baru. Setelah itu, perubahan JavaScript, HTML, dan CSS yang memanggil plugin bisa langsung dikirim lewat live updates Capgo.

UI & Sistem

Plugin terkait

Lihat semua plugin →

Rilis perubahan Navigation Bar tanpa menunggu review aplikasi

Setelah plugin ada di build store Anda, live updates Capgo akan mengirim perubahan JavaScript, HTML, dan CSS ke pengguna dalam hitungan menit.

Mulai dengan Capgo