__CAPGO_KEEP_0__ 전환 저장소

설치

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.

__CAPGO_KEEP_1__

1. __CAPGO_KEEP_2__

   npm install @capgo/capacitor-transitions

2. __CAPGO_KEEP_4__

   import '@capgo/capacitor-transitions';

3. __CAPGO_KEEP_0__

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

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

주의

이 패키지는 네이티브 동기화 단계가 없습니다. Capacitor 앱의 웹层에서 실행됩니다.

리액트 설정

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

리액트 JSX TypeScript

import @capgo/capacitor-transitions/react JSX 형식의 타입 정의를 포함하여 cap-router-outlet, cap-page, cap-header, cap-content, cap-footer대부분의 리액트 프로젝트에서 이 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/ 복사

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

Swipe Back

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 런타임을 보고할 때만 제스처를 활성화합니다. 제스처 중 페이지 전환은 손가락에 따라 진행됩니다. 사용자가 손가락을 놓으면 전환은 완료되고 브라우저 히스토리에게 뒤로 가기를 요청하거나 취소되고 현재 페이지를 복원합니다.

Swipe Back 제스처를 시작하지 않도록 하려면 data-swipe-gesture-ignore:

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

Native Navigation을 사용하세요.

Native Navigation을 사용하세요. @capgo/capacitor-transitions Native Navigation을 사용하세요. @capgo/native-navigation native가 상단 및 하단 바를 소유하고 Ionic-style 페이지 이동을 유지하는 웹 콘텐츠를 유지해야 합니다.

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 자연스러운 바를 유지하고 @capgo/capacitor-transitions WebView 페이지 콘텐츠 아래에 사용

Components

<cap-router-outlet>

속성	타입	기본값	설명
platform	'ios' | 'android' | 'auto'	'auto'	애니메이션 스타일
duration	number	플랫폼 기본	__CAPGO_KEEP_0__ 밀리초
keep-in-dom	boolean	true	비활성 페이지 DOM에 유지
max-cached	number	10	캐시된 페이지의 최대 수
swipe-gesture	boolean | 'auto'	'auto'	iOS 에지 제스처를 iOS 기본 제스처, 비활성화 또는 감지

메서드:

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

<cap-page>

페이지 하나를 감싸고 라이프 사이클 이벤트를 내뱉습니다:

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

<cap-content>

속성	타입	기본값	설명
fullscreen	boolean	false	Let content scroll behind the header
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를 사용 중이라면 Getting Started 이동 및 기업 운영을 계획하고 연결하세요. @capgo/capacitor-transitions을 사용하여 @capgo/capacitor-transitions의 원시 기능을 위해 Capgo Enterprise Capgo Enterprise의 제품 워크플로우를 위해 Ionic Enterprise Plugin Alternatives Ionic Enterprise Plugin Alternatives의 제품 워크플로우를 위해 Capgo Alternatives Capgo Alternatives의 제품 워크플로우를 위해, Capgo Consulting Capgo Consulting의 제품 워크플로우를 위해.