Getting Started

Copy sebuah 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.

Siap untuk dipaste dengan instalasi, sinkronkan, dan panduan markdown sumber.
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 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 lembaran:

<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, jaga plugin native yang 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 berdefault ke 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 terkendali, analitis, atau animasi koordinasi:

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

Mengimpor dari @capgo/capacitor-sheets/react juga mendaftarkan JSX tipe 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`	Tata letak sheet, detent, gerakan, perilaku modal, dan event
`cap-sheet-trigger`	Aksi hadir, tutup, toggle, dan langkah
`cap-sheet-portal`	Portal tubuh opsional untuk layering lapisan overlay
`cap-sheet-view`	Host viewport tetap dengan padding area aman dan keyboard
`cap-sheet-backdrop`	Latar belakang sinkron-progres
`cap-sheet-content`	Permukaan lembaran yang dapat diakses
`cap-sheet-bleeding-background`	Ekstensi latar belakang untuk lembaran dengan tepi melengkung
`cap-sheet-handle`	Tangkai detent yang dapat digerakkan dan dapat diakses melalui keyboard
`cap-sheet-title`	Judul yang dapat diakses
`cap-sheet-description`	Deskripsi yang dapat diakses
`cap-sheet-special-wrapper`	Hook komposisi untuk lembaran, kartu, dan lightbox yang terpisah
`cap-sheet-stack`	Kelompok lembaran yang berlapis
`cap-sheet-outlet`	Keluaran kemajuan untuk efek kedalaman, paralaks, dan halaman
`cap-scroll`	Bantuan kemajuan scroll
`cap-fixed`	Bantuan lapisan tetap
`cap-island`	Konten pulau terapung yang terkait
`cap-external-overlay`	Konten over lay yang diatur di luar pohon lembaran

Opsi Utama

Pilihan	Atribut	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`	Batas aman area layar
`swipe`	`swipe`	`true`	Aktifkan gerakan kursor, sentuh, trackpad, dan roda
`swipeDismissal`	`swipe-dismissal`	`true`	Biarkan gerakan 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 mengeklik backdrop atau tampilan
`closeOnEscape`	`close-on-escape`	`true`	Tutup ketika menekan Tombol Esc
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Tampilkan input yang difokuskan di atas keyboard
`themeColorDimming`	`theme-color-dimming`	`auto`	Mengurangi warna tema WebView saat modal

Available Entrypoints

@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 Pembangunan Native untuk alur kerja produk di Capgo Pembangunan Native.