Getting Started

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

Das Paket installieren
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" />

Eine Folie 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 Leseansicht des Blattes 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 Überlagerungsleisten oder Systemleisten, lassen Sie die native Plugins verantwortlich für die Ausgabe korrekter Einstellwerte:

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>

Zwangsläufige Steuerung

Alle Framework-Helfer konfigurieren das gleiche zugrunde liegende benutzerdefinierte Element. Sie können auch eine Folie direkt steuern:

const sheet = document.querySelector('cap-sheet');

await sheet?.present();
await sheet?.stepTo(2);
await sheet?.step('down');
await sheet?.dismiss();

Für den kontrollierten Zustand, die Analyse oder die koordinierte Animation Ereignisse anhö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>
  );
}

Von 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, Abbruch, Toggle und Schrittaktionen
`cap-sheet-portal`	Optionales Body-Portal für Überlagerungsschichten
`cap-sheet-view`	Festes Viewport-Host mit sicheren Bereichen und Tastaturabstand
`cap-sheet-backdrop`	Progress-synchronisierter Hintergrund
`cap-sheet-content`	Zugängliche Blattschicht
`cap-sheet-bleeding-background`	Hintergrunderweiterung für runde Kantenblätter
`cap-sheet-handle`	Ziehbare und Tastatur-zugängliche Detent-Griff
`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`	Gruppierung gestapelter Blätter
`cap-sheet-outlet`	Fortschrittsauslass für Tiefe, Parallax und Seiteneffekte
`cap-scroll`	Hilfe für Scroll-Fortschritt
`cap-fixed`	Hilfe für feste Layer
`cap-island`	Zugehörige schwimmende Insel-Inhalte
`cap-external-overlay`	Überlagerter Inhalt, der außerhalb des Blattbaums verwaltet wird

Haupfoptionen

Option	Eigenschaft	Standard	Beschreibung
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`, oder `center`
`detents`	`detents`	keine	Zeilengenerte CSS-Längen wie `18em 32em`
`safeArea`	`safe-area`	`auto`	Schutzzone
`swipe`	`swipe`	`true`	Zeigen Sie die Unterstützung für die Zeiger, Touch, Trackpad- und Radgesten an
`swipeDismissal`	`swipe-dismissal`	`true`	Zeigen Sie die Unterstützung für die Abtastung von Abtastungen an `0`
`inertOutside`	`inert-outside`	`true`	Verhindere Interaktion hinter Modal-Fenstern
`focusTrap`	`focus-trap`	`true`	Behalte die Tastaturfokus innerhalb des Blatts
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Schließe, wenn man auf den Hintergrund oder die Ansicht klickt
`closeOnEscape`	`close-on-escape`	`true`	Schließe, wenn man Escape drückt
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Zeige fokussierte 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

Weitermachen von Getting Started

Wenn Sie bereits mit verwenden Getting Started für die native Plugin-Arbeit zu planen, mit ihr verbunden Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo 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 und Capgo Native Builds für den Produktworkflow in Capgo Native Builds