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

Swetha Gopalakrishnan

Saurabh Rajpal

Поповеры повсюду в сети. Вы можете увидеть их в меню, переключателях и диалоговых окнах, используемых для таких функций, как настройки учетной записи, виджеты раскрытия и предварительный просмотр карточек продуктов. Несмотря на то, насколько распространены эти компоненты, их создание в браузерах по-прежнему остается на удивление громоздким. Чтобы решить эту проблему, в браузеры поступает новый набор декларативных 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',

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

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

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

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

Ресурсы

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

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

• Почему возможности веб-интерфейса важны для вашего сайта электронной коммерции?
• Примеры использования анимации, управляемой прокруткой
• Посмотреть примеры использования переходов
• Примеры использования контейнерных запросов
• Примеры применения селектора :has()

Swetha Gopalakrishnan

Saurabh Rajpal

Поповеры повсюду в сети. Вы можете увидеть их в меню, переключателях и диалоговых окнах, используемых для таких функций, как настройки учетной записи, виджеты раскрытия и предварительный просмотр карточек продуктов. Несмотря на то, насколько распространены эти компоненты, их создание в браузерах по-прежнему остается на удивление громоздким. Чтобы решить эту проблему, в браузеры поступает новый набор декларативных 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',

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

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

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

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

Ресурсы

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

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

• Почему возможности веб-интерфейса важны для вашего сайта электронной коммерции?
• Примеры использования анимации, управляемой прокруткой
• Посмотреть примеры использования переходов
• Примеры использования контейнерных запросов
• Примеры применения селектора :has()