Début

Copiez le prompt de configuration avec les étapes d'installation et la guide markdown complet pour ce 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.

Installer le package
Fenêtre de terminal
```
npm install @capgo/capacitor-sheets
```
Enregistrer les composants web
```
import '@capgo/capacitor-sheets';
```

Configurez la mise en page pour les zones de sécurité

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

Afficher un feuillet

<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 Zones de sécurité

Les zones de sécurité sont activées par défaut via safe-area="auto". La vue de la feuille lit les valeurs de l'environnement du navigateur et les variables de remplacement 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)

Choisissez les bords protégés par feuille :

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

Pour les applications avec des barres de statut en surimpression ou des barres système, maintenez les plugins natifs responsables de l'exposition des valeurs d'indent correctes :

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

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

export default config;

Le traitement du clavier est contrôlé par native-focus-scroll-prevention, qui se définit par true. Désactivez-le uniquement lorsque votre application possède déjà l'évitement du clavier :

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

Contrôle impératif

Tous les helpers de framework configurent l'élément personnalisé sous-jacent de la même manière. Vous pouvez également contrôler une feuille directement :

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

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

Écoutez les événements pour l'état contrôlé, les analyses ou l'animation coordonnée :

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

Importation depuis @capgo/capacitor-sheets/react s'inscrit également les déclarations JSX pour les éléments personnalisés. Si TypeScript signale encore des balises inconnues, ajoutez un fichier de déclaration à l'intérieur de votre arborescence source :

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

Composants

Élément	Objectif
`cap-sheet`	État de la feuille, dénivellations, gestes, comportement modal et événements
`cap-sheet-trigger`	Actions présentatives déclaratives, fermer, basculer et étapes
`cap-sheet-portal`	Portail de corps optionnel pour l'empilement de couches d'overlay
`cap-sheet-view`	Hôte de vue fixe avec marge de zone de sécurité et mise en forme de clavier
`cap-sheet-backdrop`	Fond d'écran synchronisé avec le progrès
`cap-sheet-content`	Surface de feuille accessible
`cap-sheet-bleeding-background`	Extension de fond pour les feuilles avec bords arrondis
`cap-sheet-handle`	Manche de dénivellation pouvant être traînée et accessible au clavier
`cap-sheet-title`	Titre accessible
`cap-sheet-description`	Description accessible
`cap-sheet-special-wrapper`	Fonction de composition pour les feuilles détachées, les cartes et les lightboxes
`cap-sheet-stack`	Groupe de feuilles empilées
`cap-sheet-outlet`	Sortie de progression pour les effets de profondeur, de parallaxe et de page
`cap-scroll`	Aide à la progression de la scroll
`cap-fixed`	Aideur de couche fixe
`cap-island`	Contenu d'île flottante lié
`cap-external-overlay`	Contenu d'overlay géré en dehors de l'arbre de feuille

Options principales

Option	Attribut	Par défaut	Description
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`ou `center`
`detents`	`detents`	rien	Les longueurs CSS séparées par des espaces comme `18em 32em`
`safeArea`	`safe-area`	`auto`	Bords de zone de sécurité protégée
`swipe`	`swipe`	`true`	Activer les gestes de pointeur, touch, trackpad et roue
`swipeDismissal`	`swipe-dismissal`	`true`	Autoriser les gestes pour fermer à la position de détente `0`
`inertOutside`	`inert-outside`	`true`	Empêcher l'interaction derrière les feuilles de modal
`focusTrap`	`focus-trap`	`true`	Conserver l'attention du clavier à l'intérieur de la feuille
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Fermer en cliquant sur le fond ou la vue
`closeOnEscape`	`close-on-escape`	`true`	Fermer en appuyant sur la touche Échap
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Maintenez les champs d'entrée visibles au-dessus du clavier
`themeColorDimming`	`theme-color-dimming`	`auto`	Éteignez la couleur de thème de WebView pendant la modalité

Entrypoints disponibles

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

Continuez de l'étape de démarrage

Si vous utilisez Démarrage pour planifier le travail de plugin natif, connectez-le avec Répertoire de plugin Capgo pour le flux de travail du produit dans le Répertoire de plugin Capgo Plugins Capacitor par Capgo pour les détails d'implémentation dans les Capacitor Plugins par Capgo, Ajouter ou Mettre à Jour les Plugins pour les détails d'implémentation dans Ajouter ou Mettre à Jour les Plugins, Alternatives de Plugins d'Entreprise Ionic pour le flux de travail du produit dans Alternatives de Plugins d'Entreprise Ionic, et Capgo Builds Natives pour le flux de travail du produit dans Capgo Builds Natives.