html sheet element

Elemento de hoja HTML

Elemento personalizado HTML para crear hojas. Se muestra como una hoja inferior en el móvil y una hoja centrada en el escritorio.

Características

• Hay un mango en la parte superior de la hoja que se puede usar para abrir o cerrar la hoja.
• La hoja se puede cerrar con un botón en el encabezado de la hoja, usando la tecla Esc o haciendo clic fuera de la hoja inferior
  • Este comportamiento es configurable. Puede apagar el Esc o hacer clic fuera de la hoja cuando lo desee.
• La API es similar a los elementos <dialog>
  • Admite formularios dentro de él
  • Utiliza nombres de métodos familiares y los mismos nombres de eventos
• Hay muchas opciones de personalización

Instalación

Puede instalar esta biblioteca desde el registro de NPM:

npm install @ivteplo/html-sheet-element

O puede importarlo dinámicamente desde un CDN:

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

Uso

Antes de poder usar el elemento en su HTML, debe especificar un nombre de etiqueta con JavaScript:

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

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

Entonces puede usar la etiqueta en su HTML:

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

Para abrir una hoja, llame al método showModal del elemento:

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

Documentación de API

Puede encontrar documentación de API aquí.

Desarrollo

Requisitos previos

Debe tener Git, Node.js, Deno y cualquier navegador instalado.

Configuración

1. Abre tu terminal

2. Clon este repositorio

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

3. Navegar hacia el directorio clonado

    cd html-sheet-element

4. Instalar dependencias

   npm install

5. Iniciar el servidor de desarrollo

   npm run dev

6. Construir la biblioteca

   npm run build

7. Construir la documentación de la API

   npm run docs:api

8. ¿Feliz piratería?