Mulai

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.

Pasang paket

npm install @capgo/capacitor-transitions

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

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>

Atur 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 mengandung tipe JSX 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 mengandungnya:

{
  "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"]
}

Judul bagian “Swipe 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>

Gunakan @capgo/capacitor-transitions dengan @capgo/native-navigation ketika navigasi asli harus mengontrol bar atas dan bawah sementara konten web menjaga 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 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);
}

Menggerakkan baik sistem yang satu maupun sistem lain 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 sebuah 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`	Platform Default	Durasi Animasi dalam Milisecond
`keep-in-dom`	`boolean`	`true`	Tetapkan Halaman Tidak Aktif di DOM
`max-cached`	`number`	`10`	Maksimum Halaman yang Ditambahkan ke Cache
`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 Event Hidup:

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

`<cap-content>`

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

Bantuan Framework

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

Dapat diakses melalui:

@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 dalam Menggunakan @capgo/capacitor-transisi, Capgo Enterprise untuk alur kerja produk dalam Capgo Enterprise, Ionic Enterprise Plugin Alternatives untuk alur kerja produk dalam Ionic Enterprise Plugin Alternatives, Capgo Alternatives untuk alur produk di Capgo Alternatif, dan Capgo Konsultasi untuk alur produk di Capgo Konsultasi.