html sheet element

Elemento da folha HTML

Elemento personalizado HTML para criar folhas. Exibido como uma folha inferior no celular e uma folha centrada na área de trabalho.

Características

• Há uma alça na parte superior da folha que pode ser usada para abrir ou fechar a folha
• A folha pode ser fechada usando um botão no cabeçalho da folha, usando a tecla Esc ou clicando fora da folha inferior
  • Esse comportamento é configurável. Você pode desligar o Esc ou clicar fora da folha quando quiser.
• API é semelhante ao <dialog> elemento
  • Suporta formas dentro dele
  • Usa nomes de métodos familiares e os mesmos nomes de eventos
• Existem muitas opções de personalização

Instalação

Você pode instalar esta biblioteca no registro da NPM:

npm install @ivteplo/html-sheet-element

Ou você pode importá -lo dinamicamente de um CDN:

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

Uso

Antes de poder usar o elemento em seu HTML, você precisa especificar um nome de tag para ele usando JavaScript:

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

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

Então você pode usar a tag em seu html:

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

Para abrir uma folha, ligue para o método showModal do elemento:

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

Documentação da API

Você pode encontrar documentação da API aqui.

Desenvolvimento

Pré -requisitos

Você precisa ter git, node.js, deno e qualquer navegador instalado.

Configurar

1. Abra seu terminal

2. Clone este repositório

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

3. Navegue no diretório clonado

    cd html-sheet-element

4. Instalar dependências

   npm install

5. Inicie o servidor de desenvolvimento

   npm run dev

6. Construa a biblioteca

   npm run build

7. Construa a documentação da API

   npm run docs:api

8. Hacking feliz?