Prise en main

Installation

Vous pouvez utiliser notre configuration assistée par l'IA pour installer le plugin. Ajoutez les Capgo compétences à votre outil IA à l'aide de 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 :

1. Installer le package

   npm install @capgo/capacitor-sheets

2. Enregistrer les composants web

   import '@capgo/capacitor-sheets';

3. Ajoutez la mise en page de la zone de sécurité pour les zones de sécurité

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

4. Rendre 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;
   }

Remarque

Il n'y a pas d'étape de registration de plugin natif. Exécutez npx cap sync seulement en tant que partie de votre flux de travail normal Capacitor lorsque vous avez besoin de synchroniser les actifs web ou les modifications du projet natif.

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 de presse 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'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;

La gestion du clavier est contrôlée par native-focus-scroll-prevention, qui se définit par défaut à true. Désactivez-le uniquement lorsque votre application possède déjà la prise en charge de l'évitement du clavier :

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

Section intitulée “Contrôle impératif”

__CAPGO_KEEP_0__

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

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

Écouter les événements pour un état contrôlé, des statistiques ou une 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 L'importation depuis également enregistre 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 :

src/capgo-sheets.d.ts

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 feuille, dénivellations, gestes, comportement modal et événements
cap-sheet-trigger	Actions présentatives, fermer, basculer et étapes déclaratives
cap-sheet-portal	Portail de corps optionnel pour la superposition de couches d'overlay
cap-sheet-view	Hôte de vue fixe avec marge de zone de sécurité et padding clavier
cap-sheet-backdrop	Fond d'écran synchronisé sur 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	Hook de composition pour des feuilles détachées, des cartes et des lightboxes
cap-sheet-stack	Groupage 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	Assistant de couche fixe
cap-island	Contenu d'île flottante lié
cap-external-overlay	Contenu d'overlay géré en dehors de l'arbre de feuilles

Options principales

Option	Attribut	Défaut	Description
contentPlacement	content-placement	bottom	top, bottom, left, right, ou center
detents	detents	aucune	Longueurs CSS séparées par des espaces comme 18em 32em
safeArea	safe-area	auto	Bords de zone de sécurité protégés
swipe	swipe	true	Activer les gestes de pointeur, de toucher, de trackpad et de roue
swipeDismissal	swipe-dismissal	true	Permettre aux gestes de fermer jusqu'à la position de repos 0
inertOutside	inert-outside	true	Empêcher les interactions derrière les feuilles modales
focusTrap	focus-trap	true	Conserver l'attention du clavier à l'intérieur de la feuille
closeOnOutsideClick	close-on-outside-click	true	Quitter lorsque vous cliquez sur le fond ou la vue
closeOnEscape	close-on-escape	true	Quitter lorsque vous pressez la touche Échap
nativeFocusScrollPrevention	native-focus-scroll-prevention	true	Conserver les champs de saisie en focus visibles au-dessus du clavier
themeColorDimming	theme-color-dimming	auto	Dimmer la couleur de thème de la vue WebView pendant la modalité

Entrées 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'assistant de démarrage

Si vous utilisez Assistant de démarrage pour planifier le travail de plugin natif, connectez-le avec Capgo Répertoire de plugin pour le flux de travail du produit dans Capgo Répertoire de plugin, Capacitor Plugins par Capgo pour les détails d'implémentation dans 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 Entreprise Ionic pour le flux de travail du produit dans Alternatives de Plugins Entreprise Ionic, et Capgo Développements Natives pour le flux de travail du produit dans Capgo Développements Natives.