__CAPGO_KEEP_0__

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

        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';
```

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

<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

안전 영역은 기본적으로 활성화되어 있으며, 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>
  );
}

React에서 가져오기 @capgo/capacitor-sheets/react TypeScript에서 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>
  );
}

컴포넌트

Element	목적
`cap-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`	분리된 시트, 카드 및 라이트 박스에 대한 구성 훅
`cap-sheet-stack`	chồng 나열된 시트 그룹
`cap-sheet-outlet`	깊이, 패러럴 및 페이지 효과를 위한 진행 중인 출력
`cap-scroll`	스크롤 진행 도우미
`cap-fixed`	고정 레이어 도우미
`cap-island`	관련浮遊 섬 컨텐츠
`cap-external-overlay`	시트树 외부에서 관리되는 오버레이 컨텐츠

메인 옵션

옵션	속성	기본값	설명
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`, 또는 `center`
`detents`	`detents`	없음	__CAPGO_KEEP_0__과 같은 공간 분리된 CSS 길이 `18em 32em`
`safeArea`	`safe-area`	`auto`	안전 영역의 보호된 모서리
`swipe`	`swipe`	`true`	포인터, 터치, 트랙패드 및 wheel 이벤트를 활성화합니다.
`swipeDismissal`	`swipe-dismissal`	`true`	detent로 닫을 수 있는 제스처를 허용합니다. `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를 사용 중이라면 Getting Started Capgo를 사용하여 네이티브 플러그인 작업을 계획하고자 한다면, Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 제품 워크플로우를 연결하세요 Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo의 implementation detail 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트의 implementation detail Ionic Enterprise 플러그인 대체 Ionic Enterprise 플러그인 대체품의 제품 워크플로우에 대해, Capgo 네이티브 빌드 Capgo 네이티브 빌드의 제품 워크플로우에 대해.