Getting Started

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

Installieren Sie das Paket
Terminalfenster
```
npm install @capgo/capacitor-sheets
```
Registrieren Sie die Webkomponenten
```
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" />

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 Safe Areas

Die sicheren Bereiche sind standardmäßig aktiviert durch safe-area="auto". Die Ansicht des Fensters liest sowohl Browser-Umgebungsdaten 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 Fenster:

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

For Apps mit Überlagerungsstatusleisten oder Systemleisten, behalten Sie die native Plugins bei, die für die korrekte Anzeige von Einstellwerten 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 durch native-focus-scroll-prevention, die standardmäßig auf truegesetzt ist. Deaktivieren Sie es nur, wenn Ihre App bereits die Tastatureingabe vermeidet:

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

Imperative Control

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

Auf Ereignisse hören, um den Zustand zu überwachen, Analysen durchzuführen oder koordinierte Animationen durchzuführen:

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, Begrenzungen, Gesten, Modalfunktionen und Ereignisse
`cap-sheet-trigger`	Deklarative Präsentation, Abbrechen, Toggle und Schrittaktionen
`cap-sheet-portal`	Optionale Körperportal für Überlagerung
`cap-sheet-view`	Festes Viewport-Host mit sicheren Bereichen und Tastatur-Abstand
`cap-sheet-backdrop`	Progress-synchronisierter Hintergrund
`cap-sheet-content`	Zugängliche Blattfläche
`cap-sheet-bleeding-background`	Hintergrund für gerundete Kantenblätter
`cap-sheet-handle`	Ziehbare und tastaturzugängliche Detent-Griff
`cap-sheet-title`	Zugänglicher Titel
`cap-sheet-description`	Zugängliche Beschreibung
`cap-sheet-special-wrapper`	Zusammensetzungshook 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`	Scrollfortschritthilfe
`cap-fixed`	Festlegter Hilfsbereich
`cap-island`	Zugehörige schwebende Inselinhalte
`cap-external-overlay`	Überlagerter 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	CSS-Längen wie `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 Modalblättern
`focusTrap`	`focus-trap`	`true`	Bleiben Sie die Tastaturfokus innerhalb des Blatts
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Abstellen, wenn Sie auf den Hintergrund oder die Ansicht klicken
`closeOnEscape`	`close-on-escape`	`true`	Abstellen, wenn Sie die Taste 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 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" verwenden 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 das Produktworkflow in Ionic Enterprise Plugin Alternativen, und Capgo Native Builds für das Produktworkflow in Capgo Native Builds.