pinch-zoom-element

Джейк и его команда создали этот довольно удивительный пользовательский элемент для управления масштабированием пинча в любом наборе HTML, за исключением собственной динамики масштабирования в браузере (например, масштабирование в мобильной области просмотра). Этот элемент был одним из центральных компонентов, которые нам нужны для приложения squoosh , которое мы создали и выпустили на Chrome Dev Summit (... я говорю «выпущено на Chrome Dev Summit» - Джейк показывал его всем на Китайском дне разработчиков Google). хотя остальная часть команды была под эмбарго;) ...)

install: npm install --save-dev pinch-zoom-element

<pinch-zoom>
  <h1>Hello!</h1>
</pinch-zoom>

Read full post .

Я только добавил его в свой блог (это заняло всего пару минут), вы можете проверить это в моем разделе « life », где я делюсь фотографиями, которые я сделал. Если вы работаете на устройстве с сенсорным экраном, вы можете быстро увеличить масштаб элемента, если вы используете трекпад, который может работать с несколькими нажатиями пальцев, что тоже работает.

Этот элемент является отличным примером того, почему я люблю веб-компоненты как модель для создания компонентов пользовательского интерфейса. Элемент pinch-zoom имеет pinch-zoom чуть меньше 3 КБ (без сжатия) и минимальные зависимости для сборки, и он просто отлично справляется с одной работой, не привязывая никакой пользовательской логики уровня приложения, которая затруднит его использование (у меня есть некоторые мысли по поводу логики пользовательского интерфейса) против компонентов логики приложения, которыми я поделюсь на основе своих знаний из приложения Squoosh).

Мне бы очень хотелось, чтобы такие элементы получили больше осведомленности и использования, например, я мог бы представить, что этот элемент может заменить или стандартизировать функциональность масштабирования изображения, которую вы видите на многих коммерческих сайтах, и навсегда избавить разработчиков от этой боли.

About Me: Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.