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.

설치

Capgo를 사용하여 AI 도구에 다음 명령어를 사용하여 Capgo 스킬을 추가할 수 있습니다.

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

그다음 다음 프롬프트를 사용하세요.

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

만약 Manual Setup을 선호한다면, 다음 명령어를 실행하여 플러그인을 설치하고 아래에 플랫폼에 따라 달라지는 지침을 따르세요.

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

안전 영역을 위한 뷰포트 설정을 추가하세요.

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

기본적으로 __CAPGO_KEEP_0__ 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)

__CAPGO_KEEP_1__

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

__CAPGO_KEEP_2__

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

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

export default config;

__CAPGO_KEEP_3__ native-focus-scroll-prevention__CAPGO_KEEP_4__ true__CAPGO_KEEP_0__

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

__CAPGO_KEEP_0__

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

컴포넌트 섹션']} (Note: The translations are in Korean) The protected tokens are preserved as is in the translations. The placeholders __CAPGO_KEEP_0__ are not present in the source text. The translations are in the same order as the input. The translations are in the Korean language. The section titles are translated to include the word

요소	목적
`cap-sheet`	Sheet 상태, detents, 제스처, 모달 동작 및 이벤트
`cap-sheet-trigger`	선언적 현재, 닫기, 토글 및 단계 동작
`cap-sheet-portal`	선택적 바디 포탈을 위한 overlay layering
`cap-sheet-view`	안전 영역 및 키보드 패딩을 고려한 고정 뷰포트 호스트
`cap-sheet-backdrop`	동기화된 진행률 백드롭
`cap-sheet-content`	접근 가능한 시트 표면
`cap-sheet-bleeding-background`	둥근 모서리 시트를 위한 배경 확장
`cap-sheet-handle`	드래그 가능하고 키보드 접근 가능한 detent 핸들
`cap-sheet-title`	접근 가능한 제목
`cap-sheet-description`	접근 가능한 설명
`cap-sheet-special-wrapper`	Composition hook for detached sheets, cards, and lightboxes
`cap-sheet-stack`	그룹화된 스택된 시트
`cap-sheet-outlet`	Progress outlet for depth, parallax, and page effects
`cap-scroll`	스크롤 진행도 도우미
`cap-fixed`	Fixed layer helper
`cap-island`	관련된 부유 섬네일
`cap-external-overlay`	Overlay content managed outside the sheet tree

메인 옵션

옵션	속성	기본값	설명
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`, 또는 `center`
`detents`	`detents`	CSS 길이의 공간-separated 목록	안전 영역의 보호된 모서리 `18em 32em`
`safeArea`	`safe-area`	`auto`	포인터, 터치, 트랙패드 및 휠 이벤트 활성화
`swipe`	`swipe`	`true`	가이드를 사용하여 디스미스 허용
`swipeDismissal`	`swipe-dismissal`	`true`	모달 시트 뒤에 상호 작용 방지 `0`
`inertOutside`	`inert-outside`	`true`	키보드 시트 내부에서 키보드 포커스 유지
`focusTrap`	`focus-trap`	`true`	배경 또는 뷰 클릭 시 디스미스
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Esc 키 누르면 디스미스
`closeOnEscape`	`close-on-escape`	`true`	입력 필드가 키보드 위에 유지
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	__CAPGO_KEEP_0__
`themeColorDimming`	`theme-color-dimming`	`auto`	모달 화면 색상이 어둡게 보입니다.

사용 가능한 엔트리 포인트

@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에서 계속 진행하세요.

Capacitor를 사용 중이라면 Getting Started Capacitor를 사용 중이라면 Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 제품 워크플로우를 위해 Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo의 구현 세부 사항을 위해 플러그인 추가 또는 업데이트 __CAPGO_KEEP_0__ 플러그인 추가 또는 업데이트 구현 세부 사항에 대해 아이오닉 엔터프라이즈 플러그인 대체 __CAPGO_KEEP_0__ 아이오닉 엔터프라이즈 플러그인 워크플로에 대해 Capgo 네이티브 빌드 Capgo 네이티브 빌드 워크플로에 대해