@capgo/capacitor-sheets

Capacitor 프론트엔드에서 어떤 형태의 시트, 드로어, 다이얼로그, 토스트, 라이트박스, 카드, 페이지 오버레이를 빌드할 수 있습니다.

프레임워크에 독립적입니다

__CAPGO_KEEP_0__를 사용하여 React, Vue, Angular, Svelte, Solid와 같은 표준 기반의 커스텀 엘리먼트를 직접 사용하거나 설정 도우미를 사용할 수 있습니다.

Capacitor

웹层에서 안전한 영역, 키보드 이동, 네이티브 에지 제스처, WebView 테마 컬러 어둡게 하는 것을 존중합니다.

모든 시트 형태

Compose bottom sheets, side drawers, top sheets, centered dialogs, toasts, detached sheets, cards, pages, and lightboxes.

현대 CSS

작성자 detents와 함께 em, rem, 뷰포트 단위, calc(), CSS 변수를 사용하여 기본 크기는 em 기본 크기가

사용할 때

@capgo/capacitor-sheets 은 Capacitor 앱에 필요한 고품질 모바일 오버레이를 특정 UI 프레임워크를 채택하지 않고 사용하기 위한 것입니다. It ships as custom elements, so the core package has no React, Vue, Angular, Svelte, or Solid runtime dependency.

사용할 때:

1개 이상의 detents를 가진 하단 시트
왼쪽 또는 오른쪽 사이드바 및 상단 시트
중심화된 대화상자, 라이트박스, 카드 및 토스트와 같은 오버레이
앱 뒤에 항상 상호 작용하는 지속적인 시트
엣지에서 들어오는 풀 페이지 오버레이
시트 진행에 의해 구동되는 스택, 깊이 및 파라라ックス 효과
스크롤 헬퍼가 진행 및 거리 값을 노출
Capacitor-안전한 notch, 홈 인디케이터, 안드로이드 커투트 및 소프트웨어 키보드에 대한 레이아웃

사용 사례 커버리지

사용 사례	Capgo 시트 패턴
장문 시트	`cap-sheet` 자연스러운 콘텐츠 스크롤 또는 `cap-scroll`
정단정 시트	`detents="18em 32em"` 더하기 `stepTo()` 또는 단계 트리거
사이드바	`content-placement="left"` 또는 `content-placement="right"`
하단 시트	기본 `content-placement="bottom"`
키보드와 시각적 뷰포트 오프셋 처리를 지원하는 시트	`native-focus-scroll-prevention` and visual viewport offset handling
Toast	`inert-outside="false"`, `focus-trap="false"`__CAPGO_KEEP_0__
분리된 Sheet	`cap-sheet-special-wrapper` __CAPGO_KEEP_1__
페이지에서 아래로	__CAPGO_KEEP_2__
상단 Sheet	`content-placement="top"`
__CAPGO_KEEP_3__	`cap-sheet-stack` 레이어링 Sheet
__CAPGO_KEEP_4__	`cap-sheet-outlet` 깊이 변수
__CAPGO_KEEP_5__	`cap-sheet-outlet` with `cap-scroll` progress
페이지	가로 또는 세로로 뻗어나가는 콘텐츠
Lightbox	`content-placement="center"` 배경과 미디어 콘텐츠가 있는 Lightbox
Persistent Sheet with Detent	`default-presented`, `swipe-dismissal="false"`정적 Sheet `inert-outside="false"`
Card	중앙에 위치한 Sheet

Core API

<cap-sheet> __CAPGO_KEEP_0__ 레이아웃 모델
<cap-sheet-trigger> 표시 상태, detents, 배치, 제스처, 접근성 및 이벤트를 소유합니다.
<cap-sheet-view> 현재, 닫기, 토글 및 detent-step 동작을 선언합니다.
<cap-sheet-backdrop> overlay의 위치를 설정하고 safe-area 및 키보드 오프셋을 적용합니다.
<cap-sheet-content> progress-synced 배경을 렌더링합니다.
<cap-sheet-handle> sheet 표면을 렌더링합니다.
<cap-sheet-stack> 드래그 및 키보드 detent 제어를 제공합니다.
<cap-sheet-outlet> stacked sheet를 좌표화합니다.
<cap-scroll> 페이지, 깊이 및 패러럴렉스 효과에 sheet 진행을 노출합니다. <cap-scroll-content> 스크롤 진행 및 거리 헬퍼를 노출합니다.
setupSheet(element, options?) framework 효과 또는 라이프사이클 훅에서 sheet를 구성합니다.

Capacitor

__CAPGO_KEEP_0__ 기본 시트 뷰포트 env(safe-area-inset-*) Capacitor-스타일 --safe-area-inset-* __CAPGO_KEEP_0__ 변수를 사용하여 기본값을 설정한 후 선택된 에지들을 오버레이 주변에 패딩으로 적용합니다. safe-area="auto" 모든 에지 보호; 사용 safe-area="bottom left right" 또는 safe-area="none" 사용 사례가 다른 동작이 필요한 경우

키보드 처리는 기본적으로 활성화되어 있습니다. 시트는 리사이즈 및 스크롤 이벤트를 듣고, 뷰포트에 키보드 오프셋을 추가하고, visualViewport 키보드 소프트웨어 위에 입력이 보이도록 제어를 초점을 맞춥니다. preventScroll 패키지는 웹层에서 실행되며, native UIKit 또는 Android bottom sheets를 렌더링하지 않습니다. 따라서 앱은 __CAPGO_KEEP_0__에서 중요하게 여기는 WebView 제약조건을 존중하면서도 전체 스타일링 제어를 유지할 수 있습니다.

The package runs in the web layer. It does not render native UIKit or Android bottom sheets, so your app keeps full styling control while still respecting the WebView constraints that matter in Capacitor.

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__의 모든 지원되는 사용 사례에 대한 애니메이션 WebP 데모가 저장소 README에 포함됩니다. 예시는 또한 StackBlitz 플레이그라운드 형태로 제공됩니다:

긴 장치	Detents

사이드바	라이트박스

Capgo에서 @capgo/capacitor-sheets로 계속 진행하세요

Capgo를 사용 중이라면 @capgo/capacitor-sheets Capgo를 통해 네이티브 플러그인 작업을 계획하고 있다면 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-sheets를 연결하세요 Capgo 플러그인 디렉토리에서 @Capgo 플러그인 디렉토리 workflow Capgo 플러그인 디렉토리에서 @Capgo @__CAPGO_KEEP_1__ 플러그인 @Capacitor @Capgo 플러그인 구현 세부 정보에 대한 Capacitor 플러그인에 의해 Capgo 플러그인 추가 또는 업데이트 구현 세부 정보에 대한 플러그인 추가 또는 업데이트 아이오닉 엔터프라이즈 플러그인 대체 아이오닉 엔터프라이즈 플러그인 대체에 대한 제품 워크플로우, 그리고 Capgo 네이티브 빌드 Capgo 네이티브 빌드에 대한 제품 워크플로우