Поповеры повсюду в сети. Вы можете увидеть их в меню, переключателях и диалоговых окнах, используемых для таких функций, как настройки учетной записи, виджеты раскрытия и предварительный просмотр карточек продуктов. Несмотря на то, насколько распространены эти компоненты, их создание в браузерах по-прежнему остается на удивление громоздким. Чтобы решить эту проблему, в браузеры поступает новый набор декларативных HTML API для создания всплывающих окон, первым из которых является Popover API .
Popover является частью Baseline Newly Available .
Поповер обычно путают с диалогом. Однако в их поведении есть некоторые ключевые различия. Элемент dialog
, открытый с помощью dialog.showModal
(модальный диалог), представляет собой интерфейс, требующий явного взаимодействия с пользователем для закрытия модального окна. popover
поддерживает функцию Light-Dismiss. Модальный dialog
этого не делает. Модальный диалог делает остальную часть страницы инертной. popover
этого не делает. Подробнее о различиях читайте .
Эта статья является частью серии , в которой рассказывается, как компании электронной коммерции улучшили свой веб-сайт с помощью новых функций CSS и пользовательского интерфейса. В этой статье вы узнаете, как Tokopedia реализовала API Popover и извлекла из него пользу.
Токопедия
Использование атрибутов popover сократило количество строк кода в React до 70%. Модальное окно может управляться с помощью HTML вместо необходимости обработки событий в JavaScript и использования
React.createPortal
для перемещения модального DOM в конецdocument.body
. Мы также можем использовать@starting-style
для анимации открытия и закрытия всплывающего окна . — Энди Вихалим , старший инженер-программист, Tokopedia .
Страницы сведений о продукте (PDP) Tokopedia содержат несколько изображений продуктов для каждого продукта. При нажатии на миниатюру продукта открывается модальное окно для отображения увеличенного изображения. Это распространенный шаблон, используемый на веб-сайтах электронной коммерции.
Код
Tokopedia использует React для разработки интерфейса. Прежде чем реализовать API popover для этого модального окна, они использовали модальное окно DOM и кнопку. Кнопка изменила состояние React, чтобы открыть модальное окно. С помощью API popover они указывают атрибут popovertarget
в элементе, который открывает всплывающее окно со значением, совпадающим с идентификатором элемента всплывающего окна.
В этой базовой реализации всплывающее окно работает, но появляется и исчезает без какой-либо анимации. Чтобы создать плавную анимацию входа и выхода для всплывающего окна, используйте :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',
'@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 popover, Tokopedia реализовала popover-polyfill от Odbird, размер которого составляет всего 3,2 КБ со сжатием gzip. Они остались довольны полифиллом, поскольку он работал хорошо и не приводил к снижению производительности. В целом им удалось сократить до 70% строк кода в React с помощью popover API.
Что следует учитывать при использовании Popover API
Tokopedia использует React, и команда добилась разделения кода, отключив компонент popover для страниц, которые его не используют, а затем разделив код для содержимого всплывающего окна. Таким образом они уменьшили размер первоначального запроса.
Рассмотрите возможность объединения всплывающих окон с позиционированием привязки CSS ( скоро появится в Chrome ), чтобы позиционировать их относительно других элементов. Это полезно, например, для меню и всплывающих подсказок.
Ресурсы
- Представляем API поповера
- Разница между поповером и диалогом
- Хотите сообщить об ошибке или запросить новую функцию? Мы хотим услышать ваше мнение .
Изучите другие статьи этой серии, в которых рассказывается о том, какую выгоду компании электронной коммерции получили от использования новых функций CSS и пользовательского интерфейса, таких как анимация, управляемая прокруткой, всплывающее окно, запросы контейнера и селектор has()
.