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. 행복한 해킹?