Getting Started

Installation

Sie können unser AI-gestütztes Setup verwenden, um das Plugin zu installieren. Fügen Sie die Capgo-Fähigkeiten Ihrem AI-Tool mit der folgenden Befehl hinzu:

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

Verwenden Sie dann die folgende Anfrage:

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

Wenn Sie die manuelle Einrichtung bevorzugen, installieren Sie das Plugin, indem Sie die folgenden Befehle ausführen und die unten angegebenen plattform-spezifischen Anweisungen befolgen:

1. Installieren Sie das Paket

   npm install @capgo/capacitor-transitions

2. Registrieren Sie die Web-Komponenten

   import '@capgo/capacitor-transitions';

3. Routete Seiten einhüllen

   <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. Legen Sie die Richtung fest, bevor sich der Router auf eine neue Route umschaltet

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

Hinweis

Für dieses Paket gibt es keine native Synchronisierungsstep. Es läuft in der Web-Schicht Ihres Capacitor-Apps.

React-Einrichtung

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

Importieren von @capgo/capacitor-transitions/react enthält JSX-Typen für cap-router-outlet, cap-page, cap-header, cap-contentund cap-footer. In most React projects, that import makes the custom elements valid in TSX automatically.

Wenn TypeScript immer noch Meldungen ausgibt Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements', fügen Sie eine Projektdeklarationsdatei hinzu:

src/capgo-transitions.d.ts

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

Für Vite, Create React App und die meisten webpack-React-Anwendungen reicht es aus, die Datei in src/ zu platzieren. Für Next.js legen Sie sie in src/ oder den Projektroot und stellen sicher, dass tsconfig.json sie einbindet:

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

Für benutzerdefinierte TypeScript- oder webpack-Einstellungen, die ein separates types/ Verzeichnis verwenden, fügen Sie stattdessen das Verzeichnis hinzu:

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

Zurück scrollen

Aktivieren oder deaktivieren Sie die iOS-Eckgeste aus 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>

Oder aus JavaScript:

const outlet = document.querySelector('cap-router-outlet');

outlet?.setSwipeGesture('auto');
outlet?.setSwipeGesture(true);
outlet?.setSwipeGesture(false);

auto Aktiviert die Geste nur, wenn Capacitor eine native iOS-Umgebung meldet. Während der Geste folgt die Seiteübergangsgeste der Fingerbewegung. Wenn der Benutzer loslässt, beendet die Übergangsgeste sich und fragt den Browserhistorie, zurückzugehen, oder storniert sie und restauriert die aktuelle Seite.

Um ein Element davon abzuhalten, die Geste zu starten, fügen Sie data-swipe-gesture-ignore:

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

Mit Native Navigation

Verwenden @capgo/capacitor-transitions mit @capgo/native-navigation wenn native die oberen und unteren Leisten besitzen soll, während die Webinhalte die Ionic-Style-Seitenbewegung beibehalten.

1. Installieren und synchronisieren Sie das native Navigation-Paket:

   npm install @capgo/native-navigation
   npx cap sync

2. Konfigurieren Sie die native Chrome:

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

3. Behalten Sie die Web-Übergangsausgabe für Seiten nur verantwortlich:

   <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. Steueren Sie beide Systeme von denselben Router-Ereignissen aus:

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

Lassen Sie die native Oberleiste nicht als bewegliche wieder rendern. Lassen Sie sich die Oberleiste native halten und verwenden Sie sie für die WebView-Seiteinhalt darunter. <cap-header>. Lassen Sie sich @capgo/native-navigation halten und verwenden Sie @capgo/capacitor-transitions Komponenten

Abschnitt mit dem Titel „Komponenten“

<cap-router-outlet>

Typ	Standard	Beschreibung	Section
platform	'ios' | 'android' | 'auto'	'auto'	Animationsschwerpunkt
duration	number	Plattformstandard	Animationdauer in Millisekunden
keep-in-dom	boolean	true	Inaktive Seiten im DOM behalten
max-cached	number	10	Maximale Anzahl an gecacheten Seiten
swipe-gesture	boolean | 'auto'	'auto'	iOS-Randgeste ermöglichen, deaktivieren oder native-detecten

Methode(n):

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

<cap-page>

Ermöglicht die Verwendung einer Seite und sendet Lebenszyklusereignisse aus:

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

<cap-content>

Attribut	Typ	Standard	Beschreibung
fullscreen	boolean	false	Lasst den Inhalt hinter dem Header scrollen
scroll-x	boolean	true	Horizontales Scrollen aktivieren
scroll-y	boolean	true	Vertikales Scrollen aktivieren

Hilfsfunktionen des Frameworks

Die Framework-Eintrittspunkte offenbaren die gleichen Kernhilfen:

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

Verfügbare Eintrittspunkte:

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

Fortsetzung von Getting Started

Wenn Sie Anfänger um die Migration und die Betriebsabläufe zu planen, verbinden Sie es mit Mit @capgo/capacitor-Übergänge zur nativen Fähigkeit in Mit @capgo/capacitor-Übergänge, Capgo Enterprise for the product workflow in Capgo Enterprise, zur Produktablauf in __CAPGO_KEEP_0__ Enterprise, Ionische Enterprise-Plugin-Alternativen Capgo Alternatives Capgo Alternativen zur Produktablauf in Capgo Alternativen und auch in Capgo Consulting für das Produktworkflow in Capgo Consulting.