html sheet element

HTML -Blattelement

HTML Custom Element zum Erstellen von Blättern. Als unteres Blatt auf dem Handy und als zentriertes Blatt auf dem Desktop angezeigt.

Merkmale

• Am oberen Ende des Blattes befindet sich ein Griff, mit dem das Blatt geöffnet oder geschlossen werden kann
• Das Blatt kann mit einer Taste im Blattheader, mit der Esc -Taste oder durch Klicken über das untere Blatt geschlossen werden
  • Dieses Verhalten ist konfigurierbar. Sie können den Esc oder den Klick außerhalb des Blattes ausschalten, wenn Sie möchten.
• API ähnelt dem <dialog> Elements des Elements
  • Unterstützt Formen darin darin
  • Verwendet vertraute Methodamen und die gleichen Ereignisnamen
• Es gibt viele Anpassungsoptionen

Installation

Sie können diese Bibliothek aus der NPM -Registrierung installieren:

npm install @ivteplo/html-sheet-element

Oder Sie können es dynamisch von einem CDN importieren:

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

Verwendung

Bevor Sie das Element in Ihrem HTML verwenden können, müssen Sie einen Tagsnamen mit JavaScript angeben:

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

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

Dann können Sie das Tag in Ihrem HTML verwenden:

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

Um ein Blatt zu öffnen, rufen Sie die showModal -Methode des Elements an:

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

API -Dokumentation

Hier finden Sie eine API -Dokumentation.

Entwicklung

Voraussetzungen

Sie müssen Git, Node.js, Deno und jeden Browser installiert haben.

Aufstellen

1. Öffnen Sie Ihr Terminal

2. Klonen Sie dieses Repository

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

3. Navigieren Sie in das geklonte Verzeichnis

    cd html-sheet-element

4. Abhängigkeiten installieren

   npm install

5. Starten Sie den Entwicklungsserver

   npm run dev

6. Bauen Sie die Bibliothek auf

   npm run build

7. Erstellen Sie die API -Dokumentation

   npm run docs:api

8. Frohe Hacking?