Pembukaan

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.

Pasang paket

npm install @capgo/capacitor-transitions

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

Bungkus halaman yang berpeta

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

Pastikan arah sebelum router Anda 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>
  );
}

React JSX TypeScript

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

Jika TypeScript masih melaporkan 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 kebanyakan aplikasi React webpack, menempatkan file tersebut di src/ sudah cukup. Untuk Next.js, letakkan di src/ atau root proyek dan pastikan tsconfig.json termasuk:

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

Untuk pengaturan TypeScript atau webpack yang khusus, yang menggunakan folder terpisah, masukkan folder tersebut saja: types/ Salin ke clipboard

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

Bab yang berjudul “Kembali”

Salin ke clipboard

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

Salin ke clipboard

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

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

auto enables the gesture only when Capacitor reports a native iOS runtime. During the gesture, the page transition follows the finger. When the user releases, the transition either completes and asks the browser history to go back, or cancels and restores the current page.

Salin ke clipboard data-swipe-gesture-ignore:

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

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

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

Menggerakkan kedua sistem dari event 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 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`	Tetapkan Halaman Tidak Aktif di DOM
`max-cached`	`number`	`10`	Maksimum Halaman yang Ditampilkan
`swipe-gesture`	`boolean \| 'auto'`	`'auto'`	Aktifkan, Nonaktifkan, atau Deteksi Gesture iOS Edge

Metode:

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

`<cap-page>`

Menggabungkan Satu Halaman dan Mengeluarkan Event Hidup:

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

`<cap-content>`

Attribute	Jenis	Default	Deskripsi
`fullscreen`	`boolean`	`false`	Biarkan konten berlalu di belakang header
`scroll-x`	`boolean`	`true`	Mengaktifkan scrolling horizontal
`scroll-y`	`boolean`	`true`	Mengaktifkan scrolling vertikal

Bantuan Framework

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

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 Getting Started untuk merencanakan migrasi dan operasi perusahaan, hubungkannya dengan Menggunakan @capgo/capacitor-transisi untuk kemampuan asli di Menggunakan @capgo/capacitor-transisi, Capgo Perusahaan untuk alur kerja produk di Capgo Perusahaan, Alternatif Plugin Ionic Enterprise untuk alur kerja produk di Alternatif Plugin Ionic Enterprise, Capgo Alternatif untuk alur kerja produk di Capgo Alternatif, dan Capgo Konsultasi untuk alur kerja produk di Capgo Konsultasi.