Pembelajaran Dasar

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

Instalasi

Anda dapat menggunakan Setup Bantuan AI kami untuk menginstal plugin ini. Tambahkan Capgo kemampuan ke alat AI Anda menggunakan perintah berikut:

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

Lalu gunakan prompt berikut:

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

Jika Anda 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';
```

Tambahkan 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". Lembaran viewport membaca nilai lingkungan browser dan variabel Capacitor pengganti:

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 untuk 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 menggunakan true. Matikan hanya ketika aplikasi Anda sudah memiliki penghindaran keyboard:

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

Kontrol Imperatif

Semua bantuan framework mengonfigurasi elemen kustom yang sama di bawahnya. Anda juga dapat mengontrol 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 direktori sumber:

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	Tujuan
`cap-sheet`	Keterangan sheet, detent, gerakan, perilaku modal, dan event
`cap-sheet-trigger`	Aksi hadir declaratif, tutup, toggle, dan langkah
`cap-sheet-portal`	Portal tubuh opsional untuk layering lapisan overlay
`cap-sheet-view`	Tampak viewport tetap dengan padding area aman dan keyboard
`cap-sheet-backdrop`	Latar belakang sinkron progres
`cap-sheet-content`	Permukaan sheet yang dapat diakses
`cap-sheet-bleeding-background`	Pengembangan latar belakang untuk sheet sudut yang melengkung
`cap-sheet-handle`	Tangkai detent yang dapat digerakkan dan dapat diakses keyboard
`cap-sheet-title`	Judul yang dapat diakses
`cap-sheet-description`	Deskripsi yang dapat diakses
`cap-sheet-special-wrapper`	Hook komposisi untuk lembaran terpisah, kartu, dan kotak dialog
`cap-sheet-stack`	Grup lembaran yang berderet
`cap-sheet-outlet`	Keluaran progress untuk kedalaman, paralaks, dan efek halaman
`cap-scroll`	Bantuan progress gulir
`cap-fixed`	Bantuan lapisan tetap
`cap-island`	Konten pulau terapung 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 oleh spasi seperti `18em 32em`
`safeArea`	`safe-area`	`auto`	Bagian tepi area aman yang dilindungi
`swipe`	`swipe`	`true`	Aktifkan gerakan pointer, sentuh, trackpad, dan roda
`swipeDismissal`	`swipe-dismissal`	`true`	Biarkan gerakan menutup ke detent `0`
`inertOutside`	`inert-outside`	`true`	Mencegah interaksi di balik sheet modal
`focusTrap`	`focus-trap`	`true`	Simpan fokus kursor di dalam sheet
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Tutup ketika mengklik backdrop atau view
`closeOnEscape`	`close-on-escape`	`true`	Tutup ketika menekan Escape
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Tampilkan input yang difokuskan di atas keyboard
`themeColorDimming`	`theme-color-dimming`	`auto`	Mengurangi warna tema WebView saat modal

Entrypoint 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 Pemula untuk merencanakan kerja 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, Mengambah atau Mengupdate Plugin untuk detail implementasi di Mengambah atau Mengupdate Plugin, Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic, dan Capgo Build Natively untuk alur kerja produk di Capgo Build Natively.