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. 駭客開心？