Popover API正式加入Baseline | 博客 - web.dev

Popover API正式加入Baseline 2024

Popover Popover API的亮点、使用方法以及与其他组件的区别。

Popover API的功能亮点

Popover API为开发者提供了一系列便捷的功能，以下是其主要亮点：

• 升级到顶层：弹出窗口会显示在页面其他内容之上的顶层，无需使用复杂的z-index设置。
• 灯光关闭功能：点击弹出窗口外部区域会自动关闭弹出窗口并将焦点返回到触发元素。
• 默认焦点管理：打开弹出窗口后，Tab键的焦点会限制在弹出窗口内。
• 可访问的键盘绑定：支持通过按下Esc键或双击关闭弹出窗口并返回焦点。
• 语义化组件绑定：可以将popover元素语义化地绑定到触发器元素。

如何创建弹出窗口

创建一个基本的弹出窗口非常简单，只需以下几步：

1. 在需要作为popover的元素上添加popover属性。
2. 为popover元素设置一个唯一的id。
3. 在触发按钮上，将popovertarget属性设置为popover元素的id值。

以下是一个简单的代码示例：

<button>打开popover</button>

<div id="my-popover">
  <p>我是一个包含更多信息的popover。点击<kbd>Esc</kbd>或单击外部区域关闭我。</p>
</div>

更精细的弹出窗口控制

通过设置不同的popover属性值，可以实现更精细的控制：

• popover="auto"：默认行为，支持灯光关闭功能，并会自动关闭其他弹出窗口。
• popover="manual"：手动控制弹出窗口，需添加关闭按钮，用户无法通过点击UI外部关闭弹出窗口。

以下是手动弹出窗口的代码示例：

<button class="trigger btn">打开popover</button>

<div id="manual-popover">
  <p>我是一个手动控制的popover。点击关闭按钮关闭我。</p>
  <button class="close btn">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">关闭</span>
  </button>
</div>

此外，还有一种尚未实现的popover="hint"类型，适用于工具提示等临时界面。它允许弹出窗口保持打开状态且不会关闭其他窗口，同时支持灯光关闭功能。

Popover与Dialog的区别

尽管popover和dialog都可以用于创建模态体验，但它们之间存在一些关键区别：

dialog的特点

• 使用dialog.showModal()打开。
• 使用dialog.close()关闭。
• 会使页面的其余部分不可交互。
• 不支持灯光关闭功能。
• 可以通过[open]属性设置打开状态的样式。
• 语义上表示阻止与页面其余部分交互的组件。

[popover]的特点

• 可以通过声明式调用程序（popovertarget）打开。
• 支持灯光关闭功能。
• 不会使页面的其余部分不可交互。
• 可以通过:popover-open伪类设置打开状态的样式。
• 不具有固有的语义。

值得一提的是，为了让dialog组件更具声明性，类似popover的invoketarget属性正在讨论和原型化中。

总结

Popover API为Web平台带来了许多令人兴奋的新功能，特别是在构建分层界面时提供了极大的便利。通过其简单的语法和强大的功能，开发者可以轻松实现弹出窗口、工具提示和教学UI等复杂交互。

如果想了解更多关于Popover API的详细信息，包括其可访问性和完整的功能文档，建议参考相关官方资料。

原文链接: https://web.dev/blog/popover-api