html sheet element

HTML -листовой элемент

HTML пользовательский элемент для создания листов. Отображается как нижний лист на мобильном телефоне и центрированный лист на рабочем столе.

Функции

• В верхней части листа есть ручка, которую можно использовать для открытия или закрытия листа
• Лист можно закрыть, используя кнопку в заголовке листа, используя клавишу Esc или нажав за пределы нижнего листа
  • Такое поведение настраивается. Вы можете выключить Esc или щелчок вне листа, когда хотите.
• API похож на элемент <dialog>
  • Поддерживает формы внутри него
  • Использует знакомые имена методов и те же имена событий
• Есть много вариантов настройки

Установка

Вы можете установить эту библиотеку из реестра NPM:

npm install @ivteplo/html-sheet-element

Или вы можете импортировать его динамически из CDN:

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

Использование

Прежде чем иметь возможность использовать элемент в вашем HTML, вам необходимо указать имя тега для него, используя JavaScript:

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

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

Затем вы можете использовать тег в своем HTML:

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

Чтобы открыть лист, вызовите метод showModal элемента:

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

Документация API

Вы можете найти документацию API здесь.

Разработка

Предварительные условия

Вы должны установить git, node.js, deno и любой браузер.

Настраивать

1. Откройте свой терминал

2. Клонировать это хранилище

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

3. Перейдите в клонированный каталог

    cd html-sheet-element

4. Установить зависимости

   npm install

5. Запустите сервер разработки

   npm run dev

6. Построить библиотеку

   npm run build

7. Создайте документацию API

   npm run docs:api

8. Счастливого взлома?