Iniziare

Esegui un prompt di configurazione con i passaggi di installazione e la guida markdown completa per questo plugin.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-sheets`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/sheets/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Installazione

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

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

Usa poi 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 l'installazione manuale, installa il plugin eseguendo i seguenti comandi e segui le istruzioni specifiche per la piattaforma riportate di seguito:

Installa il pacchetto
Finestra del terminale
```
npm install @capgo/capacitor-sheets
```
Registra i componenti web
```
import '@capgo/capacitor-sheets';
```

Aggiungi la impostazione per le aree sicure

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

Rendi visibile una finestra

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

Capacitor Zone di sicurezza

Le zone di sicurezza sono abilitate per impostazione predefinita attraverso safe-area="auto". La finestra di visualizzazione della vista porta entrambi i valori dell'ambiente del browser e le variabili di fallback di 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 la finestra:

<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 di 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;

Il controllo della tastiera è gestito da native-focus-scroll-prevention, che prevede come valore 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 helper dei framework configurano lo stesso elemento personalizzato sottostante. Puoi anche controllare una scheda 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, l'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 inoltre registra i tipi JSX per gli elementi personalizzati. Se TypeScript segnala ancora tag sconosciuti, aggiungi un file di dichiarazione all'interno del tuo tree di origine:

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	Scopo
`cap-sheet`	Stato della finestra, detent, gesti, comportamento modale e eventi
`cap-sheet-trigger`	Azioni presenti dichiarative, annulla, alternare e passaggi
`cap-sheet-portal`	Portale del corpo facoltativo per l'ordinamento di layer
`cap-sheet-view`	Host di viewport fisso con padding di area sicura e tastiera
`cap-sheet-backdrop`	Backdrop sincronizzato con progresso
`cap-sheet-content`	Superficie di foglio accessibile
`cap-sheet-bleeding-background`	Estensione di sfondo per fogli con bordo arrotondato
`cap-sheet-handle`	Maniglia di detentibile e accessibile alla tastiera
`cap-sheet-title`	Titolo accessibile
`cap-sheet-description`	Descrizione accessibile
`cap-sheet-special-wrapper`	Fascia di composizione per fogli, carte e lightbox separati
`cap-sheet-stack`	Gruppo di fogli sovrapposti
`cap-sheet-outlet`	Uscita di progresso per effetti di profondità, parallassi e pagina
`cap-scroll`	Aiuto per il progresso della scorrimento
`cap-fixed`	Aiuto per layer fissi
`cap-island`	Contenuto dell'isola galleggiante correlato
`cap-external-overlay`	Contenuto sovrapposto gestito al di fuori dell'albero delle schede

Opzioni principali

Opzione	Attributo	Predefinito	Descrizione
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`, o `center`
`detents`	`detents`	nessuno	Dimensioni CSS separate da spazio `18em 32em`
`safeArea`	`safe-area`	`auto`	Bordi di area sicura protetti
`swipe`	`swipe`	`true`	Abilita gesti del puntatore, touch, trackpad e ruote
`swipeDismissal`	`swipe-dismissal`	`true`	Consenti ai gesti di disporre fino al detentore `0`
`inertOutside`	`inert-outside`	`true`	Prevenire l'interazione dietro le schede modal
`focusTrap`	`focus-trap`	`true`	Mantieni il focus del tastiera all'interno della scheda
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Dismetti quando si clicca sullo sfondo o sulla vista
`closeOnEscape`	`close-on-escape`	`true`	Dismetti quando si preme Escape
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Mantieni gli input focalizzati visibili sopra la tastiera
`themeColorDimming`	`theme-color-dimming`	`auto`	Rende scuro il colore del tema WebView mentre è modale

Punti di ingresso 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 Getting Started

Se stai utilizzando Getting Started per pianificare il lavoro di plugin nativi, 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, Aggiunta o Aggiornamento dei Plugin per i dettagli di implementazione in Aggiunta o Aggiornamento dei Plugin, Alternative per Plugin Enterprise di Ionic per il flusso di lavoro del prodotto in Alternatives plugin per Ionic Enterprise, e Capgo Costruzione nativa per il flusso di lavoro del prodotto in Capgo Costruzione nativa.