Getting Started

이 플러그인 설치 단계와 전체 마크다운 가이드를 포함한 설치 프롬프트를 복사합니다.

        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.

설치

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을 선호한다면, 다음 명령어를 실행하고 아래의 플랫폼별 지침을 따르세요:

패키지 설치

npm install @capgo/capacitor-transitions

웹 컴포넌트 등록
```
import '@capgo/capacitor-transitions';
```

라우팅된 페이지 wrapping

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

라우터가 경로를 변경하기 전에 방향을 설정하세요

import { setDirection } from '@capgo/capacitor-transitions/react';

setDirection('forward');
router.push('/message/42');

setDirection('back');
router.back();

리액트 설정

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. React 프로젝트에서 대부분의 경우, 그 임포트는 TSX에서 자동으로 커스텀 엘리먼트를 유효하게 만듭니다.

TypeScript이 여전히 보고한다면 Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements'프로젝트 선언 파일을 추가하세요:

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

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

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

사용 @capgo/capacitor-transitions 과 @capgo/native-navigation native가 상단 및 하단 바를 소유하고 Ionic-style 페이지 동작을 유지하는 웹 콘텐츠를 사용할 때.

자연스러운 네이티브 네비게이션 패키지를 설치하고 동기화하세요:
터미널 창
```
npm install @capgo/native-navigation
npx cap sync
```

자연스러운 크롬을 구성하세요:

import { NativeNavigation } from '@capgo/native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
});

await NativeNavigation.setNavbar({
  title: 'Inbox',
  backButton: { visible: false },
});

페이지만 책임지는 웹 전환 아웃렛을 유지하세요:

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

같은 라우터 이벤트에서 두 시스템을 제어하세요:

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>로 렌더링하지 마십시오. @capgo/native-navigation 바를 네이티브로 유지하고 @capgo/capacitor-transitions 위치에 있는 WebView 페이지 콘텐츠 아래쪽을 사용하십시오.

컴포넌트

`<cap-router-outlet>`

속성	타입	기본값	설명
`platform`	`'ios' \| 'android' \| 'auto'`	`'auto'`	애니메이션 스타일
`duration`	`number`	플랫폼 기본	밀리초 단위 애니메이션 지속 시간
`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-page>는 하나의 페이지를 감싸고 라이프 사이클 이벤트를 내보냅니다.

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를 사용 중이라면 Getting Started 기업 운영 및 마이그레이션 계획을 세우기 위해 Capgo를 사용하여 @capgo/capacitor-transitions Capgo의 Native 기능을 사용하기 위해 @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 Capgo 제품 워크플로우에 대한 Capgo 컨설팅을 위한 것입니다.