跳过内容
Capgo - 实时更新 Capacitor 应用 Capgo

@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 主题颜色减淡

每个表格形状

组合底部表格、侧边抽屉、顶部表格、居中的对话框、通知、分离的表格、卡片、页面和光盒

现代 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模式
长Sheetcap-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"和无外部点击关闭
__CAPGO_KEEP_0__cap-sheet-special-wrapper __CAPGO_KEEP_1__
__CAPGO_KEEP_2____CAPGO_KEEP_3__
__CAPGO_KEEP_4__content-placement="top"
__CAPGO_KEEP_5__cap-sheet-stack __CAPGO_KEEP_6__
__CAPGO_KEEP_7__cap-sheet-outlet __CAPGO_KEEP_8__
__CAPGO_KEEP_9__cap-sheet-outlet __CAPGO_KEEP_10__ cap-scroll __CAPGO_KEEP_11__
主页全屏内容从边缘进入
光箱content-placement="center" 带背景和媒体内容的光箱
持久的带凹槽default-presented, swipe-dismissal="false", 和 inert-outside="false"
卡片紧凑的居中光箱内容

Core API

Section titled “Core API”
  • <cap-sheet> 控制呈现状态、凹槽、位置、手势、可访问性和事件。
  • <cap-sheet-trigger> 声明了present、dismiss、toggle和detent-step动作。
  • <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 布局模型

标题：Capacitor 布局模型

默认弹出窗口视图 env(safe-area-inset-*) 和 Capacitor-style --safe-area-inset-* fallback 变量， 然后应用选定的边作为覆盖物周围的填充。 safe-area="auto" 保护所有边； 使用 safe-area="bottom left right" 或 safe-area="none" 当一个用例需要不同的行为时。

键盘处理默认启用。 该表单监听 visualViewport resize 和 scroll 事件， 将键盘偏移添加到视口中， 焦点控制以 preventScroll 使输入保持在软件键盘上方可见。

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

演示和沙盒

标题为“演示和沙盒”

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

长页缓冲
使用@capgo/capacitor-sheets的动画长页示例使用@capgo/capacitor-sheets的缓冲动画页示例
侧边栏光箱
使用@capgo/capacitor-sheets的动画侧边栏示例使用@capgo/capacitor-sheets的动画光箱示例

从@capgo/capacitor-sheets继续

标题：从@capgo/capacitor-sheets继续

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