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

Una Kravets

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

ไฮไลต์สั้นๆ เกี่ยวกับความสามารถของป๊อปอัปมีดังนี้

• การโปรโมตไปยังเลเยอร์บนสุด ข้อความป๊อปอัปจะปรากฏในเลเยอร์บนสุดเหนือส่วนอื่นๆ ของหน้า คุณจึงไม่ต้องปรับแต่ง 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>

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

คุณอาจสงสัยว่าต้องใช้ป๊อปอัปไหมเมื่อมีกล่องโต้ตอบอยู่แล้ว คำตอบคือไม่จำเป็น

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

สรุปและแหล่งข้อมูลเพิ่มเติม

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

• Semantics and the popover attribute: what to use when? by Hidde de Vries
• เกี่ยวกับการช่วยเหลือพิเศษของป๊อปอัป: สิ่งที่เบราว์เซอร์ทำได้และไม่สามารถทำได้ โดย Hidde de Vries
• เอกสารประกอบของ MDN เกี่ยวกับป๊อปอัป