@capgo/capacitor-表格

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, 视口单位 calc(), 和 CSS 变量，while 默认尺寸保持 em 基于。

何时使用它

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

使用它时需要:

底部弹出窗口，具有一个或多个凹点
左侧或右侧边栏和顶部弹出窗口
居中的对话框、光箱、卡片和类似 Toast 的覆盖层
持久的工作表，保持应用程序后面的它们互动
全屏遮罩层，进入从边缘
由工作表进度驱动的堆栈、深度和抖动效果
显示进度和距离值的滚动辅助
Capacitor-安全布局，适用于凹槽、主屏幕指示器、Android切口和软件键盘

用例覆盖

用例	Capgo工作表模式
长表单	`cap-sheet` 带自然内容滚动或 `cap-scroll`
带 Detent 的表单	`detents="18em 32em"` 加 `stepTo()` 或一个步骤触发器
侧边栏	`content-placement="left"` 或 `content-placement="right"`
底部弹出窗口	默认 `content-placement="bottom"`
带键盘的表单	`native-focus-scroll-prevention` 和视觉视口偏移处理
提示	`inert-outside="false"`, `focus-trap="false"`和无外部点击关闭
独立Sheet	`cap-sheet-special-wrapper` 加自定义边距和圆角
从底部弹出	全屏底部Sheet内容
顶部Sheet	`content-placement="top"`
带层级变量的Sheet	`cap-sheet-stack` 带深度变量的Sheet
带进度驱动变换的Sheet	`cap-sheet-outlet` 抖动页面
带	`cap-sheet-outlet` with `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.

演示和沙盒

Animated WebP 的示例在仓库 README 中提供，涵盖所有支持的场景。示例也可在 StackBlitz playground 中找到：

长表格	缩进

侧边栏	弹出窗口

从 @capgo/capacitor-sheets 中继续

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