Langkah ke konten utama
@capgo/capacitor-bar Pelayaran Antarmuka & Sitem Terbuka Sumber

Bar Pelayaran plugin Capacitor

Customize warna dan visibilitas bar navigasi Android untuk pengalaman UI immersive

Install

bun add @capgo/capacitor-navigation-bar bunx cap sync
npm, pnpm or 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

Uji di perangkat

Unduh aplikasi Capgo, kemudian scan kode QR code.

Toko Aplikasi Google Play
Tampilan Navigasi plugin preview QR code

Menggunakan @capgo/capacitor-navigation-bar

Plugin Navigation Bar Capacitor untuk Mengatur Baru Android

Install

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

Apa yang Dapat Diklik Plugin Ini

  • setNavigationBarColor - Mengatur warna dan tema tombol navigasi.
  • getNavigationBarColor - Mendapatkan warna dan tema navigasi saat ini.

Contoh Penggunaan

setNavigationBarColor

Setel warna dan tema tombol navigasi.

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

Peroleh warna dan tema tombol navigasi 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

Teruskan dari Menggunakan @capgo/capacitor-navigasi-bar

Jika Anda menggunakan Menggunakan @capgo/capacitor-navigasi-bar untuk merencanakan perilaku media dan antarmuka asli, hubungkannya dengan @capgo/capacitor-navigasi-bar untuk detail implementasi di @capgo/capacitor-navigasi-bar, Mulai Menggunakan untuk detail implementasi di Mulai, Menggunakan @capgo/capacitor-aktivitas-hidup untuk kemampuan asli di Menggunakan @capgo/capacitor-aktivitas-hidup, @capgo/capacitor-aktivitas-hidup untuk detail implementasi di @capgo/capacitor-aktivitas-hidup, dan Menggunakan @capgo/capacitor-pemain-video untuk kemampuan asli di Menggunakan @capgo/capacitor-pemain-video.

FAQ

FAQ untuk Plugin Navigation Bar

Bagaimana cara menginstal plugin Navigation Bar di aplikasi Capacitor?

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

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

Iya. Plugin Navigation Bar adalah paket Capacitor, sehingga dapat 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 (misalnya plugin v8 dengan Capacitor 8). Tabel kompatibilitas di README GitHub menyebutkan versi yang masih dipelihara.

Apakah @capgo/capacitor-navigation-bar gratis dan terbuka sumber?

Ya. Sumber code tersedia secara publik di GitHub di https://github.com/Cap-go/capacitor-navigation-bar/ dan paketnya dapat diinstal secara gratis dari npm. Laporan bug dan permintaan pull diterima.

Apakah saya dapat memperbarui code yang menggunakan Navigation Bar tanpa tinjauan App Store?

Menginstal atau mengupgrade plugin mengubah native code, sehingga memerlukan pembangunan toko baru. Setelah itu, perubahan JavaScript, HTML, dan CSS yang memanggil plugin dapat dikirimkan secara langsung dengan Capgo live updates.

UI & Sistem

Plugin terkait

Lihat semua plugin →

Menjalankan perubahan Navigation Bar tanpa menunggu tinjauan aplikasi

Setelah plugin masuk ke dalam build toko Anda, pembaruan Capgo secara langsung mengirimkan perubahan JavaScript, HTML, dan CSS ke pengguna dalam menit.

Mulai dengan Capgo