Anleitung

GitHub

Einen Einrichtungsbefehl mit den Installationsanweisungen und der vollständigen Markdown-Dokumentation 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.

Sektion mit dem Titel „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 mithilfe 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:

Installieren Sie das Paket
Terminalfenster
```
npm install @capgo/capacitor-sheets
```
Registrieren Sie die Web-Komponenten
```
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;
}

Abschnitt mit dem Titel “Capacitor-Sichere Bereiche”

Die Blattformansicht liest sowohl Browserumgebungsvariablen als auch __CAPGO_KEEP_0__-Fallbackwerte aus: safe-area="auto"Capacitor-Workflow

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

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

Imperative Control

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 sich die Ereignisse für den kontrollierten Zustand, die Analytik oder die koordinierte Animation an:

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

Reakt

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

Zur Zwischenablage kopieren @capgo/capacitor-sheets/react Importieren von

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

Zur Zwischenablage 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, Haltstellen, Gesten, Modalfunktionen und Ereignisse
`cap-sheet-trigger`	Deklarative Präsentation, Abmeldung, Toggle- und Schrittaktionen
`cap-sheet-portal`	Optionale Körperportal für Überlagerung
`cap-sheet-view`	Festes Ansichtsfenster mit sicheren Bereich 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`	Ziehbare und tastaturzugängliche Haltstellenhandgriff
`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 gestapelter Blätter
`cap-sheet-outlet`	Progress-Ausgang für Tiefe, Parallax und Seiteneffekte
`cap-scroll`	Hilfe für Scroll-Progress
`cap-fixed`	Helper 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

Einstellung	Eigenschaft	Standardwert	Beschreibung
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`, oder `center`
`detents`	`detents`	keine	Zeilenumbrüche wie z.B. `18em 32em`
`safeArea`	`safe-area`	`auto`	Geschützte sichere Bereichskanten
`swipe`	`swipe`	`true`	Aktivieren Sie die Pointer-, Touch-, Trackpad- und Wheel-Gesten
`swipeDismissal`	`swipe-dismissal`	`true`	Erlauben Sie, dass Gesten zum Abtasten des Detentes führen `0`
`inertOutside`	`inert-outside`	`true`	Verhindern Sie die Interaktion hinter Modal-Sheets
`focusTrap`	`focus-trap`	`true`	Bleiben Sie die Tastenfokus innerhalb des Blatts
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Schließen Sie, wenn Sie auf den Hintergrund oder die Ansicht klicken
`closeOnEscape`	`close-on-escape`	`true`	Schließen Sie, wenn Sie Escape drücken
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Halten Sie die fokussierten Eingabefelder über dem Tastaturfeld sichtbar
`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 von Getting Started

Wenn Sie native Plugin-Arbeit planen, verbinden Sie es mit Getting Started um die 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 Ionische Unternehmens-Plugin-Alternativen für den Produktworkflow in Ionische Unternehmens-Plugin-Alternativen Capgo Native Builds für den Produktworkflow in Capgo Native Builds