API Popover sẽ chuyển đến Cơ sở

Una Kravets

Sắp đến lúc rồi! Một trong những tính năng mà tôi hào hứng nhất vừa ra mắt trên tất cả trình duyệt hiện đại và chính thức là một phần của Baseline 2024. Và tính năng này là Popover API. Popover cung cấp rất nhiều thành phần gốc và tính năng hỗ trợ nhà phát triển tuyệt vời để xây dựng giao diện phân lớp như chú giải công cụ, trình đơn, giao diện người dùng hướng dẫn, v.v.

Sau đây là một số điểm nổi bật nhanh về các tính năng của cửa sổ bật lên:

• Được quảng bá lên lớp cao nhất. Cửa sổ bật lên sẽ xuất hiện trong lớp trên cùng phía trên phần còn lại của trang, vì vậy, bạn không cần phải thao tác với z-index.
• Chức năng đóng nhẹ. Thao tác nhấp vào bên ngoài vùng cửa sổ bật lên sẽ đóng cửa sổ bật lên và trả về tiêu điểm.
• Quản lý tiêu điểm mặc định. Khi mở cửa sổ bật lên, thẻ tiếp theo sẽ dừng bên trong cửa sổ bật lên.
• Liên kết bàn phím hỗ trợ tiếp cận. Việc nhấn phím esc hoặc bật/tắt hai lần sẽ đóng cửa sổ bật lên và trả về tiêu điểm.
• Liên kết thành phần hỗ trợ tiếp cận. Kết nối phần tử popover với trình kích hoạt popover theo ngữ nghĩa.

Tạo cửa sổ bật lên

Việc tạo cửa sổ bật lên khá đơn giản. Để sử dụng các giá trị mặc định, bạn chỉ cần có button để kích hoạt cửa sổ bật lên và một phần tử để kích hoạt.

• Trước tiên, hãy đặt thuộc tính popover trên phần tử sẽ là cửa sổ bật lên.
• Sau đó, hãy thêm một id duy nhất trên phần tử cửa sổ bật lên.
• Cuối cùng, để kết nối nút với cửa sổ bật lên, hãy đặt popovertarget của nút thành giá trị của id của phần tử cửa sổ bật lên.

Điều này được thể hiện trong mã sau:

<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>

Để có quyền kiểm soát chi tiết hơn đối với cửa sổ bật lên, bạn có thể thiết lập rõ ràng các loại cửa sổ bật lên. Ví dụ: việc sử dụng thuộc tính popover trần không có giá trị cũng giống như popover="auto". Giá trị auto cho phép hành vi đóng nhẹ và tự động đóng các cửa sổ bật lên khác. Sử dụng popover="manual" và bạn sẽ cần thêm một nút đóng, các cửa sổ bật lên thủ công không đóng các cửa sổ bật lên khác hoặc cho phép người dùng đóng cửa sổ bật lên bằng cách nhấp ra khỏi giao diện người dùng. Bạn có thể tạo một cửa sổ bật lên thủ công bằng cách sử dụng các bước sau:

<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>

Cửa sổ bật lên so với hộp thoại phương thức

Bạn có thể thắc mắc liệu có cần cửa sổ bật lên khi có hộp thoại hay không. Câu trả lời là: có thể bạn không cần.

Điều quan trọng cần lưu ý là thuộc tính popover không tự cung cấp ngữ nghĩa. Mặc dù hiện tại, bạn có thể tạo trải nghiệm tương tự như hộp thoại phương thức bằng cách sử dụng cửa sổ bật lên, nhưng có một vài điểm khác biệt chính giữa hai loại này:

Kết luận và tài liệu đọc thêm

popover mang đến nhiều tính năng thú vị cho nền tảng. Để tìm hiểu thêm về API này, bao gồm cả thông tin về khả năng hỗ trợ tiếp cận của tính năng và tài liệu liên quan đến bộ tính năng, bạn nên đọc một số tài liệu sau để biết thêm thông tin:

• Ngữ nghĩa và thuộc tính cửa sổ bật lên: nên sử dụng khi nào? của Hidde de Vries
• Về khả năng hỗ trợ tiếp cận của cửa sổ bật lên: những gì trình duyệt hỗ trợ và không hỗ trợ của Hidde de Vries
• Tài liệu MDN về cửa sổ bật lên