Getting Started

이 플러그인에 대한 설치 단계와 전체 마크다운 가이드를 포함한 설정 프롬프트 복사.

        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.

설치

AI 도움말로 플러그인을 설치할 수 있습니다. AI 도구에 Capgo 기능을 추가하려면 다음 명령어를 사용하세요.

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

__CAPGO_KEEP_1__

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

__CAPGO_KEEP_2__

__CAPGO_KEEP_3__
__CAPGO_KEEP_4__
```
npm install @capgo/capacitor-sheets
```
__CAPGO_KEEP_5__
```
import '@capgo/capacitor-sheets';
```

__CAPGO_KEEP_6__

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

__CAPGO_KEEP_7__

<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 Safe Areas

클립보드 복사 safe-area="auto"Capacitor의 보호된 각 변형을 선택하세요:

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)

클립보드 복사

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

overlay 상태 바 또는 시스템 바가 있는 앱의 경우, 올바른 inset 값을 노출하는 데 책임이 있는 원본 네이티브 플러그인을 유지하세요:

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

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

export default config;

키보드 처리는 native-focus-scroll-prevention로 제어됩니다. 기본값은 true입니다. 키보드 피하기를 이미 앱이 소유하고 있는 경우에만 비활성화하세요:

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

명령적 제어

모든 프레임워크 헬퍼는 동일한 underlying custom element를 구성합니다. 직접 시트를 제어하기도 할 수 있습니다:

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

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

제어된 상태, 분석, 또는 동기화된 애니메이션을 위해 이벤트를 듣세요:

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하는 @capgo/capacitor-sheets/react 또한 JSX 타이핑을 사용하여 커스텀 엘리먼트를 등록합니다. TypeScript가 여전히 알려지지 않은 태그를 보고 있다면, 소스 tree 내에 선언 파일을 추가하세요.

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>

복사하기

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

Element

Purpose	Section titled “Purpose”
`cap-sheet`	Sheet 상태, detents, 제스처, 모달 동작 및 이벤트
`cap-sheet-trigger`	선언적 현재, 닫기, 토글 및 단계 동작
`cap-sheet-portal`	선택적 바디 포탈을 위한 overlay layering
`cap-sheet-view`	안전 영역 및 키보드 패딩을 위한 고정 뷰포트 호스트
`cap-sheet-backdrop`	Progress-synced backdrop
`cap-sheet-content`	접근성이 좋은 sheet 표면
`cap-sheet-bleeding-background`	둥근 모서리 시트를 위한 배경 확장
`cap-sheet-handle`	드래그 가능한 및 키보드 접근 가능한 detent handle
`cap-sheet-title`	접근성이 좋은 제목
`cap-sheet-description`	접근성이 좋은 설명
`cap-sheet-special-wrapper`	분리된 시트, 카드 및 라이트박스에 대한 구성 함수
`cap-sheet-stack`	그룹화된 시트
`cap-sheet-outlet`	Progress outlet for depth, parallax, and page effects
`cap-scroll`	스크롤 진행 도우미
`cap-fixed`	고정 레이어 도우미
`cap-island`	관련浮遊 섬 콘텐츠
`cap-external-overlay`	Overlay 콘텐츠 관리 (Sheet Tree 외부)

메인 옵션

옵션	속성	기본값	설명
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`, `center`
`detents`	`detents`	none	Space-separated CSS 길이들 such as `18em 32em`
`safeArea`	`safe-area`	`auto`	보호된 안전 영역
`swipe`	`swipe`	`true`	Pointer, Touch, Trackpad 및 Wheel 이벤트 허용
`swipeDismissal`	`swipe-dismissal`	`true`	가정 위치로 이동 `0`
`inertOutside`	`inert-outside`	`true`	모달 시트 뒤에 상호 작용 방지
`focusTrap`	`focus-trap`	`true`	키보드 포커스 유지
`closeOnOutsideClick`	`close-on-outside-click`	`true`	배경 또는 뷰 클릭 시 닫기
`closeOnEscape`	`close-on-escape`	`true`	Esc 키 누르면 닫기
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	키보드 위에 입력 항목 표시
`themeColorDimming`	`theme-color-dimming`	`auto`	모달 시트 WebView 테마 색상 어둡게

Entrypoint이 사용 가능합니다

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

Getting Started에서 계속

이러한 제품 워크플로우에서 __CAPGO_KEEP_0__ 플러그인 디렉토리와 연결된 경우 __CAPGO_KEEP_0__ 플러그인 디렉토리에서 Getting Started native 플러그인 작업을 계획하는 경우 __CAPGO_KEEP_0__ 플러그인 디렉토리와 연결합니다. Capgo 플러그인 디렉토리에서 Capgo 플러그인에 대한 구현 세부 정보 Capgo 플러그인에 대한 구현 세부 정보 Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, __CAPGO_KEEP_0__ 플러그인 디렉토리에서 __CAPGO_KEEP_0__ 플러그인에 대한 구현 세부 정보 __CAPGO_KEEP_0__ 플러그인에 대한 구현 세부 정보 Ionic Enterprise Plugin Alternatives Ionic Enterprise Plugin Alternatives 제품 워크플로우에서 Capgo 네이티브 빌드 Capgo 네이티브 빌드 제품 워크플로우에서