Getting Started

GitHub

Eine Einrichtungsanweisung 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.

Installationsanweisungen, Synchronisierung und die Quellenguideline in Markdown enthalten.

You can use our AI-Assisted Setup to install the plugin. Add the Capgo skills to your AI tool using the following command:

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

Verwenden Sie dann 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 Web-Komponenten registrieren
```
import '@capgo/capacitor-sheets';
```

Fügen Sie die Viewport-Einstellung 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 Safe Areas

Die sicheren Bereiche sind standardmäßig aktiviert durch safe-area="auto". Die Blattformansicht liest sowohl Browserumgebungsvariablen 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 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 Überlagerungsleisten 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 durch native-focus-scroll-prevention, die standardmäßig auf true. Deaktivieren Sie es nur, wenn Ihre App bereits die Tastaturvermeidung besitzt:

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

Zwingende Kontrolle

Alle Framework-Hilfsmittel 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();

Zu Ereignissen für kontrollierten Zustand, Analysen oder koordinierte Animationen hören:

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

Aus importieren @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`	Blattzustand, Dämpfer, Gesten, Modalfunktionen und Ereignisse
`cap-sheet-trigger`	Deklarative Präsentation, Abbrechen, An- und Ausschalten und Schritte
`cap-sheet-portal`	Optionales Körperportal für Überlagerungsschichten
`cap-sheet-view`	Fixierte Ansicht des Hosts mit sicheren Bereichen und Tastaturpaddings
`cap-sheet-backdrop`	Synchronisierter Fortschritts-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 Dämpferhandgriff
`cap-sheet-title`	Zugänglicher Titel
`cap-sheet-description`	Zugängliche Beschreibung
`cap-sheet-special-wrapper`	Composition hook für abgetrennte Blätter, Karten und Lichtboxen
`cap-sheet-stack`	Gruppierung von gestapelten Blättern
`cap-sheet-outlet`	Progress-Ausgang für Tiefe, Parallax und Seiteneffekte
`cap-scroll`	Hilfe für die Fortschrittsanzeige
`cap-fixed`	Hilfe für feste Layer
`cap-island`	Zugehörige Inselinhalte, die schweben
`cap-external-overlay`	Überlagerte Inhalte, die außerhalb des Blattbaums verwaltet werden

Hauptoptionen

Option	Attribut	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`	Schützen Sie die sicheren Randbereiche
`swipe`	`swipe`	`true`	Aktivieren Sie die Zeiger-, Touch-, Trackpad- und Radgesten
`swipeDismissal`	`swipe-dismissal`	`true`	Erlauben Sie, dass Gesten zum Abstellen abgelehnt werden `0`
`inertOutside`	`inert-outside`	`true`	Verhindern Sie die Interaktion hinter Modal-Fenstern
`focusTrap`	`focus-trap`	`true`	Bleiben Sie die Eingabefelder im Fenster sichtbar
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Schließen Sie, wenn Sie auf den Hintergrund oder das Fenster klicken
`closeOnEscape`	`close-on-escape`	`true`	Schließen Sie, wenn Sie die Taste Escape drücken
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Bleiben Sie die im Fenster fokussierten Eingabefelder über der Tastatur sichtbar
`themeColorDimming`	`theme-color-dimming`	`auto`	Dimmen Sie 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

Weitermachen 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 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.