Capgo-capgo/capacitor-sheets

Build Silk-style sheets, drawers, dialogs, toasts, lightboxes, cards, and page overlays in any Capacitor frontend.

시작하기 GitHub

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

표준 기반의 커스텀 엘리먼트를 직접 사용하거나 React, Vue, Angular, Svelte, Solid와 같은 설정 도우미를 사용하세요.

Capacitor 준비되었습니다

웹 계층에서 안전한 영역, 키보드 이동, 네이티브 에지 제스처, WebView 테마 컬러 어둡음과 같은 것을 존중하세요.

모든 시트 형태

하단 시트, 측면 드로어, 상단 시트, 중앙 대화상자, 토스트, 분리된 시트, 카드, 페이지, 라이트 박스 등 다양한 시트를 구성하세요.

모던 CSS

작성자 detents와 em, rem, 뷰포트 단위, calc()CSS 변수를 사용하여 기본 크기는 em 기본 크기로 유지됩니다.

사용하는 경우

@capgo/capacitor-sheets 은 Capacitor 앱이 특정 UI 프레임워크를 채택하지 않고도 고품질의 모바일 오버레이가 필요할 때 사용됩니다. 이 플러그인은 커스텀 엘리먼트로 제공되므로, 코어 패키지는 React, Vue, Angular, Svelte, 또는 Solid 런타임 의존성을 갖지 않습니다.

사용하는 경우:

1개 이상의 detents를 가진 하단 시트
왼쪽 또는 오른쪽 사이드바 및 상단 시트
중앙에 위치한 대화상자, 라이트박스, 카드 및 토스트와 같은 오버레이
지속적인 시트가 앱 뒤에 있는 인터랙티브한 상태를 유지합니다.
전체 화면 오버레이가 에지에서 들어옵니다.
시트 진행도에 의해 구동되는 스택, 깊이 및 패러럴렉스 효과
스크롤 도우미가 진행도 및 거리 값을 노출합니다.
Capacitor-안전한 notch, 홈 인디케이터, 안드로이드 cutout 및 소프트웨어 키보드 레이아웃

사용 사례 커버리지

사용 사례	Capgo 시트 패턴
장막	`cap-sheet` natural 스크롤 또는 `cap-scroll`
Detent와 함께 Sheet	`detents="18em 32em"` plus `stepTo()` 또는 단계 트리거
사이드바	`content-placement="left"` 또는 `content-placement="right"`
하단 Sheet	기본 `content-placement="bottom"`
키보드와 함께 Sheet	`native-focus-scroll-prevention` 키보드와 시각적 뷰포트 오프셋 처리
토스트	`inert-outside="false"`, `focus-trap="false"`밖으로 클릭하여 닫기 없음
분리된 시트	`cap-sheet-special-wrapper` 커스텀 마진과 반경
페이지에서 아래로	전체 높이 하단 시트 내용
상단 시트	`content-placement="top"`
스택킹이 가능한 시트	`cap-sheet-stack` 깊이 변수와 함께
깊이 변수가 있는 시트	`cap-sheet-outlet` 변화에 따라 진행되는 변환
파라미터 페이지	`cap-sheet-outlet` 그것과 `cap-scroll` 진행
페이지	전면에서 가장자리에서 들어오는 전체 뷰포트 콘텐츠
라이트 박스	`content-placement="center"` 배경과 미디어 콘텐츠와 함께
정지 시트	`default-presented`, `swipe-dismissal="false"`, 그리고 `inert-outside="false"`
카드	중앙에 위치한 소형 시트 콘텐츠

Core API

<cap-sheet> 표시 상태, 정지점, 배치, 제스처, 접근성 및 이벤트를 소유합니다.
<cap-sheet-trigger> 현재 상태, 닫기, 토글, 및 detent-step 액션을 선언합니다.
<cap-sheet-view> overlay의 위치를 설정하고 safe-area 및 키보드 오프셋을 적용합니다.
<cap-sheet-backdrop> progress-synced 배경을 렌더링합니다.
<cap-sheet-content> sheet 표면을 렌더링합니다.
<cap-sheet-handle> 드래그 및 키보드 detent 제어를 제공합니다.
<cap-sheet-stack> stacked sheet의 위치를 조정합니다.
<cap-sheet-outlet> page, depth, 및 parallax 효과에 sheet 진행률을 노출합니다.
<cap-scroll> 그리고 <cap-scroll-content> 스크롤 진행률 및 거리 도우미를 노출합니다.
setupSheet(element, options?) framework 효과 또는 lifecycle hook에서 sheet를 구성합니다.

Capacitor 레이아웃 모델

기본 시트 뷰포트는 env(safe-area-inset-*) 그리고 Capacitor-스타일 --safe-area-inset-* fallback 변수를 읽고 선택된 테두리를 오버레이 주변에 패딩으로 적용합니다. safe-area="auto" 모든 테두리를 보호합니다. safe-area="bottom left right" 또는 safe-area="none" 사용 사례가 다른 동작이 필요할 때

키보드 처리는 기본적으로 활성화되어 있습니다. 시트는 visualViewport 크기와 스크롤 이벤트를 듣고, 뷰포트에 키보드 오프셋을 추가하고, preventScroll 소프트웨어 키보드 위에 표시되는 입력을 유지하기 위해

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.

앱은 WebView 제약을 존중하면서도 전체 스타일링 제어를 유지할 수 있습니다.

Animated WebP 데모는 모든 지원되는 사용 사례에 대해 저장소 README에 포함됩니다. 예제는 또한 StackBlitz 플레이그라운드로도 제공됩니다:

길이있는 시트	Detents

사이드바	라이트박스

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

Capgo를 사용 중이라면 @capgo/capacitor-sheets native 플러그인 작업을 계획하려면 그것을 연결하세요 Capgo 플러그인 디렉토리와 연결하여 @Capgo/__CAPGO_KEEP_1__-sheets의 제품 워크플로우를 사용하세요 Capgo 플러그인 디렉토리에서 @Capgo 플러그인들 Capacitor 플러그인들에서 @Capgo 플러그인들 Capacitor 플러그인들에서 @Capgo 플러그인들 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트 구현 세부 사항에 대해 아이오닉 엔터프라이즈 플러그인 대체 아이오닉 엔터프라이즈 플러그인 제품 워크플로우에 대해 Capgo 네이티브 빌드 Capgo 네이티브 빌드 제품 워크플로우에 대해