Lompat ke konten
Capgo - Pembaruan Langsung untuk Aplikasi Capacitor Capgo

@capgo/capacitor-navigasi native

Tampilkan navigasi chrome iOS dan Android secara native sambil JavaScript mengontrol rute, konten, ikon, label, dan status bar.
Mulai sekarang GitHub

Chrome native

Tampilkan bar navigasi atas dan tab bar bawah dengan UI platform alih-alih komponen web.

Rute yang dimiliki web

Native mengirimkan event niat pengguna, kemudian router yang sudah ada mengubah konten WebView.

Ikon yang diserialisasi

Konfigurasi tab dan tombol dengan deskriptor SVG, SF Symbol, gambar yang dibundel, atau Android drawable.

Shell transisi asli

Capturakan WebView saat ini, update konten dengan JavaScript, kemudian selesaikan dengan animasi snapshot ke-WebView asli.

Perbesar rute

Buka rute kartu, grid, dan media-detail dengan geometri zoom elemen yang dibagikan secara native.

Demo

Bagian berjudul “Demo”
Shell asliAliran sentuh
Demo animasi shell navigasi asli menampilkan navbar asli, tab, dan konten WebViewDemo animasi aliran sentuh asli menampilkan seleksi tab, transisi push, dan tombol kembali asli

Inti API

Bagian berjudul “Core API”
  • configure(options?) Mengaktifkan host chrome native dan mengontrol insets konten.
  • setNavbar(options) Mengupdate judul, subjudul, tombol kembali, tombol, warna, transparansi, dan visibilitas.
  • setTabbar(options) Mengupdate tab, tab yang dipilih, badge, label, ikon, warna, dan visibilitas.
  • beginTransition(options?) Merekam WebView keluaran sebelum perubahan jalur JavaScript.
  • finishTransition(options?) Menganimasikan dari snapshot yang direkam ke WebView hidup setelah konten jalur siap.
  • beginZoomTransition(target, options?) dan finishZoomTransition(target?, options?) adalah bantuan JavaScript untuk transisi zoom dari elemen atau persegi panjang.
  • getPluginVersion() Mengembalikan versi marker implementasi native.

Event

Bagian berjudul “Event”
  • navbarBack Mengeluarkan peristiwa ketika affordance kembali native disentuh.
  • navbarItemTap fires ketika tombol aksi native navbar diklik.
  • tabSelect fires ketika tab native dipilih.
  • safeAreaChanged melaporkan perubahan inset native bar dan area aman.
  • transitionStart dan transitionEnd melaporkan batas transisi native.

Model Platform

Judul Bagian “Model Platform”

iOS menggunakan UINavigationBar dan UITabBar. Pada iOS 26 dan lebih baru, plugin memungkinkan sistem mengrender perilaku Liquid Glass; versi lebih lama menggunakan fallback material translucent/native.

Android menggunakan toolbar AppCompat dan navigasi bawah material dengan penempatan edge-to-edge.

Plugin ini tidak membuat satu WebView native per rute. Versi 1 menjaga WebView Capacitor tunggal untuk stabilitas bridge dan membiarkan native mengontrol hanya frame, visual bar, chrome pilihan tab, pelaporan area aman, dan shell transisi.

Teruskan dari @capgo/capacitor-navigasi-nasional

Judul Bagian “Teruskan dari @capgo/capacitor-navigasi-nasional”

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