@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的运行时依赖。

使用它时需要：

底部单个或多个凹点的sheet
左侧或右侧的侧边栏和顶部sheet
居中的对话框、光箱、卡片和toast样式的覆盖层
始终显示的覆盖层，使应用程序后面的内容保持交互
全屏遮罩从边缘进入
由sheet进度驱动的堆栈、深度和抛物线效果
暴露进度和距离值的滚动辅助
Capacitor-安全布局，适用于凹槽、主屏指示器、Android切口和软件键盘

用例覆盖

用例	Capgo Sheets模式
长Sheet	`cap-sheet` 自然滚动或 `cap-scroll`
带有 Detent 的表格	`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` __CAPGO_KEEP_0__
从底部弹出	__CAPGO_KEEP_0__
顶部Sheet	`content-placement="top"`
具有堆叠效果的Sheet	`cap-sheet-stack` 具有深度变量的Sheet
具有深度的Sheet	`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> 声明了present、dismiss、toggle和detent-step动作。
<cap-sheet-view> __CAPGO_KEEP_0__布局模型
<cap-sheet-backdrop> __CAPGO_KEEP_0__布局模型
<cap-sheet-content> __CAPGO_KEEP_0__布局模型
<cap-sheet-handle> __CAPGO_KEEP_0__布局模型
<cap-sheet-stack> __CAPGO_KEEP_0__布局模型
<cap-sheet-outlet> __CAPGO_KEEP_0__布局模型
<cap-scroll> 并 <cap-scroll-content> 暴露滚动进度和距离辅助器。
setupSheet(element, options?) 配置一个sheet从框架效果或生命周期钩子。

Capacitor布局模型

默认的sheet视图区域读取 env(safe-area-inset-*) 和 Capacitor-style --safe-area-inset-* fallback 变量，然后应用选定的边作为覆盖层的填充。 safe-area="auto" 保护所有边; 使用 safe-area="bottom left right" 或 safe-area="none" 当一个用例需要不同的行为时。

键盘处理默认启用。该sheet监听 visualViewport resize 和 scroll 事件，添加一个键盘偏移量到视口，并将 preventScroll 以便输入保持在软件键盘上方可见。

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

演示和沙盒

支持的每个用例都在仓库 README 中包含 Animated WebP 演示。例子也可作为 StackBlitz playgrounds 获得：

长页	缓冲

侧边栏	光箱

从 @capgo/capacitor-sheets 中继续

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