Getting Started

1. Pasang paket

   npm install @capgo/capacitor-transitions

2. Daftarkan komponen web

   import '@capgo/capacitor-transitions';

3. Bungkus halaman yang diarahkan

   <cap-router-outlet platform="auto" swipe-gesture="auto">
     <cap-page>
       <cap-header slot="header">
         <h1>Inbox</h1>
       </cap-header>
   
       <cap-content slot="content">
         <button>Open message</button>
       </cap-content>
   
       <cap-footer slot="footer">
         <nav>Tabs</nav>
       </cap-footer>
     </cap-page>
   </cap-router-outlet>

4. Atur arah sebelum perubahan jalur router

   import { setDirection } from '@capgo/capacitor-transitions/react';
   
   setDirection('forward');
   router.push('/message/42');
   
   setDirection('back');
   router.back();

Catatan

Tidak ada langkah sinkron native untuk paket ini. Ini berjalan di lapisan web aplikasi Capacitor Anda.

Pengaturan React

import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { initTransitions, setDirection, setupPage, setupRouterOutlet } from '@capgo/capacitor-transitions/react';
import '@capgo/capacitor-transitions';

initTransitions({ platform: 'auto' });

export function AppShell() {
  const outletRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!outletRef.current) return;

    setupRouterOutlet(outletRef.current, {
      platform: 'auto',
      swipeGesture: 'auto',
    });
  }, []);

  return (
    <cap-router-outlet ref={outletRef}>
      {/* Your router renders cap-page children here. */}
    </cap-router-outlet>
  );
}

export function InboxPage() {
  const navigate = useNavigate();
  const pageRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!pageRef.current) return;

    return setupPage(pageRef.current, {
      onDidEnter: () => console.log('Inbox visible'),
    });
  }, []);

  return (
    <cap-page ref={pageRef}>
      <cap-header slot="header">
        <h1>Inbox</h1>
      </cap-header>

      <cap-content slot="content">
        <button
          onClick={() => {
            setDirection('forward');
            navigate('/message/42');
          }}
        >
          Open message
        </button>
      </cap-content>
    </cap-page>
  );
}

React JSX TypeScript

Mengimpor dari @capgo/capacitor-transitions/react termasuk tipe JSX untuk cap-router-outlet, cap-page, cap-header, cap-content, dan cap-footer. Pada umumnya, impor itu membuat elemen kustom valid di TSX secara otomatis.

Jika TypeScript masih melaporkan kesalahan Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements', tambahkan file deklarasi proyek:

src/capgo-transisi.d.ts

import '@capgo/capacitor-transitions/react';

Untuk Vite, Create React App, dan sebagian besar aplikasi React webpack, menempatkan file tersebut di dalam src/ sudah cukup. Untuk Next.js, letakkan di src/ atau root proyek dan pastikan tsconfig.json menggunakannya:

{
  "include": ["src", "src/capgo-transitions.d.ts"]
}

Untuk pengaturan TypeScript atau webpack yang kustom yang menggunakan folder terpisah types/ termasuk folder tersebut:

{
  "include": ["src", "types"]
}

Swipe Balik

Aktifkan atau nonaktifkan gestur tepi iOS dari markup:

<cap-router-outlet swipe-gesture="auto"></cap-router-outlet>
<cap-router-outlet swipe-gesture="true"></cap-router-outlet>
<cap-router-outlet swipe-gesture="false"></cap-router-outlet>

Atau dari JavaScript:

const outlet = document.querySelector('cap-router-outlet');

outlet?.setSwipeGesture('auto');
outlet?.setSwipeGesture(true);
outlet?.setSwipeGesture(false);

auto Mengaktifkan gestur hanya ketika Capacitor melaporkan runtime iOS native. Selama gestur, transisi halaman mengikuti jari. Ketika pengguna melepaskan, transisi tersebut dapat menyelesaikan dan meminta browser sejarah untuk kembali, atau membatalkan dan memulihkan halaman saat ini.

Untuk mencegah suatu elemen memulai gestur, tambahkan data-swipe-gesture-ignore:

<button data-swipe-gesture-ignore>Open drawer</button>

Dengan Navigasi Asli

Gunakan @capgo/capacitor-transitions dengan @capgo/native-navigation ketika native harus menguasai bar atas dan bawah sementara konten web tetap menjalankan gerakan halaman seperti Ionic.

