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. ハッピーハッキング？