Getting Started

Copia un prompt di installazione 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" />

Visualizza una schermata

<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 Sicure

Le zone sicure sono abilitate per impostazione predefinita tramite safe-area="auto". La finestra di visualizzazione della vista del foglio legge sia i valori dell'ambiente del 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;

La gestione della tastiera è controllata da native-focus-scroll-prevention, che predefinito è true. Disabilita solo quando il tuo app già possiede l'evitamento del tastierino:

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

Importare da @capgo/capacitor-sheets/react anche 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>

Solido

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	Funzione
`cap-sheet`	Stato della finestra, detentamenti, gesti, comportamento modale e eventi
`cap-sheet-trigger`	Azioni di presentazione, chiusura, toggling e passaggi
`cap-sheet-portal`	Portale di corpo facoltativo per sovrapposizione 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 da 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`	Output di avanzamento per effetti di profondità, parallasse e pagina
`cap-scroll`	Aiuto per avanzamento di scorrimento
`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 dei fogli

Opzioni principali

Opzione	Attributo	Predefinito	Descrizione
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`, o `center`
`detents`	`detents`	nessuno	Dimensioni CSS separate da spazi, ad esempio `18em 32em`
`safeArea`	`safe-area`	`auto`	Are di sicurezza dell'area protetta
`swipe`	`swipe`	`true`	Abilita gesti del puntatore, del tocco, del trackpad e del volante
`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 tastierino all'interno della scheda
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Chiudi quando clicchi sullo sfondo o sulla vista
`closeOnEscape`	`close-on-escape`	`true`	Chiudi quando premi Escape
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Mantieni visibili gli input focalizzati sopra il tastierino
`themeColorDimming`	`theme-color-dimming`	`auto`	Adeguamento del colore del tema WebView mentre è aperta la modalità

Entrypoints 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 Inizia a utilizzare

Se stai utilizzando Inizia a utilizzare per pianificare il lavoro del plugin nativo, connettilo con Capgo Directory dei Plugin per il flusso di lavoro del prodotto nel 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 per Plugin Enterprise di Ionic, e Capgo Costruzioni Native per il flusso di lavoro del prodotto in Capgo Costruzioni Native.