Popover 案例研究

Swetha Gopalakrishnan
Swetha Gopalakrishnan
Saurabh Rajpal
Saurabh Rajpal

弹出式窗口在网络中随处可见。你可以在菜单、切换提示 对话框,用于账号设置、披露信息微件以及 商品卡片预览。尽管这些组件非常普遍,构建它们 仍然令人惊讶。为了解决这一问题 用于构建弹出式窗口的声明式 HTML API 即将登陆浏览器,这是我们最早的 即 Popover API

Popover 是基准新发布的计划的一部分。

浏览器支持

  • Chrome:114。 <ph type="x-smartling-placeholder">
  • 边缘:114。 <ph type="x-smartling-placeholder">
  • Firefox:125。 <ph type="x-smartling-placeholder">
  • Safari:17. <ph type="x-smartling-placeholder">

来源

弹出式窗口通常与对话框相混淆。不过,也有一些关键点 行为差异使用 dialog.showModal 打开的 dialog 元素 (模态对话框)是指需要用户明确互动才能 关闭模态窗口。popover 支持浅色关闭。模态 dialog 不会。 模态对话框会使页面的其余部分变为休眠状态。popover 则不行。 详细了解二者差异

本文是我们系列文章中的一篇,探讨了电子商务公司 使用新的 CSS 和界面功能改进其网站。在本文中,您将了解 Tokopedia 如何实施 Popover API 并从中受益。

Tokopedia

在 React 中使用弹出式窗口属性后,最多可减少 70% 的代码行数。模态框 可由 HTML 进行本地控制,而无需在 JavaScript 以及使用 React.createPortal 将模态 DOM 移至末尾 document.body。我们还可以使用 @starting-style 为 弹出式窗口的打开和关闭...Andy Wihalim,高级软件 Tokopedia 工程师

Tokopedia 的商品详情页面 (PDP) 为每个页面提供了多张产品图片。 产品。点击商品缩略图时,系统会打开一个模态窗口,以显示 放大的图片。这是电子商务网站中使用的一种常见模式。

代码

Tokopedia 使用 React 进行前端开发。在实施 Popover API,他们使用了 DOM 模态和一个按钮。按钮 更改了 React 状态以打开模态窗口。使用 Popover API,他们可以指定 元素中的 popovertarget 属性,用于打开带有值的弹出式窗口 与弹出广告元素的 ID 相同。

通过这种基本实现,弹出式窗口可以运行,但显示和消失 没有任何动画效果要为 弹出式窗口,使用 :popover-open@starting-style 并允许显示以下内容的动画: 离散属性。 在下面的代码示例中,该弹出式窗口使用 transform: 'scale()' 属性。

代码示例展示了 如何为 Popover API 实现进入和退出动画。

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />
export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },
  transform: 'scale(0.8)',
  opacity: 0,

  '&:popover-open': {
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
    transform: 'scale(1)',
    opacity: 1,
  },
});

为了迎合不支持弹出式窗口 API 的浏览器,Tokopedia 实施了 oddbird 的 popover-polyfill, 而 gzip 压缩则仅为 3.2 KB。他们对 polyfill 感到满意 因为它运行良好,并且不会导致性能下降。总体而言, 使用 Popover API 能将 React 中的代码行减少多达 70%。

使用 Popover API 时的注意事项

Tokopedia 使用 React 实现了代码拆分,该团队通过卸载 弹出窗口组件(适用于不使用该组件的网页),然后针对该组件 弹出式窗口内容。这样,他们就可以减小初始请求的大小。

考虑将弹出式窗口与 CSS 锚点定位结合使用 (即将在 Chrome 中推出) 来调整它们相对于其他元素的位置例如,这对于菜单和提示非常有用。

资源

敬请阅读本系列中的其他文章,了解电子商务如何 公司受益于新推出的 CSS 和界面功能,例如滚动驱动型 动画、弹出式窗口、容器查询和 has() 选择器。