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

Una Kravets

การเปลี่ยนแปลงกำลังจะเริ่มขึ้นแล้ว หนึ่งในฟีเจอร์ที่ฉันตื่นเต้นมากที่สุดเพิ่งมีให้บริการในเบราว์เซอร์สมัยใหม่ทั้งหมดและเป็นส่วนหนึ่งของ Baseline 2024 อย่างเป็นทางการ และฟีเจอร์นี้คือ Popover API Popover นำเสนอเครื่องมือพื้นฐานและผลงานของนักพัฒนาซอฟต์แวร์ที่ยอดเยี่ยมจำนวนมากสำหรับการสร้างอินเทอร์เฟซเลเยอร์ต่างๆ เช่น เคล็ดลับเครื่องมือ, เมนู, 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 มีฟีเจอร์ที่น่าสนใจมากมายในการใช้งานแพลตฟอร์ม หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ API นี้ รวมถึงรายละเอียดเพิ่มเติมเกี่ยวกับความสามารถเข้าถึงได้ง่ายของฟีเจอร์ และเอกสารประกอบเกี่ยวกับชุดฟีเจอร์ โปรดอ่านข้อมูลเพิ่มเติมต่อไปนี้

• อรรถศาสตร์และแอตทริบิวต์ป๊อปอัป: ใช้เมื่อใด โดย Hidde de Vries
• เกี่ยวกับการช่วยเหลือพิเศษแบบป๊อปอัป: Hidde de Vries ทำและไม่ทำอะไรบ้าง
• เอกสาร MN เกี่ยวกับป๊อปอัป