Einstieg

Installation

Sie können unsere AI-gestützte Einrichtung verwenden, um das Plugin zu installieren. Fügen Sie den Capgo-Fähigkeiten Ihrer KI-Tool mithilfe 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 eine manuelle Einrichtung bevorzugen, installieren Sie das Plugin, indem Sie die folgenden Befehle ausführen und die untenstehenden 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. Routierte Seiten einbetten

   <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 Ihr 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 im Weblayer deiner Capacitor-Anwendung.

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-content und cap-footerIn den meisten React-Projekten macht diese Importierung die benutzerdefinierten Elemente in TSX automatisch gültig.

Wenn TypeScript immer noch meldet 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, diese Datei in src/ auszuführen. Für Next.js legen Sie sie in src/ oder in den Projektroot und stellen sicher, dass tsconfig.json es einbezieht:

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

Für benutzerdefinierte TypeScript- oder webpack-Konfigurationen, die ein separates types/ Verzeichnis verwenden, beziehen Sie stattdessen dieses Verzeichnis ein:

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

Zurück scrollen

Enable 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, vollendet die Übergangsgeste und fragt die Browserhistorie, zurückzugehen, oder storniert sie und restauriert die aktuelle Seite.

Um ein Element davon abzuhalten, die Geste auszulösen, fügen Sie data-swipe-gesture-ignore:

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

Mit nativer Navigation

Verwenden Sie @capgo/capacitor-transitions mit @capgo/native-navigation wenn native die oberen und unteren Leisten besitzen soll, während Web-Inhalt Ionic-Style-Seiteneffekte behält.

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. Bleiben Sie bei der Verantwortung für die Seiten nur beim Web-Übergangsausgang:

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

Rendern Sie die native obere Leiste nicht erneut als beweglich <cap-header>. Lassen Sie den Bar native und verwenden @capgo/native-navigation für die WebView-Seiteneinblendung darunter. @capgo/capacitor-transitions Komponenten

Abschnitt mit dem Titel “Komponenten”

<cap-router-outlet>

Typ	Standard	Beschreibung	Animationsschablone
platform	'ios' | 'android' | 'auto'	'auto'	Plattformstandard
duration	number	für die	Animationdauer in Millisekunden
keep-in-dom	boolean	true	__CAPGO_KEEP_0__
max-cached	number	10	Maximale Anzahl an gecacheten Seiten
swipe-gesture	boolean | 'auto'	'auto'	Aktiviere, deaktiviere oder erkenn die iOS-Randgeste automatisch

Methode(n):

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

<cap-page>

Ermöglicht die Umhüllung einer Seite und sendet Lebenszyklusereignisse:

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

<cap-content>

Attribut	Typ	Standard	Beschreibung
fullscreen	boolean	false	Inhalt scrollt hinter dem Header
scroll-x	boolean	true	Horizontalscroll aktivieren
scroll-y	boolean	true	Vertikalscroll aktivieren

Hilfe für 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 “ Getting Started” verwenden für die Migration und die Unternehmensoperationen zu planen und es mit Mit @capgo/capacitor-Übergängen für die native Fähigkeit in Mit @capgo/capacitor-Übergängen Capgo Enterprise für den Produktworkflow in Capgo Enterprise Ionic Enterprise Plugin Alternativen für den Produktworkflow in Ionic Enterprise Plugin Alternativen Capgo Alternativen für den Produktworkflow in Capgo Alternativen und Capgo Consulting für den Produktworkflow in Capgo Consulting.