Эта страница переведена с помощью Cloud Translation API.

Тематические исследования Popover

Swetha Gopalakrishnan

Saurabh Rajpal

Всплывающие окна повсюду в Интернете. Вы можете увидеть их в меню, подсказках и диалогах, используемых для таких функций, как настройки учетной записи, виджеты раскрытия информации и предварительные просмотры карточек продуктов. Несмотря на то, насколько распространены эти компоненты, их создание в браузерах по-прежнему удивительно обременительно. Чтобы решить эту проблему, в браузерах появляется новый набор декларативных API HTML для создания всплывающих окон, первым из которых является API Popover .

Popover является частью Baseline Newly Available .

Browser Support

Source

Всплывающее окно часто путают с диалоговым окном. Однако в их поведении есть некоторые ключевые различия. Элемент dialog , открытый с помощью dialog.showModal (модальное диалоговое окно), — это опыт, требующий явного взаимодействия с пользователем для закрытия модального окна. popover поддерживает функцию light-dismiss. Модальное dialog — нет. Модальное диалоговое окно делает остальную часть страницы инертной. popover — нет. Подробнее о различиях читайте .

Эта статья является частью серии , в которой обсуждается, как компании электронной коммерции улучшили свой веб-сайт с помощью новых функций CSS и UI. В этой статье вы узнаете, как Tokopedia реализовала и извлекла выгоду из API Popover.

Токопедия

Использование атрибутов popover сократило до 70% строк кода в React. Модальное окно может управляться HTML, а не требовать обработки событий в JavaScript и использовать React.createPortal для перемещения модального DOM в конец document.body . Мы также можем использовать @starting-style для анимации открытия и закрытия popover. — Энди Вихалим , старший инженер-программист, Tokopedia .

Страницы описания продукта Tokopedia (PDP) содержат несколько изображений для каждого продукта. При щелчке по миниатюре продукта открывается модальное окно, показывающее увеличенное изображение. Это распространенный шаблон, используемый на веб-сайтах электронной коммерции.

Код

Tokopedia использует React для разработки фронтенда. Перед реализацией API popover для этого модального окна они использовали модальное окно DOM и кнопку. Кнопка изменяла состояние React для открытия модального окна. С API popover они указывают атрибут popovertarget в элементе, который открывает popover со значением, совпадающим с идентификатором элемента popover.

При такой базовой реализации поповер работает, но появляется и исчезает без анимации. Чтобы создать плавную анимацию входа и выхода для поповера, используйте :popover-open и @starting-style и разрешите анимацию дискретных свойств. В следующем примере кода поповер масштабируется с помощью свойства transform: 'scale()' .

В этом примере кода показано, как реализовать анимацию входа и выхода для 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',

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

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

Чтобы удовлетворить запросы браузеров, не поддерживающих API popover, Tokopedia реализовала popover-polyfill от oddbird, который занимает всего 3,2 КБ с сжатием gzip. Они остались довольны полифиллом, поскольку он хорошо работал и не вызывал снижения производительности. В целом, им удалось сократить до 70% строк кода в React с API popover.

Tokopedia использует React, и команда добилась разделения кода, демонтировав компонент popover для страниц, которые его не используют, а затем выполнив разделение кода для содержимого popover. Таким образом, они уменьшили размер своего первоначального запроса.

Рассмотрите возможность объединения всплывающих окон с позиционированием якорей CSS ( скоро в Chrome ), чтобы расположить их относительно других элементов. Это полезно, например, для меню и подсказок.

Ресурсы

Представляем API всплывающих окон
Разница между всплывающим окном и диалоговым окном
Хотите сообщить об ошибке или запросить новую функцию? Мы хотим услышать от вас .

Ознакомьтесь с другими статьями этой серии, в которых рассказывается о том, как компании электронной коммерции получили выгоду от использования новых функций CSS и пользовательского интерфейса, таких как анимация с прокруткой, всплывающие окна, контейнерные запросы и селектор has() .

Тематические исследования Popover

Токопедия

Код

Что следует учитывать при использовании API Popover

Ресурсы