หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

องค์ประกอบแผ่น 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. แฮ็คมีความสุข?

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด