@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

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

每个sheet形状

构建底部弹出窗口、侧边栏、顶部弹出窗口、居中的对话框、toast、脱离的弹出窗口、卡片、页面和光盒。

现代 CSS

使用 em, rem,视口单位 calc(),和 CSS 变量来设置默认尺寸 em 基于。

何时使用它

@capgo/capacitor-sheets Capacitor

适用于需要高质量移动弹出窗口但不需要采用特定UI框架的应用程序。它以自定义元素的形式提供，因此核心包没有对React、Vue、Angular、Svelte或Solid的运行时依赖。

使用它时需要:
具有一个或多个凹点的底部弹出窗口
居中对话框、轻盒、卡片和toast样式覆盖
始终显示的sheet，保持应用程序后面的交互
从边缘进入的全屏覆盖
由sheet进度驱动的堆栈、深度和抖动效果
显示进度和距离值的滚动辅助
Capacitor-安全的布局，适用于凹槽、主屏幕指示器、Android切口和软件键盘

用例覆盖

用例	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"`__CAPGO_KEEP_0__
弹出窗口	`cap-sheet-special-wrapper` __CAPGO_KEEP_0__
自定义边距和圆角	从底部弹出
底部全屏弹出窗口	`content-placement="top"`
顶部弹出窗口	`cap-sheet-stack` 堆叠弹出窗口
带深度变量	`cap-sheet-outlet` 带深度
带进度驱动的变换	`cap-sheet-outlet` 与进度 `cap-scroll` 页面全视图内容从边缘进入
带背景和媒体内容的光盒	带有凹点的持久性剪贴板
和	`content-placement="center"` 卡片
紧凑的居中的剪贴板内容	`default-presented`, `swipe-dismissal="false"`核心__CAPGO_KEEP_0__ `inert-outside="false"`
标题为“核心__CAPGO_KEEP_0__”的部分	Core __CAPGO_KEEP_0__

Core API

<cap-sheet> __CAPGO_KEEP_0__布局模型
<cap-sheet-trigger> 控制显示状态、阻尼、位置、手势、可访问性和事件。
<cap-sheet-view> 声明显示、关闭、切换和阻尼步骤的动作。
<cap-sheet-backdrop> 将覆盖层定位并应用安全区域和键盘偏移。
<cap-sheet-content> 呈现一个与进度同步的背景。
<cap-sheet-handle> 呈现sheet表面。
<cap-sheet-stack> 提供拖动和键盘阻尼控制。
<cap-sheet-outlet> 协调堆叠的sheet。
<cap-scroll> 向页面、深度和抖动效果暴露sheet进度。 <cap-scroll-content> 暴露滚动进度和距离辅助函数。
setupSheet(element, options?) 从框架效果或生命周期钩子配置一个sheet。

Capacitor Layout Model

__CAPGO_KEEP_0__ 默认视图区域读取 env(safe-area-inset-*) 和 Capacitor-样式 --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 获得：

长板	Detents

侧边栏	光箱

从 @capgo/capacitor-sheets 继续

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