@capgo/capacitor-表格

无框架底部弹出框、抽屉、对话框和覆盖层，专为Capacitor WebView 设计。

开始使用 GitHub

框架无关

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

Capacitor 准备就绪

尊严地处理安全区域、键盘移动、原生边缘手势和 WebView 主题颜色暗化。

每种表格形状

组合底部表格、侧边抽屉、顶部表格、居中的对话框、通知、分离的表格、卡片、页面和光箱。

现代 CSS

作者使用 em, rem, 视口单位 calc(), 和 CSS 变量 em 基于。

平台支持

平台	支持	注意
iOS	Web层	自定义元素
Android	Web层	Android WebView内的自定义元素
Web	是	同构的Capacitor web构建

何时使用

@capgo/capacitor-sheets 用于Capacitor应用程序的标题

用于__CAPGO_KEEP_0__应用程序的标题

用于__CAPGO_KEEP_0__应用程序的标题
用于__CAPGO_KEEP_0__应用程序的标题
居中对话框、轻盒、卡片和toast样式覆盖层
始终显示的覆盖层，保持应用程序后面的交互
全屏覆盖层，边缘进入
由覆盖层进度驱动的堆栈、深度和抖动效果
滚动辅助，显示进度和距离值
Capacitor-安全布局，适用于凹槽、主屏幕指示器、Android切口和软件键盘

用例覆盖

用例	Capgo 表格模式
长表格	`cap-sheet` 具有自然内容滚动或 `cap-scroll`
带有停靠点的表格	`detents="18em 32em"` 加 `stepTo()` 或一个步骤触发器
侧边栏	`content-placement="left"` 或 `content-placement="right"`
底部弹出窗口	context `content-placement="bottom"`
底部表格	`native-focus-scroll-prevention` 默认值
弹出窗口	`inert-outside="false"`, `focus-trap="false"`弹出窗口，且不支持外部点击关闭
独立弹出窗口	`cap-sheet-special-wrapper` 自定义边距和圆角
从底部弹出	底部弹出窗口内容全屏
顶部弹出窗口	`content-placement="top"`
支持堆叠的弹出窗口	`cap-sheet-stack` 支持深度变量的弹出窗口
支持深度的弹出窗口	`cap-sheet-outlet` 支持进度驱动的弹出窗口变换
视差页面	`cap-sheet-outlet` 与 `cap-scroll` 进展
页面	全视图内容从边缘进入
光盘	`content-placement="center"` 带背景和媒体内容
持久性Sheet	`default-presented`, `swipe-dismissal="false"`和 `inert-outside="false"`
卡片	紧凑的中心Sheet内容

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 确保输入框始终在软件键盘上方可见。

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

演示和沙盒

支持的每种用例的动画 WebP 演示都在仓库 README 中提供。示例还可作为 StackBlitz 沙盒提供:

长表格	缓冲区

侧边栏	光箱

继续从 @capgo/capacitor-sheets

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