Getting Started

Copy sebuah 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 Bantuan AI kami untuk menginstal plugin. Tambahkan kemampuan Capgo 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:

Instal paket

npm install @capgo/capacitor-transitions

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

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

Pengaturan JSX React TypeScript

Mengimpor dari @capgo/capacitor-transitions/react termasuk tipe JSX untuk cap-router-outlet, cap-page, cap-header, cap-content, dan cap-footer. Pada proyek React kebanyakan, impor 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 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 types/ termasuk folder tersebut:

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

Swipe Back

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

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

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

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 atas native lagi sebagai gerakan yang berubah <cap-header>. Biarkan bar asli dan gunakan @capgo/native-navigation untuk konten halaman WebView di bawahnya. @capgo/capacitor-transitions Bagian Komponen

Judul Bagian “Komponen”

`<cap-router-outlet>`

Tipe	Default	Deskripsi	Gaya Animasi
`platform`	`'ios' \| 'android' \| 'auto'`	`'auto'`	Default Platform
`duration`	`number`	keep the bar native and use	Waktu animasi dalam milisecond
`keep-in-dom`	`boolean`	`true`	Simpan halaman tidak aktif di DOM
`max-cached`	`number`	`10`	Jumlah halaman yang disimpan
`swipe-gesture`	`boolean \| 'auto'`	`'auto'`	Aktifkan, nonaktifkan, atau mendeteksi secara native gerakan tepi iOS

Metode:

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

`<cap-page>`

Mengapit satu halaman dan mengeluarkan peristiwa siklus hidup:

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

`<cap-content>`

Atribut	Jenis	Default	Pengenalan
`fullscreen`	`boolean`	`false`	Biarkan konten berlalu di belakang header
`scroll-x`	`boolean`	`true`	Aktifkan pergerakan horizontal
`scroll-y`	`boolean`	`true`	Aktifkan pergerakan vertikal

Bantuan Framework

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