@capgo/capacitor-sheets

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

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

__CAPGO_KEEP_0__이 준비되었습니다.

Capacitor ready

모든 시트 형태

__CAPGO_KEEP_0__

Compose bottom sheets, side drawers, top sheets, centered dialogs, toasts, detached sheets, cards, pages, and lightboxes.

현대 CSS

Author detents with em, rem, viewport units, calc(), and CSS variables while the default sizing stays em based.

When To Use It

@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를 가진 하단 시트

왼쪽 또는 오른쪽 사이드바 및 상단 시트
Section titled “When To Use It”
중심화된 대화상자, 라이트박스, 카드, 그리고 토스트와 같은 오버레이
앱 뒤에 항상 상호 작용하는 지속적인 시트
엣지에서 들어오는 풀 페이지 오버레이
시트 진행도에 의해 구동되는 스택, 깊이, 패러럴렉스 효과
스크롤 도우미가 진행도와 거리 값을 노출
Capacitor-안전한 노치, 홈 인디케이터, 안드로이드 컷아웃, 소프트웨어 키보드 레이아웃

사용 사례 범위

사용 사례	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"`, 그리고 외부 클릭으로 닫히지 않습니다.
분리된 Sheet	`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"`
카드	소형 중앙 시트 콘텐츠

코어 API

<cap-sheet> 표시 상태, detents, 배치, 제스처, 접근성 및 이벤트를 소유합니다.
<cap-sheet-trigger> 현재, 닫기, 토글 및 detent-step 동작을 선언합니다.
<cap-sheet-view> Overlay의 위치를 설정하고 안전 영역 및 키보드 오프셋을 적용합니다.
<cap-sheet-backdrop> progress-synced 배경을 렌더링합니다.
<cap-sheet-content> sheet 표면을 렌더링합니다.
<cap-sheet-handle> 드래그 및 키보드 detent 제어를 제공합니다.
<cap-sheet-stack> stacked sheet를 좌표화합니다.
<cap-sheet-outlet> 페이지, 깊이 및 패러럴렉스 효과에 sheet 진행을 공개합니다.
<cap-scroll> 페이지/영역: Capgo 마케팅 웹사이트. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. seen in: page trust.astro. 메시지 키 `and` (And). <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_KEEP_0__/__CAPGO_KEEP_1__-sheets를 사용 중이라면 Capgo @capgo/capacitor-sheets와 연결하세요 Capgo @__CAPGO_KEEP_0__ 플러그인 디렉토리와 연결하세요 Capgo @Capgo 플러그인 디렉토리에서 제품 워크플로우를 확인하세요 Capgo @Capgo 플러그인 디렉토리에서 Capgo @__CAPGO_KEEP_1__ 플러그인 확인하세요 Capgo @Capacitor 플러그인 디렉토리에서 Capgo @Capgo 플러그인 확인하세요 Capacitor 플러그인에 대한 구현 세부 정보는 Capgo에서 제공됩니다. 플러그인 추가 또는 업데이트 __CAPGO_KEEP_0__ 플러그인에 대한 구현 세부 정보는 플러그인 추가 또는 업데이트에서 제공됩니다. 아이오닉 엔터프라이즈 플러그인 대안 __CAPGO_KEEP_0__ 플러그인에 대한 제품 워크플로우는 아이오닉 엔터프라이즈 플러그인 대안에서 제공됩니다. Capgo 네이티브 빌드 Capgo 네이티브 빌드에 대한 제품 워크플로우는 Capgo 네이티브 빌드에서 제공됩니다.