html sheet element

HTML表元素

HTML自定义元素用于创建床单。显示在移动设备上的底部纸和桌面上的集中纸。

特征

• 纸的顶部有一个手柄，可用于打开或关闭纸张
• 可以使用表标头中的按钮，使用Esc键或单击底部纸上的按钮，可以关闭表格
  • 此行为是可配置的。您可以在需要时关闭Esc或单击板外。
• API类似于<dialog>元素的
  • 支持其中的形式
  • 使用熟悉的方法名称和相同的事件名称
• 有许多自定义选项

安装

您可以从NPM注册表中安装此库：

npm install @ivteplo/html-sheet-element

或者，您可以从CDN动态导入它：

 const { SheetElement } = await import ( "https://unpkg.com/@ivteplo/[email protected]/build/index.js" ) 

用法

在能够在HTML中使用该元素之前，您需要使用JavaScript指定标签名称：

 import { SheetElement } from "@ivteplo/html-sheet-element"

// You can choose another tag name instead of `ui-sheet`
customElements . define ( "ui-sheet" , SheetElement )

然后，您可以在HTML中使用标签：

 < ui-sheet id =" sheet " >
  < p > Hello World! </ p >
</ ui-sheet >

要打开工作表，请调用元素的showModal方法：

 const sheet = document . querySelector ( "sheet" )
sheet . showModal ( ) 

API文档

您可以在此处找到API文档。

发展

先决条件

您需要安装Git，Node.js，DeNo和任何浏览器。

设置

1. 打开您的终端

2. 克隆这个存储库

   git clone https://github.com/ivteplo/html-sheet-element/

3. 导航到克隆目录

    cd html-sheet-element

4. 安装依赖项

   npm install

5. 启动开发服务器

   npm run dev

6. 构建库

   npm run build

7. 构建API文档

   npm run docs:api

8. 骇客开心？