Getting Started

Installazione

Puoi utilizzare la nostra configurazione assistita dall'IA per installare il plugin. Aggiungi le Capgo abilità al tuo strumento di AI utilizzando il seguente comando:

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

Poi utilizza la seguente richiesta:

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

Se preferisci l'installazione manuale, installa il plugin eseguendo i seguenti comandi e segui le istruzioni specifiche per la piattaforma riportate di seguito:

1. Installare il pacchetto

   npm install @capgo/capacitor-transitions

2. Registrare i componenti web

   import '@capgo/capacitor-transitions';

3. Avvolgere le pagine di routing

   <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. Imposta la direzione prima che il tuo router cambi rotta

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

Nota

Non esiste un passaggio di sincronizzazione nativo per questo pacchetto. Esegue il suo ciclo di vita nella layer web della tua Capacitor app.

Impostazione 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

Importazione da @capgo/capacitor-transitions/react include le annotazioni JSX per cap-router-outlet, cap-page, cap-header, cap-content, e. cap-footerIn quasi tutti i progetti React, quella importazione rende gli elementi personalizzati validi in TSX automaticamente.

Se TypeScript segnala ancora degli errori Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements'Aggiungi un file di dichiarazione del progetto:

src/capgo-transizioni.d.ts

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

Per Vite, Create React App e la maggior parte degli app React webpack, collocare quel file all'interno src/ è sufficiente. Per Next.js, mettilo in src/ o nella cartella root del progetto e assicurati che tsconfig.json lo includa:

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

Per impostazioni TypeScript o webpack personalizzate che utilizzano una cartella separata types/ includi quella cartella invece:

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

Scorri indietro

Abilita o disabilita il gesto di swipe da 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>

O da JavaScript:

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

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

auto abilita il gesto solo quando Capacitor segnala un runtime iOS nativo. Durante il gesto, la transizione della pagina segue il dito. Quando l'utente rilascia, la transizione si completa e chiede alla storia del browser di andare indietro, o annulla e ripristina la pagina corrente.

Per tenere un elemento dall'iniziare il gesto, aggiungi data-swipe-gesture-ignore:

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

Con navigazione nativa

Utilizza @capgo/capacitor-transitions con @capgo/native-navigation quando native dovrebbe possedere le barre superiore e inferiore mentre il contenuto web mantiene la movimentazione delle pagine di stile Ionic.

1. Installare e sincronizzare il pacchetto di navigazione nativa:

   npm install @capgo/native-navigation
   npx cap sync

2. Configura il browser nativo:

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

3. Mantieni responsabile l'uscita di transizione web per le pagine solo:

   <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. Fai muovere entrambi i sistemi dagli stessi eventi del router:

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

Non rendere la barra superiore nativa di nuovo come un movimento <cap-header>. Mantieni la barra nativa e utilizza @capgo/native-navigation per il contenuto della pagina WebView sottostante. @capgo/capacitor-transitions Sezione intitolata “Componenti”

Sezione intitolata “<cap-router-outlet>”

<cap-router-outlet>

Predefinito	Descrizione	Stile di animazione	Predefinito del sistema
platform	'ios' | 'android' | 'auto'	'auto'	Let
duration	number	keep the bar native and use	Durata dell'animazione in millisecondi
keep-in-dom	boolean	true	Conserva pagine inattive nel DOM
max-cached	number	10	Pagine cache massime
swipe-gesture	boolean | 'auto'	'auto'	Abilita, disabilita o rileva nativamente il gesto di bordo iOS

Metodi:

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

<cap-page>

Rende una pagina e emette eventi di ciclo di vita:

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

<cap-content>

Attributo	Tipo	Predefinito	Descrizione
fullscreen	boolean	false	Lascia che il contenuto scorra dietro l'intestazione
scroll-x	boolean	true	Abilita lo scrolling orizzontale
scroll-y	boolean	true	Abilita lo scrolling verticale

Aiuti del framework

Gli entrypoint del framework espongono gli stessi aiuti core:

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

Disponibili gli entrypoint:

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

Continua da Inizia a utilizzare

Se stai utilizzando Inizia a utilizzare per pianificare la migrazione e le operazioni aziendali, connettilo con Usando @capgo/capacitor-transizioni per la capacità nativa in Usando @capgo/capacitor-transizioni, Capgo Azienda per il workflow del prodotto in Capgo Azienda, Alternativi per Plugin Enterprise Ionic per il workflow del prodotto in Alternativi per Plugin Enterprise Ionic, Capgo Alternativi per il workflow del prodotto in Capgo Alternativi, e Capgo Consulenza per il workflow del prodotto in Capgo Consulenza.