@capgo/capacitor-表格

构建丝绸样式的表单、抽屉、对话框、通知、光盘、卡片和页面覆盖层，适用于任何 Capacitor 前端。

开始使用 GitHub

框架无关

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

Capacitor

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

每个sheet形状

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

现代CSS

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

何时使用它

@capgo/capacitor-sheets 适用于需要高质量移动浮层但不需要采用特定UI框架的Capacitor应用。它以自定义元素的形式发布，因此核心包没有对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"`
底部弹出窗口	默认 `content-placement="bottom"`
带有键盘和视觉视口偏移处理的弹出窗口	`native-focus-scroll-prevention` 提示
, 不支持点击外部区域关闭	`inert-outside="false"`, `focus-trap="false"`独立弹出窗口
加上自定义边距和圆角	`cap-sheet-special-wrapper` 从底部弹出窗口
全屏底部弹出窗口内容	顶部弹出窗口
appflow或	`content-placement="top"`
堆叠表格	`cap-sheet-stack` 带深度变量
深度表格	`cap-sheet-outlet` 带进度驱动变换
视差页面	`cap-sheet-outlet` 带 `cap-scroll` 进度
页面	全视口内容从边缘进入
光箱	`content-placement="center"` 带背景和媒体内容
持久表格	`default-presented`, `swipe-dismissal="false"`，和 `inert-outside="false"`
卡片	紧凑型居中弹窗内容

核心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.

标题：演示和沙盒

长表单

凹陷	Detents

Sidebar	幻灯片

继续从 @capgo/capacitor-sheets

如果您正在使用 @capgo/capacitor-表格 为native插件工作制定计划，连接它 Capgo插件目录在Capgo插件目录中，了解产品工作流程 Capacitor插件由Capgo 在Capacitor插件由Capgo中，了解实现细节添加或更新插件在添加或更新插件中，了解实现细节 Ionic企业插件替代品在Ionic企业插件替代品中，了解产品工作流程，并 Capgo原生构建在Capgo原生构建中，了解产品工作流程