Iniziare

Copia 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.

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

Aggiungi la impostazione del viewport per aree sicure

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

Rendere 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 della pagina legge sia i valori dell'ambiente del browser che 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 pagina:

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

Importazione 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 di corpo facoltativo per la sovrapposizione di layer
`cap-sheet-view`	Host di viewport fissa 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 bordi arrotondati di fogli
`cap-sheet-handle`	Maniglia di detentibile e accessibile alla tastiera
`cap-sheet-title`	Titolo accessibile
`cap-sheet-description`	Descrizione accessibile
`cap-sheet-special-wrapper`	Hook 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à, parallasse 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	Spaziati CSS lunghezze come `18em 32em`
`safeArea`	`safe-area`	`auto`	Edizioni sicure dell'area protetta
`swipe`	`swipe`	`true`	Abilita puntatori, tocco, trackpad e gesti di ruota
`swipeDismissal`	`swipe-dismissal`	`true`	Consenti ai gesti di annullare il detent `0`
`inertOutside`	`inert-outside`	`true`	Prevenire l'interazione dietro le schede modal
`focusTrap`	`focus-trap`	`true`	Mantieni il focus della tastiera all'interno della scheda
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Annulla quando si clicca sullo sfondo o sulla vista
`closeOnEscape`	`close-on-escape`	`true`	Annulla quando si preme il tasto Escape
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Mantieni i campi di input focalizzati sopra la tastiera
`themeColorDimming`	`theme-color-dimming`	`auto`	Oscurare 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 Getting Started

Se stai utilizzando Getting Started per pianificare il lavoro di plugin nativi, connettilo con Capgo Directory dei Plugin per il workflow 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 Alternative Plugin Enterprise Ionic Capgo Costruzioni native per il flusso di lavoro del prodotto in Capgo Costruzioni native