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

Instal 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

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 termasuk tipe JSX cap-router-outlet, cap-page, cap-header, cap-content, dan cap-footer. Di kebanyakan proyek React, 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 kebanyakan 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, termasuk folder tersebut: types/ Salin ke clipboard

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

Kembali dengan Gesek

Aktifkan atau nonaktifkan gesekan 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 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 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 Ionik.

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

Bangun 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	Jenis	Nilai Default	Deskripsi
`platform`	`'ios' \| 'android' \| 'auto'`	`'auto'`	gaya animasi
`duration`	`number`	default platform	durasi animasi dalam milisecond
`keep-in-dom`	`boolean`	`true`	Simpan halaman tidak aktif di DOM
`max-cached`	`number`	`10`	Halaman maksimum yang disimpan
`swipe-gesture`	`boolean \| 'auto'`	`'auto'`	Aktifkan, nonaktifkan, atau mendeteksi secara native gestur iOS di tepi

Metode:

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

`<cap-page>`

Mengapit satu halaman dan mengeluarkan event kehidupan:

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

`<cap-content>`

Atribut	Tipe	Default	Pengenalan
`fullscreen`	`boolean`	`false`	Biarkan konten berlalu di belakang 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 Pengenalan

Mengapa menggunakan Mulai untuk merencanakan migrasi dan operasi bisnis, hubungkannya dengan Menggunakan @capgo/capacitor-transisi untuk kemampuan asli dalam Menggunakan @capgo/capacitor-transisi, Capgo Enterprise for the product workflow in Capgo Enterprise, untuk alur kerja produk dalam __CAPGO_KEEP_0__ Enterprise, Alternatif Plugin Bisnis Ionic Capgo Alternatives Capgo Alternatif untuk alur kerja produk dalam Capgo Alternatif, dan untuk alur kerja produk di Capgo Konsultasi.