HTML Custom Element for Creating Sheets
APACHE-2.0 License
HTML Custom Element for creating sheets. Displayed as a bottom sheet on mobile and a centered sheet on desktop.
Esc
key, or by clicking outside the bottom sheet
Esc
or the click outside the sheet when you want.<dialog>
element's
You can install this library from the npm registry:
npm install @ivteplo/html-sheet-element
Or you can import it dynamically from a CDN:
const { SheetElement } = await import("https://unpkg.com/@ivteplo/[email protected]/build/index.js")
Before being able to use the element in your HTML, you need to specify a tag name for it using JavaScript:
import { SheetElement } from "@ivteplo/html-sheet-element"
// You can choose another tag name instead of `ui-sheet`
customElements.define("ui-sheet", SheetElement)
Then you can use the tag in your HTML:
<ui-sheet id="sheet">
<p>Hello World!</p>
</ui-sheet>
To open a sheet, call the element's showModal
method:
const sheet = document.querySelector("sheet")
sheet.showModal()
You can find API documentation here.
You need to have Git, Node.js, Deno, and any browser installed.
Open your terminal
Clone this repository
git clone https://github.com/ivteplo/html-sheet-element/
Navigate into the cloned directory
cd html-sheet-element
Install dependencies
npm install
Start the development server
npm run dev
Build the library
npm run build
Build the API documentation
npm run docs:api
Happy hacking 🎉