2.1.0 • Published 4 months ago
@ivteplo/html-sheet-element v2.1.0
HTML Sheet Element
HTML Custom Element for creating sheets. Displayed as a bottom sheet on mobile and a centered sheet on desktop.
Features
- There is a handle at the top of the sheet that can be used to open or close the sheet
- The sheet can be closed using a button in the sheet header, using the
Esc
key, or by clicking outside the bottom sheet- This behavior is configurable. You can turn off the
Esc
or the click outside the sheet when you want.
- This behavior is configurable. You can turn off the
- API is similar to the
<dialog>
element's- Supports forms inside of it
- Uses familiar method names and the same event names
- There are many customization options
Installation
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/html-sheet-element@1.0.0/build/index.js")
Usage
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()
API Documentation
You can find API documentation here.
Development
Prerequisites
You need to have Git, Node.js, Deno, and any browser installed.
Setup
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 :tada: