@capgo/capacitor-sheets

Build Silk-style sheets, drawers, dialogs, toasts, lightboxes, cards, and page overlays in any Capacitor frontend.

开始 GitHub

框架无关

直接使用基于标准的自定义元素或使用 React、Vue、Angular、Svelte 和 Solid 的设置助手。

Capacitor 已准备好

从 web层尊严安全区域、键盘移动、原生边缘手势和 WebView 主题颜色降暗。

每个表格形状

组合底部弹出窗口、侧边栏、顶部弹出窗口、居中的对话框、通知、脱离的弹出窗口、卡片、页面和光盒。

现代CSS

使用 em, rem, viewport units, calc()和CSS变量，同时默认的尺寸保持 em 基于。

何时使用它

@capgo/capacitor-sheets 是为Capacitor应用而设计的，需要高质量的移动弹出窗口但不需要采用特定的UI框架。它以自定义元素的形式发布，因此核心包没有React、Vue、Angular、Svelte或Solid的运行时依赖。

使用它时需要:

底部弹出窗口（一个或多个凹点）
左侧或右侧的侧边栏和顶部弹出窗口
居中对话框、轻盒、卡片和类似toast的覆盖层
始终可见的覆盖层，保持应用程序后面的交互
全屏覆盖层，边缘进入
由覆盖层进度驱动的堆栈、深度和抖动效果
暴露进度和距离值的滚动辅助
Capacitor-安全的布局，适用于凹槽、主屏幕指示器、Android切口和软件键盘

用例覆盖范围

用例	Capgo Sheet 模式
长 Sheet	`cap-sheet` 具有自然内容滚动或 `cap-scroll`
带有 Detent 的 Sheet	`detents="18em 32em"` 加 `stepTo()` 或一个步骤触发器
侧边栏	`content-placement="left"` 或 `content-placement="right"`
底部 Sheet	默认 `content-placement="bottom"`
带有键盘的 Sheet	`native-focus-scroll-prevention` 并处理视觉视口偏移
Toast	`inert-outside="false"`, `focus-trap="false"`, 并且不支持点击外部区域关闭
独立Sheet	`cap-sheet-special-wrapper` 加上自定义边距和圆角
从底部弹出	底部全屏内容
顶部Sheet	`content-placement="top"`
带有深度变量的Sheet	`cap-sheet-stack` 带有深度和进度驱动变换的Sheet
抖动页面	`cap-sheet-outlet` plus custom margins and radius
full-height bottom sheet content	`cap-sheet-outlet` 与 `cap-scroll` 进展
页面	全视图内容从边缘进入
光盘	`content-placement="center"` 带背景和媒体内容的光盘
持久的弹簧	`default-presented`, `swipe-dismissal="false"`和 `inert-outside="false"`
卡片	紧凑的中心弹簧内容

Core API

<cap-sheet> 控制呈现状态、阻塞、布局、手势、可访问性和事件。
<cap-sheet-trigger> 声明当前、关闭、切换和阻塞步骤动作。
<cap-sheet-view> 定位弹出层并应用安全区域和键盘偏移。
<cap-sheet-backdrop> 渲染一个进度同步的背景。
<cap-sheet-content> 渲染一个同步的弹出层。
<cap-sheet-handle> 提供拖动和键盘阻塞控件。
<cap-sheet-stack> 协调堆叠的弹出层。
<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 resize 和 scroll 事件，添加一个键盘偏移量到视图区域，且聚焦控制以 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.

演示和沙盒

WebP动画演示在README中提供，涵盖所有支持的用例。示例也可在StackBlitz playground中找到：

长表格	缓冲

侧边栏	光箱

从 @capgo/capacitor-sheets 继续

如果您正在使用 @capgo/capacitor-sheets 来规划原生插件工作，连接它与 Capgo 插件目录为 Capgo 插件目录中的产品工作流程 Capacitor 由 Capgo 提供为 Capacitor 的实现细节在 Capgo 插件中添加或更新插件为 __CAPGO_KEEP_0__ 的实现细节在添加或更新插件中 Ionic 企业插件替代品为 Ionic 企业插件替代品中的产品工作流程, 和 Capgo 本机构建为 Capgo 本机构建中的产品工作流程