Getting Started

インストール

AI-Assisted セットアップを使用してプラグインをインストールできます。AIツールに Capgo スキルを追加するには、以下のコマンドを実行してください:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

次に、以下のプロンプトを使用してください:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-transitions` plugin in my project.

Manual Setupを使用する場合は、以下のコマンドを実行してください。プラットフォーム固有の指示に従ってください。

1. パッケージをインストール

   npm install @capgo/capacitor-transitions

2. ウェブコンポーネントを登録

   import '@capgo/capacitor-transitions';

3. ルーティングされたページをラップ

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

4. ルーターのルートが変更される前に方向を設定

   import { setDirection } from '@capgo/capacitor-transitions/react';
   
   setDirection('forward');
   router.push('/message/42');
   
   setDirection('back');
   router.back();

注記

Capacitor アプリのウェブ層で実行されるため、ネイティブの同期ステップはありません。

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

インポート @capgo/capacitor-transitions/react JSX の型定義を含む cap-router-outlet, cap-page, cap-header, cap-content、 cap-footer. React プロジェクトの多くでは、そのインポートは TSX で自動的にカスタム要素を有効にします。

TypeScript がまだ報告する場合 Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements'プロジェクトの宣言ファイルを追加してください:

src/capgo-transitions.d.ts

import '@capgo/capacitor-transitions/react';

Vite、Create React App、および多くの webpack React アプリでは、そのファイルを置くだけで十分です。 src/ Next.js の場合は、 src/ またはプロジェクトのルートに置き、 tsconfig.json を含めるようにしてください:

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

カスタムの TypeScript または webpack の設定が別の types/ フォルダを使用する場合、そのフォルダを含めるようにしてください:

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

スワイプバック

マークアップからiOSのエッジジェスチャーを有効または無効にする:

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

またはJavaScriptから:

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.

ジェスチャーを開始しないようにするには、要素に追加 data-swipe-gesture-ignore:

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

ネイティブナビゲーションと

使用 @capgo/capacitor-transitions と @capgo/native-navigation ネイティブがトップとボトムバーを管理し、ウェブコンテンツがイオニックスタイルのページ動作を維持する場合に使用します。

1. ネイティブナビゲーションパッケージをインストールして同期する:

   npm install @capgo/native-navigation
   npx cap sync

2. ネイティブブラウザを設定:

   import { NativeNavigation } from '@capgo/native-navigation';
   
   await NativeNavigation.configure({
     contentInsetMode: 'css',
   });
   
   await NativeNavigation.setNavbar({
     title: 'Inbox',
     backButton: { visible: false },
   });

3. ページを管理する責任をウェブトランジションアウトレットに残す:

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

4. 同じルーターエイベントから両方のシステムを制御する:

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

ネイティブのトップバーを再度動的にレンダリングしないようにします。 <cap-header>. Let @capgo/native-navigation ネイティブのバーを維持し、WebViewページの下部に表示するために使用します。 @capgo/capacitor-transitions コンポーネント

「コンポーネント」セクション

<cap-router-outlet>

タイプ	デフォルト	説明	Components
platform	'ios' | 'android' | 'auto'	'auto'	アニメーションスタイル
duration	number	プラットフォームのデフォルト	アニメーション時間（ミリ秒）
keep-in-dom	boolean	true	非アクティブページをDOMに保持する
max-cached	number	10	キャッシュされたページの最大数
swipe-gesture	boolean | 'auto'	'auto'	iOSのエッジジェスチャーを有効、無効、またはネイティブ検出する

メソッド:

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

<cap-page>

1つのページをwrapし、ライフサイクルイベントを発行します:

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

<cap-content>

属性	型	デフォルト	説明
fullscreen	boolean	false	ヘッダーに後ろにコンテンツがスクロールするようにします
scroll-x	boolean	true	水平方向のスクロールを有効にします
scroll-y	boolean	true	垂直方向のスクロールを有効にします

フレームワーク ヘルパー

フレームワーク エントリポイントは、同じコア ヘルパーを公開しています

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

利用可能なエントリポイント:

• @capgo/capacitor-transitions/react
• @capgo/capacitor-transitions/vue
• @capgo/capacitor-transitions/angular
• @capgo/capacitor-transitions/svelte
• @capgo/capacitor-transitions/solid

__CAPGO_KEEP_0__

Capgoを使用している場合 はじめに 企業向けの移行計画と運用を計画するには、 Capacitorのnative機能を使用するには@capgo/capacitor-transitionsを使用します for the native capability in Using @capgo/capacitor-transitions, Capgo Enterprise for the product workflow in Capgo Enterprise, Ionic Enterprise Pluginの代替の製品フローで Capgo Alternatives Capgo Alternatives for the product workflow in Capgo Alternatives, and Capgo Consulting for the product workflow in Capgo Consulting.