Iniziare

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-sheets` plugin in my project.

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

1. Installa il pacchetto

   npm install @capgo/capacitor-sheets

2. Registra i componenti web

   import '@capgo/capacitor-sheets';

3. Aggiungi la impostazione del viewport per aree sicure

   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

4. Visualizza una scheda

   <cap-sheet-trigger for="booking-sheet" action="present">Open route</cap-sheet-trigger>
   
   <cap-sheet id="booking-sheet" detents="18em 32em" content-placement="bottom">
     <cap-sheet-portal>
       <cap-sheet-view>
         <cap-sheet-backdrop></cap-sheet-backdrop>
         <cap-sheet-content class="route-sheet">
           <cap-sheet-bleeding-background></cap-sheet-bleeding-background>
           <cap-sheet-handle></cap-sheet-handle>
           <cap-sheet-title>Evening route</cap-sheet-title>
           <cap-sheet-description>Choose a route and confirm pickup.</cap-sheet-description>
           <cap-sheet-trigger action="dismiss">Done</cap-sheet-trigger>
         </cap-sheet-content>
       </cap-sheet-view>
     </cap-sheet-portal>
   </cap-sheet>

   .route-sheet {
     width: min(100%, 34em);
     padding: 0 1.25em 1.25em;
   }

Nota

Non esiste un passaggio di registrazione del plugin nativo. Esegui npx cap sync solo come parte del tuo workflow normale Capacitor quando hai bisogno di sincronizzare gli asset web o le modifiche al progetto nativo.

Capacitor Zone di sicurezza

Le zone di sicurezza sono abilitate per impostazione predefinita tramite safe-area="auto"Il viewport della scheda legge sia i valori dell'ambiente browser che le variabili di fallback Capacitor:

env(safe-area-inset-top)
env(safe-area-inset-bottom)
env(safe-area-inset-left)
env(safe-area-inset-right)
var(--safe-area-inset-top)
var(--safe-area-inset-bottom)
var(--safe-area-inset-left)
var(--safe-area-inset-right)

Scegli le aree protette per foglio:

<cap-sheet safe-area="auto"></cap-sheet>
<cap-sheet safe-area="bottom left right"></cap-sheet>
<cap-sheet safe-area="none"></cap-sheet>

Per le app con barre di stato sovrapposte o barre di sistema, mantieni i plugin nativi responsabili dell'esposizione dei valori di inset corretti:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    StatusBar: {
      overlaysWebView: true,
    },
    Keyboard: {
      resize: 'body',
      resizeOnFullScreen: true,
    },
    SystemBars: {
      insetsHandling: 'css',
    },
  },
};

export default config;

Gestione del tastiera è controllata da native-focus-scroll-prevention, che predefinito è true. Disabilitalo solo quando la tua app già possiede l'evitamento della tastiera:

<cap-sheet native-focus-scroll-prevention="false"></cap-sheet>

Controllo Imperativo

Tutti gli aiuti del framework configurano lo stesso elemento personalizzato sottostante. Puoi anche controllare un foglio direttamente:

const sheet = document.querySelector('cap-sheet');

await sheet?.present();
await sheet?.stepTo(2);
await sheet?.step('down');
await sheet?.dismiss();

Ascolta gli eventi per lo stato controllato, le analisi o l'animazione coordinata:

sheet?.addEventListener('cap-sheet-presented-change', (event) => {
  console.log(event.detail.presented);
});

sheet?.addEventListener('cap-sheet-active-detent-change', (event) => {
  console.log(event.detail.activeDetent);
});

sheet?.addEventListener('cap-sheet-travel', (event) => {
  console.log(event.detail.progress);
});

React

import { useEffect, useRef } from 'react';
import { setupSheet } from '@capgo/capacitor-sheets/react';
import '@capgo/capacitor-sheets';

export function BookingSheet() {
  const sheetRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!sheetRef.current) return;

    return setupSheet(sheetRef.current, {
      detents: ['18em', '32em'],
      contentPlacement: 'bottom',
      onPresentedChange: ({ presented }) => console.log({ presented }),
    });
  }, []);

  return (
    <cap-sheet id="booking-sheet" ref={sheetRef}>
      <cap-sheet-trigger action="present">Open</cap-sheet-trigger>
      <cap-sheet-view>
        <cap-sheet-backdrop />
        <cap-sheet-content>
          <cap-sheet-handle />
          <cap-sheet-title>React sheet</cap-sheet-title>
        </cap-sheet-content>
      </cap-sheet-view>
    </cap-sheet>
  );
}

Importa da @capgo/capacitor-sheets/react registra anche le tipologie JSX per gli elementi personalizzati. Se TypeScript segnala ancora tag ignoti, aggiungi un file di dichiarazione all'interno del tuo tree di origine:

src/capgo-sheets.d.ts

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

Vue

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { setupSheet } from '@capgo/capacitor-sheets/vue';
import '@capgo/capacitor-sheets';

const sheetRef = ref<HTMLElement | null>(null);
let cleanup: (() => void) | undefined;

onMounted(() => {
  if (sheetRef.value) {
    cleanup = setupSheet(sheetRef.value, {
      detents: ['18em', '32em'],
      contentPlacement: 'bottom',
    });
  }
});

onUnmounted(() => cleanup?.());
</script>

<template>
  <cap-sheet id="booking-sheet" ref="sheetRef">
    <cap-sheet-trigger action="present">Open</cap-sheet-trigger>
    <cap-sheet-view>
      <cap-sheet-backdrop />
      <cap-sheet-content>
        <cap-sheet-handle />
        <cap-sheet-title>Vue sheet</cap-sheet-title>
      </cap-sheet-content>
    </cap-sheet-view>
  </cap-sheet>
</template>

Angular

import { AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild } from '@angular/core';
import { setupSheet } from '@capgo/capacitor-sheets/angular';
import '@capgo/capacitor-sheets';

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <cap-sheet id="booking-sheet" #sheet>
      <cap-sheet-trigger action="present">Open</cap-sheet-trigger>
      <cap-sheet-view>
        <cap-sheet-backdrop></cap-sheet-backdrop>
        <cap-sheet-content>
          <cap-sheet-handle></cap-sheet-handle>
          <cap-sheet-title>Angular sheet</cap-sheet-title>
        </cap-sheet-content>
      </cap-sheet-view>
    </cap-sheet>
  `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('sheet', { static: true }) sheet?: ElementRef<HTMLElement>;

  ngAfterViewInit(): void {
    if (this.sheet?.nativeElement) {
      setupSheet(this.sheet.nativeElement, {
        detents: ['18em', '32em'],
        contentPlacement: 'bottom',
      });
    }
  }
}

