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.

패키지를 설치하세요
터미널 창
```
npm install @capgo/capacitor-sheets
```
웹 컴포넌트를 등록하세요
```
import '@capgo/capacitor-sheets';
```

__CAPGO_KEEP_0__ viewport 설정을 안전 영역을 위한 설정으로 추가하세요.

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

시트 렌더링

<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 안전 영역

__CAPGO_KEEP_0__ 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>

명령형 제어

모든 프레임워크 헬퍼는 동일한 내장된 커스텀 요소를 구성합니다. 또한 직접 시트를 제어할 수도 있습니다.:

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>

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

Components

요소	목적
`cap-sheet`	상태, 구획, 제스처, 모달 동작 및 이벤트
`cap-sheet-trigger`	선언적 현재, 닫기, 토글 및 단계 동작
`cap-sheet-portal`	선택적 오버레이 층을 위한 바디 포탈
`cap-sheet-view`	안전 영역 및 키보드 패딩을 고려한 고정 뷰포트 호스트
`cap-sheet-backdrop`	동기화된 진행 상황 배경
`cap-sheet-content`	둥근 모서리 시트를 위한 배경 확장
`cap-sheet-bleeding-background`	드래그 가능하고 키보드 접근 가능한 구획 핸들
`cap-sheet-handle`	접근 가능한 제목
`cap-sheet-title`	__CAPGO_KEEP_0__
`cap-sheet-description`	접근성 설명
`cap-sheet-special-wrapper`	분리된 시트, 카드 및 라이트 박스에 대한 구성 훅
`cap-sheet-stack`	시트 그룹화
`cap-sheet-outlet`	깊이, 패러럴랙스 및 페이지 효과를 위한 진행 출력
`cap-scroll`	스크롤 진행 도우미
`cap-fixed`	고정 레이어 도우미
`cap-island`	관련浮遊 섬네일 콘텐츠
`cap-external-overlay`	시트树 외부에서 관리되는 오버레이 콘텐츠

메인 옵션

옵션	속성	기본	설명
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right` 또는 `center`
`detents`	`detents`	없음	Space-separated CSS 길이들 such as `18em 32em`
`safeArea`	`safe-area`	`auto`	보호된 안전 영역
`swipe`	`swipe`	`true`	터치, 트랙패드 및 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`	__CAPGO_KEEP_0__ 키보드 위에 입력란을 보이게 유지하세요.
`themeColorDimming`	`theme-color-dimming`	`auto`	__CAPGO_KEEP_0__ 모달 시 WebView 테마 색상을 어둡게하세요.

__CAPGO_KEEP_0__ Entrypoints

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

__CAPGO_KEEP_0__ 시작부터 계속하세요.

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__을 사용하고 있다면 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__에서 __CAPGO_KEEP_0__을 시작부터 계속하세요. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__을 시작부터 계속하세요. Capgo Capgo을 __CAPGO_KEEP_1__에 연결하세요. Capgo Capgo 플러그인 디렉토리에서 Capgo 제품 워크플로우를 위해 Capgo 플러그인 디렉토리를 사용하세요. Capacitor Capgo에서 Capacitor 플러그인을 사용하세요. Capacitor 플러그인에 대한 구현 세부 정보는 Capgo 플러그인에 의해 제공됩니다. 플러그인 추가 또는 업데이트 __CAPGO_KEEP_0__ 플러그인에 대한 구현 세부 정보는 플러그인 추가 또는 업데이트에서 제공됩니다. Ionic Enterprise 플러그인 대체 Ionic Enterprise 플러그인 대체에 대한 제품 워크플로우입니다. Capgo 네이티브 빌드 Capgo 네이티브 빌드에 대한 제품 워크플로우입니다.