Getting Started

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

Instalasi

Anda dapat menggunakan Pengaturan Setup Bantuan AI 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 Setup Manual, instal plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah ini:

Instal paket

npm install @capgo/capacitor-transitions

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

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

Atur arah sebelum perubahan router mengubah rute

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

Pengaturan React JSX TypeScript

Mengimpor dari @capgo/capacitor-transitions/react Mengandung tipe JSX cap-router-outlet, cap-page, cap-header, cap-content, dan cap-footerDi proyek React sebagian besar, import tersebut membuat elemen kustom valid secara otomatis di TSX.

Jika TypeScript masih melaporkan kesalahan Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements'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/ adalah 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 yang kustom yang menggunakan folder terpisah, termasuk folder tersebut: types/ Untuk pengaturan TypeScript atau webpack yang kustom yang menggunakan folder terpisah, termasuk folder tersebut:

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

Kembali dengan Gesek

Memungkinkan atau mematikan gesekan 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 gesekan hanya ketika Capacitor melaporkan runtime iOS asli. Selama gesekan, transisi halaman mengikuti jari. Ketika pengguna melepaskan, transisi tersebut akan menyelesaikan dan meminta browser sejarah untuk kembali, atau membatalkan dan memulihkan halaman saat ini.

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

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

Menggunakan @capgo/capacitor-transitions dengan @capgo/native-navigation ketika native harus mengontrol bar atas dan bawah sementara konten web tetap menggunakan gerakan halaman Ionic.

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

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

Komponen

`<cap-router-outlet>`

Sifat	Tipe	Default	Pengertian
`platform`	`'ios' \| 'android' \| 'auto'`	`'auto'`	Gaya Animasi
`duration`	`number`	Gaya Platform Default	Durasi Animasi dalam Milisecond
`keep-in-dom`	`boolean`	`true`	Tahan Halaman Tidak Aktif di DOM
`max-cached`	`number`	`10`	Maksimum Halaman yang Ditampung
`swipe-gesture`	`boolean \| 'auto'`	`'auto'`	Aktifkan, Nonaktifkan, atau Deteksi Navigasi iOS:

Metode:

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

`<cap-page>`

Menggabungkan satu halaman dan mengeluarkan peristiwa siklus:

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

`<cap-content>`

Atribut	Jenis	Default	Deskripsi
`fullscreen`	`boolean`	`false`	Biarkan konten bergeser di balik header
`scroll-x`	`boolean`	`true`	Mengaktifkan pergerakan horizontal
`scroll-y`	`boolean`	`true`	Mengaktifkan pergerakan vertikal

Bantuan Framework

Masukannya framework memperlihatkan 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 });

Masukannya 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 Mulai untuk merencanakan migrasi dan operasi bisnis, hubungkannya dengan Menggunakan @capgo/capacitor-transisi untuk kemampuan native di Menggunakan @capgo/capacitor-transisi, Capgo Bisnis for the product workflow in Capgo Enterprise, untuk alur kerja produk di __CAPGO_KEEP_0__ Bisnis, Alternatif Plugin Bisnis Ionic Capgo Alternatives Capgo Alternatif untuk alur kerja produk di Capgo Alternatif, dan untuk alur kerja produk di Capgo Konsultasi.