Popover API อยู่ในเกณฑ์พื้นฐาน

Una Kravets

การเปลี่ยนแปลงกำลังจะเริ่มขึ้นแล้ว หนึ่งในฟีเจอร์ที่ฉันชื่นชอบมากที่สุดคือเบราว์เซอร์ที่ทันสมัยทั้งหมดและได้เป็นส่วนหนึ่งของ Baseline 2024 อย่างเป็นทางการแล้ว และฟีเจอร์นี้คือ Popover API Popover ช่วยสร้างอินเทอร์เฟซแบบเป็นชั้นๆ เช่น เคล็ดลับเครื่องมือ เมนู การสอน UI และอื่นๆ ได้เป็นจำนวนมากเพราะพื้นฐานและเอื้อต่อนักพัฒนาซอฟต์แวร์จำนวนมาก

การสนับสนุนเบราว์เซอร์

  • 114
  • 114
  • 125
  • 17

แหล่งที่มา

ไฮไลต์สั้นๆ ของความสามารถในการแสดงหน้าต่างป็อปโอเวอร์มีดังนี้

  • เลื่อนไปยังชั้นบนสุด ป๊อปอัปจะปรากฏในเลเยอร์บนสุดเหนือส่วนที่เหลือของหน้า คุณจึงไม่ต้องเล่นกับ z-index
  • ฟังก์ชันปิดไฟ การคลิกนอกบริเวณป๊อปอัปจะปิดป๊อปอัปและโฟกัสกลับ
  • การจัดการโฟกัสเริ่มต้น การเปิดป็อปโอเวอร์จะทำให้แท็บถัดไปหยุดภายในป๊อปอัป
  • แป้นพิมพ์ลัดที่เข้าถึงได้ การกดปุ่ม esc หรือสลับ 2 ครั้งจะเป็นการปิดป๊อปอัปและโฟกัสกลับไปที่
  • การเชื่อมโยงคอมโพเนนต์ที่เข้าถึงได้ การเชื่อมต่อองค์ประกอบป๊อปโอเวอร์กับทริกเกอร์ป๊อปโอเวอร์อย่างมีความหมาย

กำลังสร้างป๊อปอัป

การสร้างป๊อปอัปนั้นค่อนข้างตรงไปตรงมา หากต้องการใช้ค่าเริ่มต้น สิ่งที่คุณต้องมีคือ button เพื่อทริกเกอร์ป๊อปอัปและองค์ประกอบที่จะทริกเกอร์

  • ก่อนอื่นให้ตั้งค่าแอตทริบิวต์ popover ในองค์ประกอบซึ่งจะเป็นป๊อปอัป
  • จากนั้นเพิ่ม id ที่ไม่ซ้ำกันในองค์ประกอบที่แสดงขึ้น
  • สุดท้าย หากต้องการเชื่อมต่อปุ่มกับป๊อปอัป ให้ตั้งค่า popovertarget ของปุ่มเป็นค่า id ขององค์ประกอบป๊อปอัป

ซึ่งจะแสดงในรหัสต่อไปนี้

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
ตัวอย่างพื้นฐานของการใช้แอตทริบิวต์ป๊อปอัป

หากต้องการควบคุมหน้าต่างป็อปโอเวอร์ที่ละเอียดขึ้น คุณสามารถตั้งค่าประเภทของป๊อปอัปที่ชัดเจนได้ เช่น การใช้แอตทริบิวต์ popover เปล่าที่ไม่มีค่าจะเหมือนกับ popover="auto" ค่า auto เปิดใช้ลักษณะการทำงานแบบปิดแสงและปิดป๊อปอัปอื่นๆ โดยอัตโนมัติ ใช้ popover="manual" และคุณจะต้องเพิ่มปุ่มปิด ป๊อปอัปที่กำหนดเองจะไม่ปิดป๊อปอัปอื่นๆ หรืออนุญาตให้ผู้ใช้ปิดป๊อปอัปโดยการคลิกออกจากหน้าใน UI คุณสร้างหน้าต่างป๊อบโอเวอร์ด้วยตนเองโดยใช้ข้อมูลต่อไปนี้

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>
ตัวอย่างการเปิดปิดด้วยตนเอง

กล่องโต้ตอบป๊อปอัปกับกล่องโต้ตอบแบบโมดัล

คุณอาจสงสัยว่าคุณต้องเปิดป๊อปอัปเมื่อมีกล่องโต้ตอบหรือไม่ และคำตอบคือคุณอาจไม่ต้องเปิด

โปรดทราบว่าแอตทริบิวต์ป๊อปอัปไม่ได้แสดงความหมายในตัว และแม้ว่าคุณจะสามารถสร้างประสบการณ์ที่เหมือนกับกล่องโต้ตอบโมดัลโดยใช้การแสดงแบบป๊อปอัปได้แล้ว แต่ก็มีความแตกต่างที่สำคัญอยู่บ้างระหว่าง 2 แบบ ดังนี้

องค์ประกอบ <dialog> แบบโมดัล

  • เปิดด้วย dialog.showModal()
  • ปิดด้วย dialog.close()
  • ทำให้ส่วนที่เหลือของหน้าดูเฉื่อยชา
  • ไม่รองรับลักษณะการทำงานแบบปิดไฟ
  • คุณจัดรูปแบบสถานะเปิดได้ด้วยแอตทริบิวต์ [open]
  • สื่อถึงคอมโพเนนต์แบบอินเทอร์แอกทีฟที่บล็อกการโต้ตอบกับส่วนที่เหลือของหน้า

แอตทริบิวต์ [popover]

  • เปิดได้ด้วยผู้เรียกใช้แบบประกาศ (popovertarget)
  • ปิดด้วย popovertarget (เปิดใหม่โดยอัตโนมัติ) หรือ popovertargetaction=hide (เปิดใหม่ด้วยตนเอง)
  • ไม่ทำให้หน้าที่เหลือเฉื่อย
  • รองรับลักษณะการทำงานแบบปิดไฟ
  • คุณจัดรูปแบบสถานะเปิดได้ด้วยคลาส Pseudo-class :popover-open
  • ไม่มีความหมายในตัว

invoketarget

สรุปและอ่านเพิ่มเติม

แพลตฟอร์มนี้มีฟีเจอร์ที่น่าสนใจมากมายที่ popover หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับ API นี้ รวมถึงข้อมูลเพิ่มเติมเกี่ยวกับความสามารถเข้าถึงได้ง่ายของฟีเจอร์ และเอกสารเกี่ยวกับชุดฟีเจอร์ โปรดอ่านคำแนะนำบางส่วนต่อไปนี้เพื่อศึกษาข้อมูลเพิ่มเติม