@ capgo/ 电容表

🤖 建筑与AI编码代理? 安装 Capgo 技能 所以克劳德代码,代码,光标,副驾驶,或双子座CLI知道如何安装和使用 @capgo/capacitor-sheets 在您的电容应用程序中: npx skills add Cap-go/capgo-skills。然后问你的经纪人: 添加@capgo/电容表到我的电容软件上并把它接通 代理设置指南 • 妇女 主机磁共振

框架不可知表,抽屉,对话框,卷轴帮助器,并覆盖原始的 Capacitor apps.

这个包由公共的"丝绸"特征表面所启发,但它不是围绕"丝绸"的包装,也不包括"丝绸"源代码. 它使用平台web API和自定义元素,因此同种原始人在React,Vue,Angular,Svelte,Solid,或Plain TypeScript工作.

使用大小写Demos

每个用例都有自己的动画WebP演示. 这些与公共的"丝绸"风格的样板相匹配:长被单,分出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出.

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

在线游戏场

每个框架示例打开相同的16个用例相册,因此StackBlitz对于测试整个表面而不是单一的烟雾测试表是有用的:

• 反应操场
• 游乐场
• 角操场
• 斯维尔特游乐场
• 固体操场

移动测试App

Repo包括一个Capacitor App,将React画廊包裹起来,这样床单就可以在真实的iOS和Android设备上进行测试. 应用代号是 app.capgo.capacitor.sheets。 。 。 . Capacitor 8需要22号节点或更新的本地移动指令.

npm run build:mobile
npx cap run ios
npx cap run android

Capgo OTA 上传使用相同的已建相册 :

npx @capgo/cli@latest app add app.capgo.capacitor.sheets --name "Capgo Sheets"
npm run deploy:capgo:dev
npm run deploy:capgo

在第一次上传前创建 Capgo 应用程序一次 。 GitHub Actions还包括Capgo部署工作流程. 标记构建部署到 production,用于 dev,手动运行可以选择任一信道。 设定 CAPGO_TOKEN 在运行前隐藏在存储器中.

特征

• 框架不可知论 自定义元素:核心软件包中没有反应运行时间依赖.
• 底页、边抽屉、上页和居中对话框 结束 content-placement。 。 。 .
• 抗辩 与 em, (中文(简体) ), rem, (中文(简体) ), dvh, (中文(简体) ), lvh, (中文(简体) ), svh, (中文(简体) ), calc(),以及其它现代CSS长度.
• 触摸、指针、车轮和履带手势 包括解职、过度射击和陷阱控制.
• 模式行为:焦点陷阱,焦点还原,逃出解职,外出点击解职,外出内容无效.
• 电容安全区域默认值 使用 env(safe-area-inset-*) 加电容系统列 --safe-area-inset-* 堕倒.
• 键盘意识布局 使用 visualViewport 调整大小/滚动事件和 preventScroll 焦点行为.
• 重叠兼容性 结束 cap-island 财务报告和审定财务报表 cap-external-overlay。 。 。 .
• 堆放和输出动画钩 深度效应和协调的页面运动.
• 滚动原始人 与进步/远程帮助.
• 主题颜色暗淡 用于 Capacitor Web 浏览器和移动浏览器.
• 现代 CSS 默认值 作者为 em- 基础尺寸,没有设计系统锁定.

使用大小写覆盖

安装

您可以使用我们的 AI 辅助设置安装插件 。 使用以下命令将 Capgo 技能添加到您的 AI 工具 :

npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins

