html sheet element

Élément de feuille HTML

Élément personnalisé HTML pour créer des feuilles. Affiché comme une feuille inférieure sur mobile et une feuille centrée sur le bureau.

Caractéristiques

• Il y a une poignée en haut de la feuille qui peut être utilisée pour ouvrir ou fermer la feuille
• La feuille peut être fermée à l'aide d'un bouton dans l'en-tête de la feuille, à l'aide de la touche Esc ou en cliquant à l'extérieur de la feuille inférieure
  • Ce comportement est configurable. Vous pouvez désactiver l' Esc ou le clic à l'extérieur de la feuille lorsque vous le souhaitez.
• L'API est similaire à celle de l'élément <dialog>
  • Prend en charge les formulaires à l'intérieur
  • Utilise des noms de méthodes familières et les mêmes noms d'événements
• Il existe de nombreuses options de personnalisation

Installation

Vous pouvez installer cette bibliothèque à partir du registre NPM:

npm install @ivteplo/html-sheet-element

Ou vous pouvez l'importer dynamiquement à partir d'un CDN:

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

Usage

Avant de pouvoir utiliser l'élément de votre HTML, vous devez spécifier un nom de balise pour celui-ci à l'aide de JavaScript:

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

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

Ensuite, vous pouvez utiliser la balise dans votre HTML:

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

Pour ouvrir une feuille, appelez la méthode showModal de l'élément:

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

Documentation API

Vous pouvez trouver la documentation de l'API ici.

Développement

Condition préalable

Vous devez avoir git, node.js, deno et tout navigateur installé.

Installation

1. Ouvrez votre terminal

2. Cloner ce référentiel

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

3. Naviguer dans le répertoire cloné

    cd html-sheet-element

4. Installer des dépendances

   npm install

5. Démarrer le serveur de développement

   npm run dev

6. Construisez la bibliothèque

   npm run build

7. Construisez la documentation de l'API

   npm run docs:api

8. Bonne hacking?