Getting Started

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

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

Area-aman diaktifkan secara default melalui safe-area="auto". Layar 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 sheet:

<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 asli 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 secara default adalah 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 sheet 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 yang dikontrol, 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>
  );
}

Mengimpor 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	Tujuan
`cap-sheet`	Status lembar, detent, gerakan, perilaku modal, dan event
`cap-sheet-trigger`	Aksi presentatif, tutup, toggle, dan langkah-langkah
`cap-sheet-portal`	Portal tubuh opsional untuk layering lapisan
`cap-sheet-view`	Tampak layar tetap dengan padding area aman dan keyboard
`cap-sheet-backdrop`	Latar belakang backdrop yang sinkron dengan progress
`cap-sheet-content`	Permukaan sheet yang dapat diakses
`cap-sheet-bleeding-background`	Pengembangan latar belakang untuk sheet dengan tepi bulat
`cap-sheet-handle`	Tangkai handle yang dapat digerakkan dan dapat diakses keyboard
`cap-sheet-title`	Judul yang dapat diakses
`cap-sheet-description`	Penguraian yang dapat diakses
`cap-sheet-special-wrapper`	Gagang komposisi untuk sheet, kartu, dan lightbox yang terpisah
`cap-sheet-stack`	Grup sheet yang berlapis
`cap-sheet-outlet`	Keluaran progress untuk kedalaman, paralaks, dan efek halaman
`cap-scroll`	Penolong kemajuan scroll
`cap-fixed`	Bantuan lapisan tetap
`cap-island`	Konten pulau terapung terkait
`cap-external-overlay`	Konten lapisan yang diatur di luar pohon sheet

Pilihan Utama

Pilihan	Atribut	Baku	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 area aman yang dilindungi
`swipe`	`swipe`	`true`	Aktifkan gestur pointer, sentuh, trackpad, dan roda
`swipeDismissal`	`swipe-dismissal`	`true`	Biarkan gestur untuk menutup ke detent `0`
`inertOutside`	`inert-outside`	`true`	Mencegah interaksi di balik lembaran modal
`focusTrap`	`focus-trap`	`true`	Tahan fokus keyboard di dalam lembaran
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Tutup ketika mengklik backdrop atau view
`closeOnEscape`	`close-on-escape`	`true`	Tutup ketika menekan Tombol Escape
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Tahan input yang difokuskan terlihat di atas keyboard
`themeColorDimming`	`theme-color-dimming`	`auto`	Membayang-bayangi 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

Lanjutkan 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 produk di Ionic Enterprise Plugin Alternatif, dan Capgo Pembangunan Natively untuk alur produk di Capgo Pembangunan Natively.