Getting Started

Ein Setup-Vorlage mit den Installationsanweisungen und der vollständigen Markdown-Anleitung für diesen Plugin kopieren.

        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

Mit unserer AI-gestützten Setup können Sie das Plugin installieren. Fügen Sie den Capgo-Fähigkeiten Ihrer AI-Anwendung mit folgendem Befehl hinzu:

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

Verwenden Sie dann die folgende Anweisung:

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

Wenn Sie die manuelle Einrichtung bevorzugen, installieren Sie das Plugin, indem Sie die folgenden Befehle ausführen und folgen Sie den Plattform-spezifischen Anweisungen unten:

Installieren Sie das Paket
Terminal-Fenster
```
npm install @capgo/capacitor-sheets
```
Registrieren Sie die Web-Komponenten
```
import '@capgo/capacitor-sheets';
```

Fügen Sie die Sichtbarkeitseinstellung für sichere Bereiche hinzu

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

Rendern Sie ein Blatt

<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-Sichere Bereiche

Sichere Bereiche sind standardmäßig aktiviert durch safe-area="auto". Die Sheet-Viewport liest sowohl Browser-Umgebungsvariablen als auch Capacitor-Fallback-Variable:

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)

Wählen Sie die geschützten Kanten pro Sheet:

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

Für Apps mit Überlagerungsstatusleisten oder Systemleisten, übernehmen die native Plugins die Verantwortung für die korrekten Einstellungen von Inset-Werten:

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

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

export default config;

Die Tastatureingabe wird durch native-focus-scroll-prevention, die standardmäßig auf true eingestellt ist. Deaktivieren Sie es nur, wenn Ihre App bereits die Tastatureingabevermeidung besitzt:

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

Zwingende Steuerung

Alle Framework-Helfer konfigurieren das gleiche zugrunde liegende benutzerdefinierte Element. Sie können auch ein Blatt direkt steuern:

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

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

Hören Sie auf Ereignisse für den kontrollierten Zustand, Analysen oder koordinierte Animationen:

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

Importieren von @capgo/capacitor-sheets/react registriert auch JSX-Typen für die benutzerdefinierten Elemente. Wenn TypeScript immer noch unbekannte Tags meldet, fügen Sie eine Deklarationsdatei in Ihrem Quelltree ein:

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

Komponenten

Element	Zweck
`cap-sheet`	Blattszustand, Dämpfer, Gesten, Modalfunktionen und Ereignisse
`cap-sheet-trigger`	Deklarative Präsentation, Abbruch, Toggle und Schrittaktionen
`cap-sheet-portal`	Optionales Körperportal für Überlagerungsschichten
`cap-sheet-view`	Festes Ansichtsfenster mit sicheren Bereichen und Tastaturabstand
`cap-sheet-backdrop`	Progress-synchronisierter Hintergrund
`cap-sheet-content`	Zugängliche Blattschicht
`cap-sheet-bleeding-background`	Hintergrund für gerundete Blattschichten
`cap-sheet-handle`	Ziehbare und tastaturzugängliche Dämpferhandhabung
`cap-sheet-title`	Zugänglicher Titel
`cap-sheet-description`	Zugängliche Beschreibung
`cap-sheet-special-wrapper`	Kompositionshook für abgetrennte Blätter, Karten und Lichtboxen
`cap-sheet-stack`	Gruppierung von Blättern in Stufen
`cap-sheet-outlet`	Progress outlet für Tiefe, Parallax und Seiteneffekte
`cap-scroll`	Fortgeschrittener Scroll-Progress-Helfer
`cap-fixed`	Fester Layer-Helfer
`cap-island`	Zugehörige schwebende Insel-Inhalte
`cap-external-overlay`	Überlagerter Inhalt, der außerhalb des Blattbaums verwaltet wird

Haupt-Optionen

Option	Eigenschaft	Standardwert	Beschreibung
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`, oder `center`
`detents`	`detents`	keine	CSS-Längen wie z.B. `18em 32em`
`safeArea`	`safe-area`	`auto`	Schutzgebiete der sicheren Fläche
`swipe`	`swipe`	`true`	Gesten für Mauszeiger, Touch, Trackpad und Radfahrer aktivieren
`swipeDismissal`	`swipe-dismissal`	`true`	Gesten zum Ausschalten bis zum Detent erlauben `0`
`inertOutside`	`inert-outside`	`true`	Interaktion hinter Modal-Scheiben verhindern
`focusTrap`	`focus-trap`	`true`	Tastaturfokus innerhalb der Scheibe behalten
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Zurücksetzen, wenn man auf den Hintergrund oder die Ansicht klickt
`closeOnEscape`	`close-on-escape`	`true`	Zurücksetzen, wenn man Escape drückt
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Fokussierte Eingabefelder sichtbar halten, wenn die Tastatur erscheint
`themeColorDimming`	`theme-color-dimming`	`auto`	Die WebView-Themenfarbe dimmen, während Modal-Scheiben aktiv sind

Verfügbare Entrypoints

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

Weitermachen von Getting Started

Wenn Sie Getting Started für die Planung von native Plugin-Arbeiten verwenden, verbinden Sie es mit Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo, Hinzufügen oder Aktualisieren von Plugins für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins, Ionic Enterprise Plugin Alternativen für den Produktworkflow in Ionic Enterprise Plugin Alternativen, und Capgo Native Builds für den Produktworkflow in Capgo Native Builds.