@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 已准备好

尊严地处理安全区域、键盘移动、原生边缘手势和 WebView 主题颜色减淡，从 Web层。

每个表格形状

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

现代CSS

使用 em, rem、视口单位、 calc()和CSS变量，同时默认的尺寸保持 em 。

何时使用

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

使用它时需要:

底部弹出窗口一个或多个凹点
左侧或右侧边栏和顶部弹出窗口
居中对话框、轻盒、卡片和类似toast的覆盖层
始终显示的覆盖层，保持应用程序后面的交互性
全屏覆盖层，边缘进入
由覆盖层进度驱动的堆栈、深度和抖动效果
显示进度和距离值的滚动辅助
Capacitor-safe layout for notches, home indicators, Android cutouts, and software keyboards

用例覆盖

用例	Capgo 表格模式
长表格	`cap-sheet` 自然内容滚动或 `cap-scroll`
带有阻塞的表格	`detents="18em 32em"` 加 `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` 加上自定义边距和圆角
从底部弹出	底部全屏弹出内容
顶部Sheet	`content-placement="top"`
支持堆叠的Sheet	`cap-sheet-stack` 带有深度变量的
支持深度的Sheet	`cap-sheet-outlet` 带有进度驱动的变换
抖动页面	`cap-sheet-outlet` 与 `cap-scroll` 进展
页面	全视图内容从边缘进入
光盘	`content-placement="center"` 带背景和媒体内容的光盘
持久的Sheet with Detent	`default-presented`, `swipe-dismissal="false"`, 和 `inert-outside="false"`
卡片	紧凑的中心Sheet内容

核心 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 以便输入保持在软件键盘上方可见。

该包在 web 层运行。它不渲染原生 UIKit 或 Android 底部表格，因此您的应用程序始终保持完全的样式控制，同时仍然尊严 WebView 约束在 Capacitor 中

演示和沙盒

WebP 动画演示在 README 中包含了所有支持的用例。示例也可以在 StackBlitz 中找到:

长表格	缓冲区

侧边栏	光箱

从 @capgo/capacitor-sheets 中继续

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