Getting Started

インストール

AI-Assisted Setupを使用してプラグインをインストールできます。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. ルーティングされたページを Wrap

   <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 プロジェクトの多くでは、その import は 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 アプリでは、そのファイルを置くだけで十分です。 Next.js の場合、 src/ またはプロジェクトのルートに置き、 src/ を含むようにしてください: tsconfig.json クリップボードにコピー

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

フォルダを使用する場合、そのフォルダを含めてください: types/ protectedTokens

{
  "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 CapacitorがネイティブiOSランタイムを報告する場合にのみジェスチャーを有効にする。ジェスチャー中、ページのトランジションは指の動きに従う。ユーザーがリリースすると、トランジションは完了し、ブラウザの履歴に戻るよう要求するか、キャンセルし、現在のページを復元する。

ジェスチャーを開始しないようにするには、次のように追加します。 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. ネイティブのChromeを設定:

   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 つのページをラップし、ライフサイクルイベントを発行します。

• 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

「Getting Started」から続けてください

Capgoを使用している場合 はじめに 企業の移行と運用を計画するには、を接続してください Capgoの@capgo/capacitor-transitionsを使用 Capgoの@capgo/capacitor-transitionsのネイティブ機能を使用 Capgo Enterprise for the product workflow in Capgo Enterprise, Ionic Enterprise Pluginの代替 Ionic Enterprise Pluginの代替の製品フローを使用 Capgo Alternatives for the product workflow in Capgo Alternatives, and Capgo Consulting for the product workflow in Capgo Consulting.