@capgo/capacitor-sheets

Capacitor 프론트엔드에서 어떤 형태로든 시트, 드로어, 다이얼로그, 토스트, 라이트박스, 카드, 페이지 오버레이를 빌드하세요.

시작하기 GitHub

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

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

Capacitor 준비

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

모든 시트 형태

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

최신 CSS

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

사용하는 경우

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

다음 경우에 사용하세요:

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

사용 사례 커버리지

사용 사례	Capgo 시트 패턴
긴 시트	`cap-sheet` natural scroll or `cap-scroll`
Sheet with Detent	`detents="18em 32em"` plus `stepTo()` or a step trigger
Sidebar	`content-placement="left"` or `content-placement="right"`
Bottom Sheet	default `content-placement="bottom"`
Sheet with Keyboard	`native-focus-scroll-prevention` and visual viewport offset handling
Toast	`inert-outside="false"`, `focus-trap="false"`and no outside-click dismissal
__CAPGO_KEEP_0__	`cap-sheet-special-wrapper` __CAPGO_KEEP_1__
__CAPGO_KEEP_2__	__CAPGO_KEEP_3__
__CAPGO_KEEP_4__	`content-placement="top"`
__CAPGO_KEEP_5__	`cap-sheet-stack` __CAPGO_KEEP_6__
__CAPGO_KEEP_7__	`cap-sheet-outlet` __CAPGO_KEEP_8__
__CAPGO_KEEP_9__	`cap-sheet-outlet` __CAPGO_KEEP_10__ `cap-scroll` __CAPGO_KEEP_11__
페이지	가로 또는 세로로 뻗어나오는 콘텐츠
라이트 박스	`content-placement="center"` 배경과 미디어 콘텐츠가 있는 라이트 박스
정적 시트	`default-presented`, `swipe-dismissal="false"`정적 시트의 위치를 기억하는 기능 `inert-outside="false"`
카드	가운데 정렬된 콘텐츠가 있는 카드

Core API

<cap-sheet> 표시, 닫기, 토글, 그리고 detent-step 액션을 선언합니다.
<cap-sheet-trigger> __CAPGO_KEEP_0__
<cap-sheet-view> overlay를 위치시키고 안전 영역과 키보드 오프셋을 적용합니다.
<cap-sheet-backdrop> progress-sync된 배경을 렌더링합니다.
<cap-sheet-content> sheet 표면을 렌더링합니다.
<cap-sheet-handle> 드래그 및 키보드 데텐트 제어를 제공합니다.
<cap-sheet-stack> 겹쳐진 sheet를 좌표화합니다.
<cap-sheet-outlet> 페이지, 깊이 및 패러럴렉스 효과에 sheet 진행률을 공개합니다.
<cap-scroll> scroll 진행률과 거리 도우미를 공개합니다. <cap-scroll-content> framework 효과 또는 라이프 사이클 훅에서 sheet를 구성합니다.
setupSheet(element, options?) __CAPGO_KEEP_0__ 레이아웃 모델

제목 “Capacitor 레이아웃 모델”

기본 sheet 뷰포트는 __CAPGO_KEEP_0__ 레이아웃 모델을 읽습니다. env(safe-area-inset-*) 및 Capacitor-style --safe-area-inset-* fallback 변수를 사용하여 선택된 경계를 오버레이 주변에 패딩으로 적용합니다. safe-area="auto" 모든 경계를 보호합니다. 사용 사례가 다른 동작이 필요할 때 사용하세요. safe-area="bottom left right" 또는 safe-area="none" 키보드 처리는 기본적으로 활성화되어 있습니다. 시트는 리사이즈 및 스크롤 이벤트를 듣고, 뷰포트에 키보드 오프셋을 추가하고, 키보드 소프트웨어 위에 입력이 보이도록 제어를 초점을 맞춥니다.

소프트웨어 키보드 위에 입력이 보이도록 유지하기 위해, 키보드 처리를 사용하세요. visualViewport 패키지는 웹层에서 실행됩니다. UIKit 또는 Android bottom sheet를 렌더링하지 않으므로, 앱은 전체 스타일링 제어를 유지하면서 WebView 제약조건을 존중합니다. preventScroll Demos And Playgrounds

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.

웹P 애니메이션 데모가 모든 지원되는 사용 사례에 포함되어 있습니다. 예제는 StackBlitz 플레이그라운드 형태로도 제공됩니다.

Animated WebP demos for every supported usecase ship in the repository README. The examples are also available as StackBlitz playgrounds:

긴 종이	Detents

사이드바	라이트박스

capgo/capacitor-sheets에서 계속하기

Capgo를 사용 중이라면 capgo/capacitor-sheets __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-sheets을 통해 Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 제품 워크플로우 Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo의 구현 세부 사항 플러그인을 추가하거나 업데이트 __CAPGO_KEEP_0__ Native Builds 구현 세부 사항에 대한 정보는 Adding or Updating Plugins에서 찾을 수 있습니다. Ionic Enterprise Plugin Alternatives __CAPGO_KEEP_0__ Native Builds의 제품 워크플로에 대한 정보는 __CAPGO_KEEP_0__ Native Builds에서 찾을 수 있습니다. Capgo Native Builds의 제품 워크플로에 대한 정보는 Capgo Native Builds에서 찾을 수 있습니다. Capgo Native Builds