@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 ready

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

每种弹出窗口的形状

组合底部弹出窗口、侧边抽屉、顶部弹出窗口、居中的对话框、提示、脱离的弹出窗口、卡片、页面和光盒。

现代 CSS

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

何时使用

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

使用它时需要：

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

用例覆盖

用例	Capgo Sheets模式
长Sheet	`cap-sheet` 自然滚动或 `cap-scroll`
带有定位的弹出窗口	`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` __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"`
卡片	紧凑的居中卡片内容

Core API

<cap-sheet> 控制呈现状态、分段、位置、手势、可访问性和事件。
<cap-sheet-trigger> 声明了present、dismiss、toggle和分段步骤的动作。
<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" 当一个用例需要不同的行为时。

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

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

演示和沙盒

支持的每个用例都在仓库 README 中包含了动画 WebP 演示。示例也可作为 StackBlitz 沙盒获取：

长页	Detents

侧边栏	光箱

从 @capgo/capacitor-sheets 中继续

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