@capgo/capacitor-sheets

Capacitor 프론트엔드에서丝绸 스타일의 시트, 드로어, 다이얼로그, 토스트, 라이트박스, 카드 및 페이지 오버레이를 빌드하세요.

시작하기 GitHub

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

React, Vue, Angular, Svelte, Solid과 같은 프레임워크를 사용하거나 설정 도우미를 사용하여 직접 표준 기반 커스텀 요소를 사용하십시오.

Capacitor 준비되었습니다.

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

모든 시트 형태

하단 시트, 측면 드로어, 상단 시트, 중앙 대화상자, 토스트, 분리된 시트, 카드, 페이지, 라이트 박스와 같은 모든 종류의 시트를 구성하십시오.

최신 CSS

기본 크기는 유지하면서 em, rem, 뷰포트 단위, calc(), CSS 변수와 함께 author detents를 사용하십시오. em 기본 크기와 함께

When To Use It

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

다음과 같은 경우 사용하세요:

1개 이상의 detents를 지원하는 하단 시트
왼쪽 또는 오른쪽 사이드바 및 상단 시트
중앙에 위치한 대화상자, 라이트 박스, 카드 및 토스트와 같은 오버레이
뒤에 앱을 유지하는 반응형 시트
엣지에서 들어오는 전체 페이지 오버레이
시트 진행도에 의해 구동되는 스택, 깊이 및 파라라ックス 효과
시트 진행도 및 거리 값을 노출하는 스크롤 헬퍼
Capacitor-안전한 notch, 홈 인디케이터, 안드로이드 컷아웃 및 소프트웨어 키보드에 대한 레이아웃

사용 사례 범위

사용 사례	Capgo 시트 패턴
길이 있는 시트	`cap-sheet` 자연적인 콘텐츠 스크롤 또는 `cap-scroll`
시트에 Detent	`detents="18em 32em"` 또는 `stepTo()` 또는 단계 트리거
사이드바	`content-placement="left"` 또는 `content-placement="right"`
하단 시트	기본 `content-placement="bottom"`
키보드와 시각적 뷰포트 오프셋 처리를 위한 시트	`native-focus-scroll-prevention` 토스트
, 외부 클릭으로 닫히지 않음	`inert-outside="false"`, `focus-trap="false"`분리된 시트
커스텀 마진과 반지름	`cap-sheet-special-wrapper` 하단에서 페이지
전체 높이 하단 시트 콘텐츠	__CAPGO_KEEP_0__
상단 시트	`content-placement="top"`
스택이 있는 시트	`cap-sheet-stack` 깊이 변수와 함께
깊이 시트	`cap-sheet-outlet` 진행에 따라 변환
파라라ックス 페이지	`cap-sheet-outlet` 진행 `cap-scroll` 진행
페이지	뷰포트 전체 내용이 한 변에서 들어오는
라이트 박스	`content-placement="center"` 배경과 미디어 콘텐츠와 함께
Persistent Sheet with Detent	`default-presented`, `swipe-dismissal="false"`, and `inert-outside="false"`
Card	축소된 중앙 시트 콘텐츠

Core API

<cap-sheet> 표시, detents, 위치, 제스처, 접근성 및 이벤트를 소유합니다.
<cap-sheet-trigger> 현재, 닫기, 토글 및 detent-step 액션을 선언합니다.
<cap-sheet-view> Overlay의 위치를 설정하고 safe-area 및 키보드 오프셋을 적용합니다.
<cap-sheet-backdrop> progress-synced 배경을 렌더링합니다.
<cap-sheet-content> 시트 표면을 렌더링합니다.
<cap-sheet-handle> 드래그 및 키보드 detent 제어를 제공합니다.
<cap-sheet-stack> 좌표가 쌓인 시트.
<cap-sheet-outlet> 페이지, 깊이, 및 패러럴렉스 효과를 포함하여 시트 진행률을 페이지에 공개합니다.
<cap-scroll> 및 <cap-scroll-content> 스크롤 진행률 및 거리 도우미를 공개합니다.
setupSheet(element, options?) __CAPGO_KEEP_0__ 레이아웃 모델을 구성합니다.

제목 ‘Capacitor 레이아웃 모델’

및 __CAPGO_KEEP_0__-style env(safe-area-inset-*) and Capacitor-style --safe-area-inset-* 모든 테두리를 보호합니다. 사용 safe-area="auto" 또는 safe-area="bottom left right" __CAPGO_KEEP_0__ safe-area="none" When a use case needs different behavior.

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

Animated WebP 데모는 모든 지원되는 사용 사례가 포함되어 있습니다. 레포지토리 README에 포함되어 있습니다. 예제는 또한 StackBlitz 플레이그라운드로도 제공됩니다:

Detents

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-sheets에 대한 Animated Long Sheet 데모	@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-sheets에 대한 Animated Sheet with Detent 데모

Sidebar	Lightbox

@capgo/capacitor-sheets에서 계속하기

만약 __CAPGO_KEEP_0__을 사용하고 있다면 @capgo/capacitor-sheets __CAPGO_KEEP_0__ Plugin Directory에서 __CAPGO_KEEP_0__ Plugin Directory의 제품 워크플로우를 위해 Capgo Plugins by __CAPGO_KEEP_1__에서 Capgo Plugins by __CAPGO_KEEP_1__의 구현 세부 정보를 위해 Capgo Plugins by __CAPGO_KEEP_1__에서 Capgo Plugins by __CAPGO_KEEP_1__의 구현 세부 정보를 위해 Capacitor Plugins by Capgo에서 Capacitor Plugins by Capgo의 구현 세부 정보를 위해 Capacitor Plugins by Capgo에서 Capacitor Plugins by Capgo의 구현 세부 정보를 위해 __CAPGO_KEEP_0__ Plugins by __CAPGO_KEEP_1__에서 __CAPGO_KEEP_0__ Plugins by __CAPGO_KEEP_1__의 구현 세부 정보를 위해 __CAPGO_KEEP_0__ Plugins by __CAPGO_KEEP_1__에서 __CAPGO_KEEP_0__ Plugins by __CAPGO_KEEP_1__의 구현 세부 정보를 위해 __CAPGO_KEEP_0__ Plugins by __CAPGO_KEEP_1__에서 __CAPGO_KEEP_0__ Plugins by __CAPGO_KEEP_1__의 구현 세부 정보를 위해 __CAPGO_KEEP_0__ Plugins by __CAPGO_KEEP_1__에서 __CAPGO_KEEP_0__ Plugins by __CAPGO_KEEP_1__의 구현 세부 정보를 위해 Capgo Plugins by __CAPGO_KEEP_1__에서 Capgo Plugins by __CAPGO_KEEP_1__의 구현 세부 정보를 위해 Capgo Native Builds를 위한 제품 워크플로우에 대해.