@capgo/capacitor-sheets

Silk-style 시트, 드로어, 다이얼로그, 토스트, 라이트박스, 카드 및 페이지 오버레이를 어떤 Capacitor 프론트엔드에서 만들 수 있습니다.

시작하기 GitHub

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

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

Capacitor 준비되었습니다.

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

모든 시트 형태

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

최신 CSS

기본 크기는 em, rem뷰포트 단위, calc()CSS 변수로 정의하세요. em 기본 크기는

기본 크기는 CSS 변수로 정의되며, CSS 변수를 사용하여 크기를 조정하세요.

@capgo/capacitor-sheets Capacitor 앱에 고품질의 모바일 오버레이가 필요하지만 특정 UI 프레임워크를 채택하지 않는 경우에 사용합니다.

__CAPGO_KEEP_0__을 사용할 때는:

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

사용 사례 범위

사용 사례	Capgo 시트 패턴
길이 있는 시트	`cap-sheet` natural content 스크롤 또는 `cap-scroll`
시트에 Detent	`detents="18em 32em"` plus `stepTo()` 또는 단계 트리거
사이드바	`content-placement="left"` 또는 `content-placement="right"`
하단 시트	기본 `content-placement="bottom"`
키보드와 시각적 뷰포트 오프셋 처리를 위한 시트	`native-focus-scroll-prevention` 토스트
Toast	`inert-outside="false"`, `focus-trap="false"`분리된 시트
커스텀 마진과 반경	`cap-sheet-special-wrapper` 하단 페이지
전체 높이 하단 시트 콘텐츠	상단 시트
Top Sheet	`content-placement="top"`
스HEET 스택	`cap-sheet-stack` 깊이 변수와 함께
깊이 스퀘어	`cap-sheet-outlet` 진행률에 따라 변형
파라라ックス 페이지	`cap-sheet-outlet` 진행률 `cap-scroll` 페이지
Page	라이트 박스
배경과 미디어 콘텐츠	`content-placement="center"` 영구 스퀘어와 데텐트
스HEET 스퀘어	`default-presented`, `swipe-dismissal="false"`, and `inert-outside="false"`
Card	지정된 콘텐츠

Core API

<cap-sheet> Core __CAPGO_KEEP_0__
<cap-sheet-trigger> Core __CAPGO_KEEP_0__
<cap-sheet-view> Core __CAPGO_KEEP_0__
<cap-sheet-backdrop> Core __CAPGO_KEEP_0__
<cap-sheet-content> Core __CAPGO_KEEP_0__
<cap-sheet-handle> Core __CAPGO_KEEP_0__
<cap-sheet-stack> Core __CAPGO_KEEP_0__
<cap-sheet-outlet> 페이지의 시트 진행률, 깊이, 및 패러럴렉스 효과를 공개합니다.
<cap-scroll> 페이지 <cap-scroll-content> 스크롤 진행률 및 거리 도우미를 공개합니다.
setupSheet(element, options?) 프레임워크 효과 또는 라이프 사이클 훅을 사용하여 시트를 구성합니다.

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.

데모 및 플레이그라운드

Animated WebP 데모는 모든 지원되는 사용 사례가 포함되어 있습니다. 예제는 StackBlitz 플레이그라운드도 포함되어 있습니다.

길이 있는 시트	detents

사이드바	라이트 박스

@capgo/capacitor에서 계속

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