然后使用下列提示:

Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-sheets` plugin in my project.

如果您更喜欢手动设置,请通过运行以下命令来安装插件,并遵循下面的平台特定指令:

npm install @capgo/capacitor-sheets
npx cap sync

电容设置

添加 viewport-fit=cover iOS将安全区域内设于CSS:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

安全区域默认启用 。 单位 auto,边缘相接的平板保护相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相接相接相接相接相相相相相相. cap-sheet-view 读取标准 env(safe-area-inset-*) 值和电容SystemBars倒置变量,例如 --safe-area-inset-bottom,然后将其应用到工作表视图端 em-基于布局 您可以选择退出或选择每个工作表的边缘 :

<cap-sheet safe-area="none"></cap-sheet>
<cap-sheet safe-area="bottom left right"></cap-sheet>

脱落床单可以使用Gorhom风格的容器间距,而无需CSS边距. 使用 detached 以圆圆相交, top-inset 编号 : bottom-inset 编号 : left-inset 编号 : right-inset 用于一次性抵销,或 containerOffset 由框架设置辅助器进行每笔冲抵:

<cap-sheet detached bottom-inset="1rem" detents="18em" content-placement="bottom"></cap-sheet>

setupSheet(sheet, {
  detached: true,
  bottomInset: '1rem',
  containerOffset: { left: '1rem', right: '1rem' },
});

对于具有覆盖状态/系统条的 Capacitor apps, 保留平台插件负责曝光正确的设置 :

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    StatusBar: {
      overlaysWebView: true,
    },
    Keyboard: {
      resize: 'body',
      resizeOnFullScreen: true,
    },
    SystemBars: {
      insetsHandling: 'css',
    },
  },
};

export default config;

键盘处理默认通过 native-focus-scroll-prevention它会听 visualViewport 更改,使焦点控件在键盘上方可见,并在键盘关闭时恢复工作表偏移.

香草用法

<script type="module">
  import '@capgo/capacitor-sheets';
</script>

<cap-sheet-trigger for="booking-sheet" action="present">Open</cap-sheet-trigger>

<cap-sheet id="booking-sheet" detents="18em 32em" content-placement="bottom">
  <cap-sheet-portal>
    <cap-sheet-view>
      <cap-sheet-backdrop></cap-sheet-backdrop>
      <cap-sheet-content class="sheet">
        <cap-sheet-bleeding-background></cap-sheet-bleeding-background>
        <cap-sheet-handle></cap-sheet-handle>
        <cap-sheet-title>Evening route</cap-sheet-title>
        <cap-sheet-description>Choose a route and confirm pickup.</cap-sheet-description>
        <cap-sheet-trigger action="dismiss">Done</cap-sheet-trigger>
      </cap-sheet-content>
    </cap-sheet-view>
  </cap-sheet-portal>
</cap-sheet>

.sheet {
  width: min(100%, 34em);
  padding: 0 1.25em 1.25em;
}

五个框架实例

完整的可循环实例存在于:

• examples/react-app
• examples/vue-app
• examples/angular-app
• examples/svelte-app
• examples/solid-app

所有5个应用程序都挂载共享的使用大小写 examples/shared/usecase-gallery.ts。该画廊覆盖长页、有底盘的页、有底盘的页、有键盘的页、土司的页、有底盘的页、有顶盘的页、有底盘的页、有底盘的页、有底盘的页、有平板的页、有灯盒的页、有底盘的页和卡片.

反应

import { setupSheet } from '@capgo/capacitor-sheets/react';
import { useEffect, useRef } from 'react';
import '@capgo/capacitor-sheets';
import { mountUsecaseGallery } from '../../shared/usecase-gallery';

export function App() {
  const galleryRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!galleryRef.current) return;
    return mountUsecaseGallery(galleryRef.current, {
      framework: 'React',
      setupSheet,
    });
  }, []);

  return <div ref={galleryRef} />;
}

阴道

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { setupSheet } from '@capgo/capacitor-sheets/vue';
import '@capgo/capacitor-sheets';
import { mountUsecaseGallery } from '../../shared/usecase-gallery';

const galleryRef = ref<HTMLElement | null>(null);
let cleanup: (() => void) | undefined;

onMounted(() => {
  if (galleryRef.value) {
    cleanup = mountUsecaseGallery(galleryRef.value, {
      framework: 'Vue',
      setupSheet,
    });
  }
});

onUnmounted(() => cleanup?.());
</script>

<template>
  <div ref="galleryRef"></div>
</template>

角质

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: `<div #gallery></div>`,
})
export class AppComponent implements AfterViewInit, OnDestroy {
  @ViewChild('gallery', { static: true }) gallery?: ElementRef<HTMLElement>;
  private cleanup?: () => void;

  ngAfterViewInit(): void {
    if (this.gallery?.nativeElement) {
      this.cleanup = mountUsecaseGallery(this.gallery.nativeElement, {
        framework: 'Angular',
        setupSheet,
      });
    }
  }

  ngOnDestroy(): void {
    this.cleanup?.();
  }
}

丝绒

<script lang="ts">
  import { onMount } from 'svelte'
  import { setupSheet } from '@capgo/capacitor-sheets/svelte'
  import '@capgo/capacitor-sheets'
  import { mountUsecaseGallery } from '../../shared/usecase-gallery'

  let gallery: HTMLDivElement

  onMount(() =>
    mountUsecaseGallery(gallery, {
      framework: 'Svelte',
      setupSheet,
    }),
  )
</script>

<div bind:this={gallery}></div>

固态

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 <div ref={galleryEl} />;
}

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数字 :

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。 。 。 .

发展

npm install
npm run render:demos
npm run build
npm run dev:examples -- react vue svelte angular solid

在 Capgo 单曲中,使用 bun 财务报告和审定财务报表 bunx 用于本地命令.