Getting Started

Installazione

Puoi utilizzare la nostra configurazione assistita da AI per installare il plugin. Aggiungi le Capgo competenze al tuo strumento AI utilizzando il seguente comando:

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

Poi utilizza il seguente prompt:

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

Se preferisci la configurazione manuale, installa il plugin eseguendo i seguenti comandi e segui le istruzioni specifiche del tuo platform sotto:

1. Installa il pacchetto

   npm install @capgo/capacitor-transitions

2. Registra i componenti web

   import '@capgo/capacitor-transitions';

3. Avvolgi 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. Stabilisci 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 passo di sincronizzazione nativa per questo pacchetto. Esegue il codice nel 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 tipologie JSX per cap-router-outlet, cap-page, cap-header, cap-content, e cap-footer. In quasi tutti i progetti React, quell'importazione rende gli elementi personalizzati validi in TSX automaticamente.

Se TypeScript segnala ancora 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, posizionare quel file all'interno src/ è sufficiente. Per Next.js, mettilo in src/ o nella cartella root del progetto e assicurati tsconfig.json include it:

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

Per impostazioni personalizzate di TypeScript o webpack che utilizzano un separatore types/ includi quella cartella invece:

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

Ritorna Indietro

Abilita o disabilita il gesto di bordo iOS dal 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>

Dal JavaScript:

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

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

auto enables the gesture only when Capacitor reports a native iOS runtime. During the gesture, the page transition follows the finger. When the user releases, the transition either completes and asks the browser history to go back, or cancels and restores the current page.

To evitare che un elemento inizi il gesto, aggiungi data-swipe-gesture-ignore:

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

Con navigazione nativa

Usa @capgo/capacitor-transitions con @capgo/native-navigation Quando native deve possedere le barre superiori e inferiori mentre il contenuto web mantiene la movimentazione di pagina in stile Ionic.

1. Installa e sincronizza il pacchetto di navigazione nativa:

   npm install @capgo/native-navigation
   npx cap sync

2. Configura il chrome nativo:

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

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

   <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 avanzare sia i sistemi da gli 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' },
     });
   }

Do not render the native top bar again as a moving <cap-header>Lascia @capgo/native-navigation mantieni la barra nativa e utilizza @capgo/capacitor-transitions per il contenuto della pagina WebView sottostante.

Componenti

<cap-router-outlet>

Attributo	Tipo	Default	Descrizione
platform	'ios' | 'android' | 'auto'	'auto'	Stile di animazione
duration	number	Predefinito per piattaforma	Durata dell'animazione in millisecondi
keep-in-dom	boolean	true	Conservare pagine inattive nel DOM
max-cached	number	10	Pagine cache massime
swipe-gesture	boolean | 'auto'	'auto'	Abilitare, disabilitare o rilevare nativamente il gesto di bordo iOS

Metodi:

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

<cap-page>

Avvolge 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	Default	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 dei framework

Gli entrypoint del framework espongono gli stessi aiuti di base:

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

Entrambi gli endpoint disponibili:

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

Keep going from Getting Started

Se stai utilizzando Getting Started per pianificare la migrazione e le operazioni aziendali, connettilo con Utilizzare @capgo/capacitor-transizioni per la capacità nativa in Utilizzare @capgo/capacitor-transizioni, Capgo Enterprise per il workflow del prodotto in Capgo Enterprise, Alternativi per Plugin Enterprise Ionic per il flusso di lavoro del prodotto in Ionic Enterprise Plugin Alternatives, Capgo Alternatives per il flusso di lavoro del prodotto in Capgo Alternatives, e Consultazione Capgo per il flusso di lavoro del prodotto in Capgo Consulting.