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.

Pemasangan

Anda dapat menggunakan 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>

Mengatur 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 Mengandung tipe JSX untuk 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 akar 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 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 untuk kembali ke halaman sebelumnya, 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 menjalankan gerakan halaman 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);
}

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 tetapkan bar native dan gunakan @capgo/capacitor-transitions untuk konten halaman WebView di bawahnya.

Komponen

`<cap-router-outlet>`

Atribut	Jenis	Default	Pengenalan
`platform`	`'ios' \| 'android' \| 'auto'`	`'auto'`	Gaya animasi
`duration`	`number`	Default platform	Waktu animasi dalam milisecond
`keep-in-dom`	`boolean`	`true`	Tahan halaman tidak aktif di DOM
`max-cached`	`number`	`10`	Maksimum halaman yang dicache
`swipe-gesture`	`boolean \| 'auto'`	`'auto'`	Aktifkan, matikan, atau mendeteksi secara native gestur iOS di tepi

Metode:

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

`<cap-page>`

Menyelubungi satu halaman dan mengeluarkan event kehidupan:

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`	Aktifkan pergeseran horizontal
`scroll-y`	`boolean`	`true`	Aktifkan pergeseran 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 Getting Started untuk merencanakan migrasi dan operasi bisnis, hubungkannya dengan Menggunakan @capgo/capacitor-transisi untuk kemampuan native di Menggunakan @capgo/capacitor-transisi, Capgo Enterprise untuk alur kerja produk di Capgo Enterprise, Ionic Enterprise Plugin Alternatif untuk alur kerja produk di Ionic Enterprise Plugin Alternatif, Capgo Alternatif untuk alur kerja produk di Capgo Alternatif, dan Capgo Konsultasi untuk alur kerja produk di Capgo Konsultasi.