Getting Started

Copiez une invite de configuration avec les étapes d'installation et la guide markdown complète 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.

Installation

Vous pouvez utiliser notre configuration assistée par l'IA pour installer le plugin. Ajoutez les Capgo compétences à votre outil d'IA en utilisant la commande suivante :

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

Ensuite, utilisez la prompt suivante :

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-sheets` plugin in my project.

Si vous préférez la configuration manuelle, installez le plugin en exécutant les commandes suivantes et suivez les instructions spécifiques à la plateforme ci-dessous :

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

Ajouter 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 une feuille

<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 à la fois les valeurs de l'environnement de 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, gardez les plugins natifs responsables de l'exposition des valeurs d'inset 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;

La gestion du clavier est contrôlée par native-focus-scroll-prevention, qui se définit par défaut à trueDésactivez-l’uniquement lorsque votre application possède déjà l'évitement de la saisie clavier.

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

Contrôl’impératif

Tous les helpers de framework configurent le même élément personnalisé sous-jacent. 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é, l'analytique 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 à partir de @capgo/capacitor-sheets/react Si TypeScript continue à signaler 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	Fonction
`cap-sheet`	État de la feuille, dénivellations, gestes, comportement modal et événements
`cap-sheet-trigger`	Actions de présentation déclarative, fermeture, basculement et étapes
`cap-sheet-portal`	Portail de corps optionnel pour l'empilement de couches
`cap-sheet-view`	Hôte de vue fixe avec zone de sécurité et padding 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 bord arrondi
`cap-sheet-handle`	Manche et gachette accessible par clavier
`cap-sheet-title`	Titre accessible
`cap-sheet-description`	Description accessible
`cap-sheet-special-wrapper`	Hook de composition pour les feuilles détachées, les cartes et les lightboxes
`cap-sheet-stack`	Groupage de feuilles en pile
`cap-sheet-outlet`	Sortie de progression pour profondeur, effet parallaxe et effets de page
`cap-scroll`	Assistant de progression de scroll
`cap-fixed`	Aideur de couche fixe
`cap-island`	Contenu lié à l'île flottante
`cap-external-overlay`	Contenu d'overlay géré en dehors de l'arbre de feuille

Options principales

Option	Attribut	Défaut	Description
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`ou `center`
`detents`	`detents`	Aucun	Longueurs CSS séparées par espace telles que `18em 32em`
`safeArea`	`safe-area`	`auto`	Bords de zone de sécurité protégés
`swipe`	`swipe`	`true`	Activer les gestes de pointeur, touch, trackpad et roue
`swipeDismissal`	`swipe-dismissal`	`true`	Permettre aux gestes de fermer la fenêtre `0`
`inertOutside`	`inert-outside`	`true`	Empêcher l'interaction derrière les feuilles modales
`focusTrap`	`focus-trap`	`true`	Keep keyboard focus inside the sheet
`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 de saisie en avant-plan au-dessus du clavier
`themeColorDimming`	`theme-color-dimming`	`auto`	Dim the WebView theme color while modal

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 la section « Commencer »

If vous utilisez Getting Started pour planifier le travail de plugin natif, connectez-l’à Capgo Répertoire des plugins pour le flux de travail du produit dans Capgo Répertoire des plugins, Capacitor Plugins par Capgo pour les détails d'implémentation dans Capacitor Plugins par Capgo, Ajout ou mise à jour de plugins pour les détails d'implémentation dans Ajout ou mise à jour de plugins, Alternatives de plugins d'entreprise Ionic pour le flux de travail du produit dans les alternatives du plugin Enterprise Ionic Capgo Bâtiments natifs pour le flux de travail du produit dans Capgo Native Builds.