Getting Started

Copy prompt pengaturan dengan langkah instalasi dan panduan markdown lengkap untuk plugin ini.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-transitions`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/transitions/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Pemasangan

Anda dapat menggunakan Pengaturan Bantu AI kami untuk menginstal plugin. Tambahkan Capgo kemampuan ke alat AI Anda menggunakan perintah berikut:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Lalu gunakan prompt berikut:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-transitions` plugin in my project.

Jika Anda lebih suka Manual Setup, instal plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah ini:

Pasang paket

npm install @capgo/capacitor-transitions

Daftarkan komponen web
```
import '@capgo/capacitor-transitions';
```

Bungkus halaman yang dilacak

<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>

Tetapkan arah sebelum perubahan jalur router Anda

import { setDirection } from '@capgo/capacitor-transitions/react';

setDirection('forward');
router.push('/message/42');

setDirection('back');
router.back();

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>
  );
}

Memasukkan dari

, dan @capgo/capacitor-transitions/react . Pada proyek React kebanyakan, impor tersebut membuat elemen kustom valid secara otomatis di TSX. cap-router-outlet, cap-page, cap-header, cap-contentJika TypeScript masih melaporkan cap-footer, tambahkan file deklarasi proyek:

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

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 mengikutinya:

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

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

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

Swipe Back

Mengaktifkan atau menonaktifkan gestur 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 akan menyelesaikan dan meminta browser sejarah untuk kembali, atau membatalkan dan memulihkan halaman saat ini.

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

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

Pilih @capgo/capacitor-transitions dengan @capgo/native-navigation ketika native harus menguasai bar atas dan bawah sementara konten web menjaga gerakan halaman Ionic-style.

Instal dan sinkronkan paket navigasi native:
Jendela terminal
```
npm install @capgo/native-navigation
npx cap sync
```

Konfigurasi chrome native:

import { NativeNavigation } from '@capgo/native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
});

await NativeNavigation.setNavbar({
  title: 'Inbox',
  backButton: { visible: false },
});

Tetapkan outlet transisi web bertanggung jawab atas halaman hanya:

<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);
}

Buat kedua sistem berjalan 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 render bar top native lagi sebagai gerakan <cap-header>. Biarkan @capgo/native-navigation Tetapkan bar native dan gunakan @capgo/capacitor-transitions untuk konten halaman WebView di bawahnya.

Komponen

`<cap-router-outlet>`

Atribut	Tipe	Default	Deskripsi
`platform`	`'ios' \| 'android' \| 'auto'`	`'auto'`	Gaya animasi
`duration`	`number`	Default platform	Durasi animasi dalam milisecond
`keep-in-dom`	`boolean`	`true`	Tahan halaman tidak aktif di DOM
`max-cached`	`number`	`10`	Maksimum halaman yang dicache
`swipe-gesture`	`boolean \| 'auto'`	`'auto'`	Aktifkan, nonaktifkan, atau mendeteksi secara native gestur iOS edge

Metode:

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

`<cap-page>`

Mengelilingi satu halaman dan mengeluarkan peristiwa siklus:

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

`<cap-content>`

Atribut	Tipe	Default	Deskripsi
`fullscreen`	`boolean`	`false`	Biarkan konten bergeser di belakang header
`scroll-x`	`boolean`	`true`	Aktifkan peramban horizontal
`scroll-y`	`boolean`	`true`	Aktifkan peramban vertikal

Bantuan Framework

Masukan utama framework menampilkan bantuan 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 });

Masukan yang tersedia:

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

Teruskan dari Getting Started

Jika Anda menggunakan Getting Started untuk merencanakan migrasi dan operasi perusahaan, hubungkannya dengan Menggunakan @capgo/capacitor-transisi untuk kemampuan asli di Menggunakan @capgo/capacitor-transisi, Capgo Enterprise untuk alur produk di Capgo Enterprise, Alternatif Plugin Ionic Enterprise untuk alur produk di Alternatif Plugin Ionic Enterprise, Capgo Alternatif untuk alur produk di Capgo Alternatif, dan Capgo Konsultasi untuk alur produk di Capgo Konsultasi.