About html-sheet-element

# 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. - 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: ```bash npm install @ivteplo/html-sheet-element ``` Or you can import it dynamically from a CDN: ```javascript const { SheetElement } = await import("https://unpkg.com/@ivteplo/[email protected]/build/index.js") ``` ## Usage Before being able to use the element in your HTML, you need to specif ...

i

Published by

ivteplo

Visit View Profile

README.md

View on GitHub

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.
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/[email protected]/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`
SheetElement.defineAs("ui-sheet")

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("ui-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:

html-sheet-element