@capgo/capacitor-sheets

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

시작하기 GitHub

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

리액트, 뷰, 앵귤러, 슬라이스, 솔리드와 같은 표준 기반 커스텀 엘리먼트를 직접 사용하거나 설정 도우미를 사용하세요.

Capacitor 준비되었습니다.

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

모든 시트 형태

Compose 하단 시트, 측면 드로어, 상단 시트, 중앙 대화상자, 토스트, 분리된 시트, 카드, 페이지, 그리고 라이트 박스.

최신 CSS

기본 사이즈가 유지되는 동안 Author detents를 em, rem, 뷰포트 단위, calc()와 CSS 변수로 구성합니다. em 사용 방법

사용 방법

@capgo/capacitor-sheets is for Capacitor apps that need high-quality mobile overlays without adopting a specific UI framework. It ships as custom elements, so the core package has no React, Vue, Angular, Svelte, or Solid runtime dependency.

하단 시트 1개 이상의 detents

왼쪽 또는 오른쪽 측면 바와 상단 시트
left or right sidebars and top sheets
중심에 위치한 대화상자, 라이트박스, 카드, 그리고 토스트와 같은 오버레이
앱 뒤에 항상 상호 작용하는 지속적인 시트
엣지에서 들어오는 풀 페이지 오버레이
시트 진행도에 의해 구동되는 스택, 깊이, 및 파라라ックス 효과
스크롤 도우미가 진행도 및 거리 값을 노출
Capacitor-안전한 레이아웃으로 notch, 홈 인디케이터, 안드로이드 컷아웃, 및 소프트웨어 키보드

사용 사례 커버리지

사용 사례	Capgo 시트 패턴
길이 있는 시트	`cap-sheet` natural content 스크롤 또는 `cap-scroll`
Detent 시트	`detents="18em 32em"` 더 `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` 커스텀 마진과 라디우스
페이지에서 아래로	전체 높이의 아래 시트 내용
상단 시트	`content-placement="top"`
레이어링이 있는 시트	`cap-sheet-stack` 깊이 변수와 함께
깊이와 함께	`cap-sheet-outlet` 변환에 의한 진행
파라라ックス 페이지	`cap-sheet-outlet` with `cap-scroll` 진행
페이지	전체 뷰포트 콘텐츠가 가장자리에서 들어오는 경우
라이트박스	`content-placement="center"` 배경과 미디어 콘텐츠가 있는 라이트박스
정지 시트	`default-presented`, `swipe-dismissal="false"`, 그리고 `inert-outside="false"`
카드	콤팩트 센터드 시트 콘텐츠

Core API

<cap-sheet> 표시 상태, detents, 배치, 제스처, 접근성 및 이벤트를 소유합니다.
<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> 페이지, 깊이 및 패러럴렉스 효과에 sheet 진행률을 공개합니다.
<cap-scroll> 페이지에 <cap-scroll-content> 스크롤 진행률 및 거리 도우미를 공개합니다.
setupSheet(element, options?) framework 효과 또는 라이프사이클 훅에서 sheet를 구성합니다.

Capacitor 레이아웃 모델

기본 시트 뷰포트는 env(safe-area-inset-*) 및 Capacitor-스타일 --safe-area-inset-* 대체 변수를 사용하여 fallback 변수를 설정하고 선택한 경계를 오버레이 주변에 패딩으로 적용합니다. safe-area="auto" 모든 경계를 보호합니다. 사용할 수 있는 경우 safe-area="bottom left right" 또는 safe-area="none" 사용할 때 필요한 경우 다른 동작이 필요합니다.

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

패키지는 웹层에서 실행됩니다. native UIKit 또는 Android bottom sheets를 렌더링하지 않으므로 앱은 WebView 제약을 존중하면서도 Capacitor에서 중요하다고 여기는 모든 스타일링 제어를 유지할 수 있습니다.

데모 및 플레이그라운드

WebP 애니메이션 데모는 모든 지원되는 사용 사례에 포함되어 있으며 저장소 README에 포함되어 있습니다. 예제는 또한 StackBlitz 플레이그라운드로도 제공됩니다:

장수 시트	Detents

사이드바	라이트박스

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

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