Svelte

<script lang="ts">
  import { sheet } from '@capgo/capacitor-sheets/svelte';
  import '@capgo/capacitor-sheets';
</script>

<cap-sheet id="booking-sheet" use:sheet={{ detents: ['18em', '32em'], contentPlacement: 'bottom' }}>
  <cap-sheet-trigger action="present">Open</cap-sheet-trigger>
  <cap-sheet-view>
    <cap-sheet-backdrop />
    <cap-sheet-content>
      <cap-sheet-handle />
      <cap-sheet-title>Svelte sheet</cap-sheet-title>
    </cap-sheet-content>
  </cap-sheet-view>
</cap-sheet>

Solid

import { onCleanup, onMount } from 'solid-js';
import { setupSheet } from '@capgo/capacitor-sheets/solid';
import '@capgo/capacitor-sheets';

export function BookingSheet() {
  let sheetEl!: HTMLElement;

  onMount(() => {
    const cleanup = setupSheet(sheetEl, {
      detents: ['18em', '32em'],
      contentPlacement: 'bottom',
    });

    onCleanup(cleanup);
  });

  return (
    <cap-sheet id="booking-sheet" ref={sheetEl}>
      <cap-sheet-trigger action="present">Open</cap-sheet-trigger>
      <cap-sheet-view>
        <cap-sheet-backdrop />
        <cap-sheet-content>
          <cap-sheet-handle />
          <cap-sheet-title>Solid sheet</cap-sheet-title>
        </cap-sheet-content>
      </cap-sheet-view>
    </cap-sheet>
  );
}

Componenti

Elemento	Proposito
cap-sheet	Stato foglio, dettagli, gesti, comportamento modale e eventi
cap-sheet-trigger	Azioni presenti, chiudi, alternati e passaggi dichiarativi
cap-sheet-portal	Portale corpo facoltativo per sovrapposizione layer
cap-sheet-view	Host viewport fisso con padding di area sicura e tastiera
cap-sheet-backdrop	Sfondo sincronizzato con progresso
cap-sheet-content	Superficie foglio accessibile
cap-sheet-bleeding-background	Estensione di sfondo per fogli con bordo arrotondato
cap-sheet-handle	Maniglia dettaglio trascinabile e accessibile alla tastiera
cap-sheet-title	Titolo accessibile
cap-sheet-description	Descrizione accessibile
cap-sheet-special-wrapper	Hook di composizione per fogli, schede e lightbox distaccati
cap-sheet-stack	Gruppo di fogli in pila
cap-sheet-outlet	Output di avanzamento per effetti di profondità, sfumature e pagine
cap-scroll	Aiuto per l'avanzamento della scroll
cap-fixed	Aiuto per layer fissi
cap-island	Contenuto di isola galleggiante correlato
cap-external-overlay	Contenuto di sovrapposizione gestito al di fuori dell'albero delle schede

Opzioni principali

Opzione	Attributo	Impostazione predefinita	Descrizione
contentPlacement	content-placement	bottom	top, bottom, left, right, o center
detents	detents	nessuno	Dimensioni CSS separate da spazi, come 18em 32em
safeArea	safe-area	auto	Margi di area sicura protetti
swipe	swipe	true	Abilita puntatori, tocco, trackpad e gesti di ruota
swipeDismissal	swipe-dismissal	true	Consenti ai gesti di disporre il detent 0
inertOutside	inert-outside	true	Prevenire l'interazione dietro le schede modal
focusTrap	focus-trap	true	Conserva il focus del tastiera all'interno della scheda
closeOnOutsideClick	close-on-outside-click	true	Chiudi quando si clicca sullo sfondo o sulla vista
closeOnEscape	close-on-escape	true	Chiudi quando si preme Escape
nativeFocusScrollPrevention	native-focus-scroll-prevention	true	Conserva gli input focalizzati visibili sopra la tastiera
themeColorDimming	theme-color-dimming	auto	Dimmare il colore del tema WebView mentre è in modalità

Entrypoint disponibili

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

Continua da Iniziare

Se stai utilizzando Iniziare per pianificare il lavoro di plugin nativo, connettilo con Capgo Directory dei plugin per il flusso di lavoro del prodotto in Capgo Directory dei plugin Capacitor Plugin da Capgo per i dettagli di implementazione in Capacitor Plugin da Capgo Aggiungere o Aggiornare Plugin per i dettagli di implementazione in Aggiungere o Aggiornare Plugin, Alternative per Plugin Enterprise Ionic per il flusso di lavoro del prodotto in Alternative per Plugin Enterprise Ionic, e Capgo Costruzione Nativa per il flusso di lavoro del prodotto in Capgo Costruzione Nativa.