1. Pasang dan sinkronkan paket navigasi native:

   npm install @capgo/native-navigation
   npx cap sync

2. Konfigurasi chrome native:

   import { NativeNavigation } from '@capgo/native-navigation';
   
   await NativeNavigation.configure({
     contentInsetMode: 'css',
   });
   
   await NativeNavigation.setNavbar({
     title: 'Inbox',
     backButton: { visible: false },
   });

3. Tetapkan outlet transisi web bertanggung jawab atas halaman saja:

   <cap-router-outlet platform="auto" swipe-gesture="auto">
     <cap-page>
       <cap-content slot="content" fullscreen>
         <main class="native-page">Inbox content</main>
       </cap-content>
     </cap-page>
   </cap-router-outlet>

   .native-page {
     padding-top: var(--cap-native-navigation-top);
     padding-bottom: var(--cap-native-navigation-bottom);
   }

4. Buat kedua sistem dijalankan dari acara router yang sama:

   import { NativeNavigation } from '@capgo/native-navigation';
   import { setDirection } from '@capgo/capacitor-transitions/react';
   import { router } from './router';
   
   await NativeNavigation.addListener('navbarBack', () => {
     setDirection('back');
     router.back();
   });
   
   async function openMessage(id: string) {
     setDirection('forward');
     router.push(`/message/${id}`);
   
     await NativeNavigation.setNavbar({
       title: 'Message',
       backButton: { visible: true, title: 'Inbox' },
     });
   }

Jangan menampilkan bar atas asli lagi sebagai gerakan. <cap-header>Biarkan bar asli dan gunakan @capgo/native-navigation untuk konten halaman WebView di bawahnya. @capgo/capacitor-transitions Komponen

Bagian berjudul “Komponen”

<cap-router-outlet>

Tipe	Default	Deskripsi	Gaya animasi
platform	'ios' | 'android' | 'auto'	'auto'	Gaya Animasi
duration	number	Platform default	Durasi animasi dalam milisecond
keep-in-dom	boolean	true	__CAPGO_KEEP_0__ halaman tidak aktif di DOM
max-cached	number	10	__CAPGO_KEEP_1__ halaman yang disimpan
swipe-gesture	boolean | 'auto'	'auto'	__CAPGO_KEEP_2__ iOS gesture edge, deteksi atau native

Metode:

• push(element, config?)
• pop(config?)
• setRoot(element, config?)
• setSwipeGesture(true | false | 'auto')

<cap-page>

Menggabungkan satu halaman dan mengeluarkan peristiwa siklus hidup:

• cap-will-enter
• cap-did-enter
• cap-will-leave
• cap-did-leave

<cap-content>

Atribut	Tipe	Nilai default	Deskripsi
fullscreen	boolean	false	Biarkan konten bergeser di balik header
scroll-x	boolean	true	Aktifkan pergeseran horizontal
scroll-y	boolean	true	Aktifkan pergeseran vertikal

Bantuan Framework

Pintasan masuk framework menampilkan helper inti yang sama:

import { initTransitions, setDirection, setupPage, setupRouterOutlet } from '@capgo/capacitor-transitions/react';

initTransitions({ platform: 'auto' });
setDirection('forward');
setupRouterOutlet(element, { platform: 'auto', swipeGesture: 'auto' });
setupPage(element, { onWillEnter, onDidEnter, onWillLeave, onDidLeave });

Pintasan masuk yang tersedia:

• @capgo/capacitor-transitions/react
• @capgo/capacitor-transitions/vue
• @capgo/capacitor-transitions/angular
• @capgo/capacitor-transitions/svelte
• @capgo/capacitor-transitions/solid

__CAPGO_KEEP_0__

Bagian berjudul “Lanjutkan dari Getting Started” Mengawali untuk merencanakan migrasi dan operasi bisnis, hubungkannya dengan Menggunakan @capgo/capacitor-transisi untuk kemampuan asli dalam Menggunakan @capgo/capacitor-transisi, Capgo Bisnis untuk alur kerja produk dalam Capgo Bisnis, Alternatif Plugin Bisnis Ionic untuk alur kerja produk dalam Alternatif Plugin Bisnis Ionic, Capgo Alternatif untuk alur kerja produk dalam Capgo Alternatif, dan Capgo Konsultasi untuk alur kerja produk dalam Capgo Konsultasi.