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

Света Гопалакришнан
Swetha Gopalakrishnan
X LinkedIn
Саурабх Раджпал
Saurabh Rajpal
X LinkedIn

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

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

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

Токопедия

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

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

Код

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

При такой базовой реализации всплывающее окно работает, но появляется и исчезает без какой-либо анимации. Для создания плавной анимации появления и исчезновения всплывающего окна используйте :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 всплывающих окон, Tokopedia реализовала полифил popover-polyfill от oddbird, который занимает всего 3,2 КБ и сжат с помощью gzip. Они остались довольны полифилом, поскольку он хорошо работал и не вызывал снижения производительности. В целом, им удалось сократить количество строк кода в React до 70% благодаря API всплывающих окон.

Что следует учитывать при использовании API всплывающих окон

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

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

Ресурсы

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