; } ``` ### 阴道 ```vue ``` ### 角质 ```ts import type { AfterViewInit, ElementRef, OnDestroy } from '@angular/core'; import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core'; import { setupSheet } from '@capgo/capacitor-sheets/angular'; import '@capgo/capacitor-sheets'; import { mountUsecaseGallery } from '../../../shared/usecase-gallery'; @Component({ selector: 'app-root', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `

`, }) export class AppComponent implements AfterViewInit, OnDestroy { @ViewChild('gallery', { static: true }) gallery?: ElementRef; private cleanup?: () => void; ngAfterViewInit(): void { if (this.gallery?.nativeElement) { this.cleanup = mountUsecaseGallery(this.gallery.nativeElement, { framework: 'Angular', setupSheet, }); } } ngOnDestroy(): void { this.cleanup?.(); } } ``` ### 丝绒 ```svelte

``` ### 固态 ```tsx import { onCleanup, onMount } from 'solid-js'; import { setupSheet } from '@capgo/capacitor-sheets/solid'; import '@capgo/capacitor-sheets'; import { mountUsecaseGallery } from '../../shared/usecase-gallery'; export function App() { let galleryEl!: HTMLDivElement; onMount(() => { const cleanup = mountUsecaseGallery(galleryEl, { framework: 'Solid', setupSheet, }); onCleanup(cleanup); }); return

; } ``` ## API 表面核心内容: - `cap-sheet`:状态,绕道,放置,手势,模式行为,生命周期事件. - `cap-sheet-trigger`:声明现出,辞退,脱口而出,并步入行动. - `cap-sheet-portal`: 用于叠加层的可选体门户. - `cap-sheet-view`:取景口覆盖主机. - `cap-sheet-backdrop`: 进步-连带模式背景. - `cap-sheet-content`:可访问表表面. - `cap-sheet-bleeding-background`: 四舍五入边缘工作表的背景扩展. - `cap-sheet-handle`:可拖动和键盘可访问的绕行手柄. - `cap-sheet-title` 财务报告和审定财务报表 `cap-sheet-description`:无障碍命名. - `cap-sheet-special-wrapper` 财务报告和审定财务报表 `cap-sheet-special-wrapper-content`:用于脱发工作表,卡片,灯盒的成分钩,以及自定义的页面布局. - `cap-sheet-stack`: 堆叠深度的组合工作表. - `cap-sheet-outlet`: 收到工作表进度变量和可选 `travelAnimation`。。。 . - `cap-scroll` 财务报告和审定财务报表 `cap-scroll-content`: 滚动进度帮助. - `cap-fixed`, (中文(简体) ), `cap-island`, (中文(简体) ), `cap-external-overlay`, (中文(简体) ), `cap-visually-hidden`, (中文(简体) ), `cap-auto-focus-target`: 构成和无障碍辅助人员. 重要事件: - `cap-sheet-presented-change` - `cap-sheet-active-detent-change` - `cap-sheet-travel` - `cap-sheet-travel-status-change` - `cap-sheet-travel-range-change` - `cap-sheet-drag-start` - `cap-sheet-drag-end` - `cap-scroll` 强制性方法 `cap-sheet`数字 : ```ts const sheet = document.querySelector('cap-sheet')!; await sheet.present(); await sheet.dismiss(); await sheet.toggle(); await sheet.stepTo(2); await sheet.step('down'); ``` 公共类型Script API与TSDoc一起被记录在 `src/core/types.ts`,在 `npm run build`。。。 . ## 发展 ```bash npm install npm run render:demos npm run build npm run dev:examples -- react vue svelte angular solid ``` 在 Capgo 单曲中,使用 `bun` 财务报告和审定财务报表 `bunx` 用于本地命令. ## 常见问题 ### @capgo/capacitor-sheets 是什么？为 Capacitor apps 编写的框架不可知可刷页、抽屉、对话框和滚动原始文件 ### 如何安装 @capgo/capacitor-sheets？在项目目录运行 npm install @capgo/capacitor-sheets，或使用 pnpm add / yarn add / bun add。 ### @capgo/capacitor-sheets 支持 TypeScript 吗？支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @capgo/capacitor-sheets 支持 ESM 还是 CommonJS？同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @capgo/capacitor-sheets 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=22\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @capgo/capacitor-sheets 可以商用吗？ @capgo/capacitor-sheets 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @capgo/capacitor-sheets 的下载量有多少？根据 npm 官方下载统计，@capgo/capacitor-sheets 在 2026/10/09 – 2026/11/07 这 30 天内被下载 44,586 次，日均约 1,486 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @capgo/capacitor-sheets 还在维护吗？最新版本 8\.2\.7 发布于 2026/11/09（今天）；至今共发布 25 个版本，其中过去 12 个月发布了 25 个；首次发布于 2026/05/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

长工作表	带有减号的工作表
边栏	底页
带键盘的工作表	土司
已删除的工作表	从底端的页面
顶层工作表	有堆叠的工作表
带有深度的工作表	参数页
页次	灯盒
带有阻断的持久工作表	纸牌