Pembelajaran Dasar

Copas prompt pengaturan dengan langkah instalasi dan panduan markdown lengkap untuk plugin ini.

        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.

Penginstalan

Kamu bisa menggunakan Setup Bantuan AI kami untuk menginstal plugin ini. Tambahkan Capgo kemampuan ke alat AI kamu menggunakan perintah berikut:

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

Kemudian gunakan prompt berikut:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-sheets` plugin in my project.

Jika kamu lebih suka Setup Manual, instal plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah ini:

Instal paket
Jendela Terminal
```
npm install @capgo/capacitor-sheets
```
Daftarkan komponen web
```
import '@capgo/capacitor-sheets';
```

Tetapkan pengaturan viewport untuk area yang aman

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

Tampilkan lembaran

<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 Area-Aman

Area-aman diaktifkan secara default melalui safe-area="auto". Pemandangan lembaran membaca nilai lingkungan browser dan variabel Capacitor fallback:

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)

Pilih tepi yang dilindungi per lembar:

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

Untuk aplikasi dengan status bar overlay atau bar sistem, biarkan plugin asli bertanggung jawab atas menampilkan nilai inset yang benar:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    StatusBar: {
      overlaysWebView: true,
    },
    Keyboard: {
      resize: 'body',
      resizeOnFullScreen: true,
    },
    SystemBars: {
      insetsHandling: 'css',
    },
  },
};

export default config;

Pengaturan keyboard dikontrol oleh native-focus-scroll-prevention, yang secara default adalah true. Matikan hanya ketika aplikasi Anda sudah memiliki penghindaran keyboard:

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

Pengendalian Imperatif

Pengaturan framework membentuk elemen kustom yang sama di bawahnya. Anda juga dapat mengendalikan lembaran secara langsung:

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

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

Dengarkan event untuk keadaan dikendalikan, analitis, atau animasi yang disinkronkan:

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

Import dari @capgo/capacitor-sheets/react juga mendaftarkan tipe JSX untuk elemen kustom. Jika TypeScript masih melaporkan tag yang tidak diketahui, tambahkan file deklarasi di dalam struktur sumber Anda:

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

Komponen

Elemen	Purpose
`cap-sheet`	context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI pendek atau item navigasi. Kunci pesan `subprocessors_table_purpose` (Tujuan Tabel Subproses).
`cap-sheet-trigger`	Keadaan lembar, detent, gestur, perilaku modal, dan event
`cap-sheet-portal`	Aksi hadir deklaratif, tutup, toggle, dan langkah
`cap-sheet-view`	Portal tubuh opsional untuk layering lapisan overlay
`cap-sheet-backdrop`	Tampak viewport tetap dengan padding area aman dan keyboard
`cap-sheet-content`	Latar belakang backdrop yang sinkron dengan progress
`cap-sheet-bleeding-background`	Permukaan lembar yang dapat diakses
`cap-sheet-handle`	Pengembangan latar belakang untuk lembar tepi bulat
`cap-sheet-title`	Tangkai detent yang dapat digerakkan dan dapat diakses dengan keyboard
`cap-sheet-description`	Judul yang dapat diakses
`cap-sheet-special-wrapper`	Hook komposisi untuk lembaran yang terpisah, kartu, dan kotak dialog
`cap-sheet-stack`	Grup lembaran yang bertumpuk
`cap-sheet-outlet`	Keluaran progress untuk kedalaman, paralaks, dan efek halaman
`cap-scroll`	Bantuan progress scroll
`cap-fixed`	Bantuan lapisan yang tetap
`cap-island`	Konten pulau yang terkait
`cap-external-overlay`	Konten lapisan yang diatur di luar pohon lembaran

Opsi Utama

Opsi	Sifat	Default	Deskripsi
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`, atau `center`
`detents`	`detents`	tidak ada	Panjang CSS yang dipisahkan spasi seperti `18em 32em`
`safeArea`	`safe-area`	`auto`	Bagian tepi area aman yang dilindungi
`swipe`	`swipe`	`true`	Aktifkan sentuhan, gesekan, trackpad, dan roda gesek
`swipeDismissal`	`swipe-dismissal`	`true`	Biarkan sentuhan menutup ke detent `0`
`inertOutside`	`inert-outside`	`true`	Mencegah interaksi di balik lembaran modal
`focusTrap`	`focus-trap`	`true`	Tahan fokus kursor di dalam lembaran
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Tutup ketika mengklik latar belakang atau tampilan
`closeOnEscape`	`close-on-escape`	`true`	Tutup ketika menekan Tombol Esc
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Tahan input yang difokuskan terlihat di atas kibor
`themeColorDimming`	`theme-color-dimming`	`auto`	Mengurangi warna tema WebView saat modal

Entri Poin yang Tersedia

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

Teruskan dari Getting Started

Jika Anda menggunakan Getting Started untuk merencanakan pekerjaan plugin native, hubungkannya dengan Capgo Direktori Plugin untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo, Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin, Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic, dan Capgo Build Nativ untuk alur kerja produk di Capgo Build Nativ.