Anleitung zum Starten

GitHub

Einen Setup-Befehl 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 unser AI-gestütztes Setup verwenden, um das Plugin zu installieren. Fügen Sie die Capgo-Fähigkeiten zu Ihrem AI-Tool hinzu, indem Sie folgenden Befehl ausführen:

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 eine manuelle Einrichtung bevorzugen, installieren Sie das Plugin, indem Sie die folgenden Befehle ausführen und die darunter angegebenen Plattform-spezifischen Anweisungen befolgen.

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

Add the viewport setting for safe areas

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

Ein Blatt 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-Sicherheitsbereiche

Sichere Bereiche sind standardmäßig aktiviert durch safe-area="auto"gelesen. Das Blatt-Viewport liest sowohl Browser-Umgebungs-Werte als auch Capacitor-Fallback-Variablen:

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 für die korrekte Anzeige von Ecken verantwortlich sind:

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 true eingestellt ist. Deaktivieren Sie es nur, wenn Ihre App bereits die Tastatureingabe verhindert:

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

Zwingende Kontrolle

Alle Framework-Helfer konfigurieren das gleiche zugrunde liegende benutzerdefiniertes 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 kontrollierte Zustände, 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>
  );
}

Importieren von @capgo/capacitor-sheets/react registriert außerdem 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, Pausen, Gesten, Modalfunktionen und Ereignisse
`cap-sheet-trigger`	Deklarative Präsentation, Abbruch, An- und Ausschalten und Schrittaktionen
`cap-sheet-portal`	Optionale Körperportal für Überlagerung
`cap-sheet-view`	Festes Ansichtsfenster mit sicheren Bereichen und Tastaturabstand
`cap-sheet-backdrop`	Progress-synchronisierter Hintergrund
`cap-sheet-content`	Zugängliches Blattoberfläche
`cap-sheet-bleeding-background`	Hintergrund für gerundete Blattkanten
`cap-sheet-handle`	Zieh- und Tastaturzugriff für Pausenhandle
`cap-sheet-title`	Zugänglicher Titel
`cap-sheet-description`	Zugängliche Beschreibung
`cap-sheet-special-wrapper`	Zusammensetzungs-Hook für abgetrennte Blätter, Karten und Lichtboxen
`cap-sheet-stack`	Übersetzte Blattgruppierung
`cap-sheet-outlet`	Progress-Outlet für Tiefe, Parallax und Seiteneffekte
`cap-scroll`	Fortgeschrittener Scroll-Progress-Helfer
`cap-fixed`	Fixierter Layer-Helfer
`cap-island`	Zugehörige schwimmende Insel-Inhalte
`cap-external-overlay`	Übergeordneter Inhalt, der außerhalb des Blattbaums verwaltet wird

Hauptoptionen

Option	Attribut	Standard	Beschreibung
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`, oder `center`
`detents`	`detents`	keine	raumgetrennte CSS-Längen wie `18em 32em`
`safeArea`	`safe-area`	`auto`	Schutzgebiete für die sichere Bereiche
`swipe`	`swipe`	`true`	Aktivieren Sie die Zeiger-, Touch-, Trackpad- und Radfeder-Gesten
`swipeDismissal`	`swipe-dismissal`	`true`	Gesten zum Schließen zulassen `0`
`inertOutside`	`inert-outside`	`true`	Verhindern Sie die Interaktion hinter Modal-Sheets
`focusTrap`	`focus-trap`	`true`	Bleiben Sie die Tastaturfokus innerhalb des Blatts
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Schließen beim Klicken auf das Hintergrundbild oder die Ansicht
`closeOnEscape`	`close-on-escape`	`true`	Schließen Sie, wenn Sie Escape drücken
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Bleiben Sie die fokussierten Eingabefelder über der Tastatur sichtbar
`themeColorDimming`	`theme-color-dimming`	`auto`	Dimmen Sie die WebView-Themenfarbe während des Modals

Verfügbare Eingänge

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

Weitergehen von Getting Started

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