Iniziare

Copia una riga di impostazione 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.

Istallazione

Potresti 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 la seguente richiesta:

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 del tuo sistema operativo 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 del viewport per aree sicure

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

Visualizza una tabella

<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 tabella 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 della tastiera è controllata da native-focus-scroll-prevention, che predefinisce true. Disabilitalo solo quando la tua app già possiede la gestione dell'evitamento della tastiera:

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

Controllo Imperativo

Tutti gli helper 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>
  );
}

Copiare nel portapenne @capgo/capacitor-sheets/react Importa da

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

Copiare nel portapenne

<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

Esempio	Scopo
`cap-sheet`	contexto: Sito web di marketing Capgo. Ruolo: Etichetta UI breve o elemento di navigazione. Chiave di messaggio `subprocessors_table_purpose` (Scopo della tabella dei sottoprocessori).
`cap-sheet-trigger`	Stato foglio, detenti, gesti, comportamento modale e eventi
`cap-sheet-portal`	Azioni presentative dichiarative, annulla, abilita/disabilita e passaggi
`cap-sheet-view`	Portale del corpo facoltativo per sovrapposizione di layer
`cap-sheet-backdrop`	Host di viewport fisso con padding di area sicura e tastiera
`cap-sheet-content`	Backdrop sincronizzato con progresso
`cap-sheet-bleeding-background`	Superficie di foglio accessibile
`cap-sheet-handle`	Estensione di sfondo per fogli con bordo arrotondato
`cap-sheet-title`	Maniglia di detente trascinabile e accessibile alla tastiera
`cap-sheet-description`	Titolo accessibile
`cap-sheet-special-wrapper`	Hook di composizione per fogli, schede e finestre leggere distaccate
`cap-sheet-stack`	Gruppo di fogli sovrapposti
`cap-sheet-outlet`	Output di avanzamento per profondità, sfumature e effetti di pagina
`cap-scroll`	Aiuto per l'avanzamento della scroll
`cap-fixed`	Assistente per layer fissi
`cap-island`	Contenuto di isola galleggiante correlato
`cap-external-overlay`	Contenuto di overlay 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`	nessuna	Dimensioni CSS separate da spazi come `18em 32em`
`safeArea`	`safe-area`	`auto`	Margi di area di sicurezza protetti
`swipe`	`swipe`	`true`	Abilita puntatori, tocco, trackpad e gesti di ruota
`swipeDismissal`	`swipe-dismissal`	`true`	Consenti ai gesti di annullare la detent `0`
`inertOutside`	`inert-outside`	`true`	Preveni l'interazione dietro le schede modal
`focusTrap`	`focus-trap`	`true`	Tieni il focus del tastiera dentro la scheda
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Annulla quando si clicca il retro o la vista
`closeOnEscape`	`close-on-escape`	`true`	Annulla quando si preme Escape
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Tieni visibili gli input focalizzati sopra il tastiera
`themeColorDimming`	`theme-color-dimming`	`auto`	Oscurare il colore del tema WebView mentre è in modalità

Entrambi 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, Aggiunta o Aggiornamento Plugin per i dettagli di implementazione in Aggiunta o Aggiornamento Plugin Alternative per Plugin Enterprise Ionic per il flusso di lavoro del prodotto in Alternative per Plugin Enterprise Ionic Capgo Costruzione Nativa per il flusso di lavoro del prodotto in Capgo Costruzione Nativa