Getting Started

GitHub

Einen Einrichtungsprompt mit den Installationsanweisungen und der vollständigen Markdown-Guideline 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

Sie können unsere AI-gestützte Einrichtung verwenden, um das Plugin zu installieren. Fügen Sie die Capgo-Fähigkeiten Ihrem AI-Tool mit der folgenden Befehl hinzu:

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

Verwenden Sie dann die folgende Anfrage:

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 unten angegebenen Plattform-spezifischen Anweisungen:

Das Paket installieren
Terminalfenster
```
npm install @capgo/capacitor-sheets
```
Die Webkomponenten registrieren
```
import '@capgo/capacitor-sheets';
```

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

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

Eine Blattform rendern

<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 Blattformansicht liest sowohl Browserumgebungsvariablen als auch Capacitor-Fallbackvariablen aus:

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 Ecken pro Blatt:

<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, behalten Sie die native Plugins bei, die korrekte Eingriffswerte freigeben:

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 von native-focus-scroll-prevention, die standardmäßig auf truefestgelegt. Deaktivieren Sie es nur, wenn Ihre App bereits die Tastatureingabe vermeidet:

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

Zwingende Kontrolle

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 kontrollierte Zustände, 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>
  );
}

Zu Clipboard kopieren @capgo/capacitor-sheets/react Importieren von

import '@capgo/capacitor-sheets/react';

Zu Clipboard kopieren

<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`	Blattzustand, Pausen, Gesten, Modalfunktionen und Ereignisse
`cap-sheet-trigger`	Deklarative Präsentation, Abbruch, Toggle- und Schrittaktionen
`cap-sheet-portal`	Optionale 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 Blattoberfläche
`cap-sheet-bleeding-background`	Hintergrund für gerundete Blattränder
`cap-sheet-handle`	Zieh- und Tastaturzugängliche Pausenhandhabung
`cap-sheet-title`	Zugänglicher Titel
`cap-sheet-description`	Zugängliche Beschreibung
`cap-sheet-special-wrapper`	Kompositionshook für losgelöste Blätter, Karten und Lightboxes
`cap-sheet-stack`	Gruppierung eines gestapelten Blattes
`cap-sheet-outlet`	Progress-Ausgang für Tiefe, Parallax und Seiteneffekte
`cap-scroll`	Hilfe für Scroll-Progress
`cap-fixed`	Hilfe für feste Layer
`cap-island`	Zugehörige Insel-Inhalte, die schweben
`cap-external-overlay`	Inhalt, der über das Blattbaum-Tree verwaltet wird

Haupt-Optionen

Option	Eigenschaft	Standardwert	Beschreibung
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`, oder `center`
`detents`	`detents`	keine	Raumgetrennte CSS-Längen wie z.B. `18em 32em`
`safeArea`	`safe-area`	`auto`	Schutzgebiete der sicheren Bereichsabmessungen
`swipe`	`swipe`	`true`	Zeigen Sie den Zeiger, Touch, Trackpad- und Radgesten an
`swipeDismissal`	`swipe-dismissal`	`true`	Zeigen Sie den Benutzern an, dass sie mit Gesten zum Anhalten gehen können `0`
`inertOutside`	`inert-outside`	`true`	Verhindern Sie die Interaktion hinter Modal-Fenstern
`focusTrap`	`focus-trap`	`true`	Behalten Sie die Tastatureingaben im Fenster
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Schließen Sie das Fenster, wenn Sie auf den Hintergrund oder das Fenster klicken
`closeOnEscape`	`close-on-escape`	`true`	Schließen Sie das Fenster, wenn Sie die Taste Escape drücken
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Zeigen Sie die fokussierten Eingabefelder über der Tastatur an
`themeColorDimming`	`theme-color-dimming`	`auto`	Dimme die WebView-Themenfarbe während des Modals

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

Fortsetzen Sie von Getting Started

Wenn Sie native Plugin-Arbeit planen, verbinden Sie es mit Getting Started um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugin-Verzeichnis um den Produktworkflow im Capgo Plugin-Verzeichnis zu planen Capacitor Plugins von Capgo um die Implementierungsdetails in Capacitor Plugins von Capgo zu planen Plugins hinzufügen oder aktualisieren für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren Ionic Enterprise-Plugin-Alternativen für den Produktworkflow in Ionic Enterprise-Plugin-Alternativen Capgo Native Builds für den Produktworkflow in Capgo Native Builds