html sheet element

Elemen Sheet HTML

Elemen khusus HTML untuk membuat lembaran. Ditampilkan sebagai lembar bawah di ponsel dan lembar terpusat di desktop.

Fitur

• Ada pegangan di bagian atas lembaran yang dapat digunakan untuk membuka atau menutup lembar
• Lembar dapat ditutup menggunakan tombol di header lembar, menggunakan tombol Esc , atau dengan mengklik di luar lembar bawah
  • Perilaku ini dapat dikonfigurasi. Anda dapat mematikan Esc atau klik di luar lembar yang Anda inginkan.
• API mirip dengan elemen <dialog>
  • Mendukung formulir di dalamnya
  • Menggunakan nama metode yang akrab dan nama acara yang sama
• Ada banyak opsi penyesuaian

Instalasi

Anda dapat menginstal perpustakaan ini dari registri NPM:

npm install @ivteplo/html-sheet-element

Atau Anda dapat mengimpornya secara dinamis dari CDN:

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

Penggunaan

Sebelum dapat menggunakan elemen di HTML Anda, Anda perlu menentukan nama tag untuk itu menggunakan JavaScript:

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

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

Kemudian Anda dapat menggunakan tag di HTML Anda:

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

Untuk membuka lembar, panggil metode showModal elemen:

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

Dokumentasi API

Anda dapat menemukan dokumentasi API di sini.

Perkembangan

Prasyarat

Anda perlu memiliki git, node.js, deno, dan browser apa pun yang diinstal.

Pengaturan

1. Buka terminal Anda

2. Kloning repositori ini

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

3. Menavigasi ke direktori yang dikloning

    cd html-sheet-element

4. Instal dependensi

   npm install

5. Mulai server pengembangan

   npm run dev

6. Bangun Perpustakaan

   npm run build

7. Bangun dokumentasi API

   npm run docs:api

8. Happy Hacking?