popper js для чего нужен
Popper js для чего нужен
Positioning tooltips and popovers is difficult. Popper is here to help!
Given an element, such as a button, and a tooltip element describing it, Popper will automatically put the tooltip in the right place near the button.
It will position any UI element that «pops out» from the flow of your document and floats near a target element. The most common example is a tooltip, but it also includes popovers, drop-downs, and more. All of these can be generically described as a «popper» element.
Why not use pure CSS?
With the CSS drawbacks out of the way, we now move on to Popper in the JavaScript space itself.
Naive JavaScript tooltip implementations usually have the following problems:
Popper solves all of these key problems in an elegant, performant manner. It is a lightweight
3 kB library that aims to provide a reliable and extensible positioning engine you can use to ensure all your popper elements are positioned in the right place.
When you start writing your own popper implementation, you’ll quickly run into all of the problems mentioned above. These widgets are incredibly common in our UIs; we’ve done the hard work figuring this out so you don’t need to spend hours fixing and handling numerous edge cases that we already ran into while building the library!
Popper is used in popular libraries like Bootstrap, Foundation, Material UI, and more. It’s likely you’ve already used popper elements on the web positioned by Popper at some point in the past few years.
Since we write UIs using powerful abstraction libraries such as React or Angular nowadays, you’ll also be glad to know Popper can fully integrate with them and be a good citizen together with your other components. Check out react-popper for the official Popper wrapper for React.
Managing dependencies by «directly downloading» them and placing them into your source code is not recommended for a variety of reasons, including missing out on feat/fix updates easily. Please use a versioning management system like a CDN or npm/Yarn.
The most straightforward way to get started is to import Popper from the unpkg CDN, which includes all of its features. You can call the Popper.createPopper constructor to create new popper instances.
Here is a complete example:
Visit the tutorial for an example of how to build your own tooltip from scratch using Popper.
You can import the createPopper constructor from the fully-featured file:
All the modifiers listed in the docs menu will be enabled and «just work», so you don’t need to think about setting Popper up. The size of Popper including all of its features is about 5 kB minzipped, but it may grow a bit in the future.
Popper Lite (tree-shaking)
If bundle size is important, you’ll want to take advantage of tree-shaking. The library is built in a modular way to allow to import only the parts you really need.
The Lite version includes the most necessary modifiers that will compute the offsets of the popper, compute and add the positioning styles, and add event listeners. This is close in bundle size to pure CSS tooltip libraries, and behaves somewhat similarly.
However, this does not include the features that makes Popper truly useful.
The two most useful modifiers not included in Lite are preventOverflow and flip :
As you make more poppers, you may be finding yourself needing other modifiers provided by the library.
See tree-shaking for more information.
Popper is distributed in 3 different versions, in 3 different file formats.
The 3 file formats are:
Popper js для чего нужен
Weighs just 3 kB!
Copied to clipboard!
Copied to clipboard!
Click on the dots to place the tooltip. There are 12 different placements to choose from.
Scroll the container (or the whole page) to see the tooltip stay within the boundary. Once the opposite edges of the popcorn and tooltip are aligned, the tooltip is allowed to overflow to prevent detachment.
Scroll the container (or the whole page) to see the tooltip flip to the opposite side once it’s about to overflow the visible area. Once enough space is detected on its preferred side, it will flip back.
In a nutshell, Popper:
Places your tooltip or popover relative to the reference taking into account their sizes, and positions its arrow centered to the reference.
Takes into account the many different contexts it can live in relative to the reference (different offsetParents, different or nested scrolling containers).
Keeps your tooltip or popover in view as best as possible. It prevents it from being clipped or cut off (overflow prevention) and changes the placement if the original does not fit (flipping).
Our Sponsors
Popper is proudly sponsored by the following organizations,
join them on Open Collective to support us.
Granular configuration with sensible defaults
Popper aims to «just work» without you needing to configure much. Of course, there are cases where you need to configure Popper beyond its defaults – in these cases, Popper shines by offering high granularity of configuration to fine-tune the position or behavior of your popper.
You can extend Popper with your own modifiers (or plugins) to make your popper work for you, no matter how advanced the scenario.
No compromises
No detachment. Position updates take less than a millisecond on average devices. Popper doesn’t debounce the positioning updates of the tooltip to the point where it will ever detach from its reference, but this doesn’t come at the cost of poor performance.
You don’t have to change the DOM context of your tooltip or popover element; it will work no matter where your popper and reference elements live, even in the most complex scenarios like nested scrolling containers or alternative offsetParent contexts.
Still lightweight. Handling all of this complexity is still done in an efficient manner. The base Popper is only 2 kB minzipped.
Free open-source, used by millions
Popper has billions of hits across the web, is trusted by millions of developers in production, and used in popular libraries like Bootstrap and Material UI.
Создание пользовательских компонент для Bootstrap 4
Общественное мнение перевело Bootstrap в категорию легендарных фреймворков прошлого, но следить за ним все ещё стоит. Bootstrap 4 — отличный навигатор по безопасной верстке, и главное, образец HTML over JS подхода к созданию веб-приложений, в полной мере раскрывает существующие возможности HTML для декларативного описания интерфейса пользователя.
И о том как развивается JavaScript код фреймворка тоже полезно иметь представление. Архитектура jQuery плагинов все еще используется но с 4ой версии это завернутые Rollup’ом в пакет классы ES6 транспиленные при помощи Babel6. jQuery вероятно скоро и не будет вовсе — об этом позже — а пока, на примере создания собственного плагина BsMultiSelect, на том же стёке что и Boostrap 4, будут раскрыты особенности развития фреймворка.
Конфликт архитектур с порога
Получившийся плагин BsMultiSelect напрямую JS код bootstrap.js не использует, а использует его зависимость — popper.js (ванильный фреймворк всплывающих элементов). Это потому что dropdown компоненте из bootstrap.js нужно при инициализации в DOM найти так называемый toggle элемент (в частном случае это кнопка открывающая меню), если не находит — падает с ошибкой (раз я создаю напрямую из js то и «кнопки» у меня конечно нет). Вывод: компоненты заточенные под «HTML over JS» невозможно (или невыгодно) создавать из JS напрямую. Вывод номер два: программировать пользовательские компоненты надо так, чтобы под «HTML over JS» компонентой, всегда была более легкая компонента «чистого JS». У меня это MulitSelect.js полностью очищенная не только от кода но и от стилей Bootstrap’а. MulitSelect.js играет туже роль для BsMulitSelect.js, что и popper.js для dropdown.js.
Два слова о popper.js
Отличная библиотека — одна функция. DropDown.js повторяет но предоставляет совсем ограниченный интерфейс к ней (опять же потому что в «HTML over JS» весь API и не нужен). У popper’а больше открытых issue чем хотелось бы. Меня огорчила тем, что под IE11 публикует события не так как под Chrome.
О переходе от IIFE к class’ам
Стандартный бойлерплейт JQuery Pluginа — это определение функции конструктора внутри IIFE. Теперь же это class внутри IIFE. Открытие: старые функциональные способы делать private методы конфликтуют с лямбдой ES6 поэтому от них в Bootstrap «отказались». Все методы публичные, а «псевдо-приватные» помечают префиксом _ т.е. underscrore. Понимаю что не прав, но следую своим соглашениям — «публичные методы с большой буквы». Во всем прочем BsMultiSelect создавался перенимая соглашения «стандартного» DropDown.js, т.е. я бы хотел его представлять этаким boilerplate’ом с мясом.
Конфигурации линтеров Eslint и Stylelint
Я себя не почувствовал обязанным следовать драконовским правилам стилизации кода Bootstrap’а. Наверняка они пишут в среде которая им помогает в деле расстановки пробелов и для source control строгости очень хорошо, но мне тяжело ежесекундно выслушивать скорбь линтера в VS Code. При написании собственного плагина правила можно и нужно сильно ослабить.
Eslint, stylelint выходят может и не слишком часто, но просматривать новые правила — нет никакого желания. Во всех аспектах меня это достижение больше раздражает.
Организация кода и rollup
Оттранспиленный ES6 код Bootstrap’а пакетируется rollup’ом в две версии: standalone bootstrap.js и bundle bootstrap.bundle.js — последний включает в себя popper.js.
Чуждыми мне инстинктами обладает автор rollup.config.js. Вся эта трансформация конфигурации через push и pop, в зависимости от требуемой версии standalone или bundle, выглядит вычурной и пугающей, к счастью для написания плагина нужен только один тип бандла «standalone» и мне не придется доказывать что я могу лучше.
Standalone версия Bootstrap’а указана и в main field пакета т.е. npm зависимости разрешаются в тот же самый файл который грузят пользователи через ) — то загружать полифилы придется только синхронно (иначе инлайн код может начать исполнение ранее того момента когда плагин загружен). Т.е. например webpack-polyfill-injector (самый богатый по возможностям из мне известных injector полифилов) надо контролировать так чтобы он не решил грузить полифилы асинхронно (поведение по умолчанию).
No jQuery
jQuery ощущается чем-то токсичным, конкурирующим с Babel/ES6 и затеняющем его, но это не навсегда. Есть branch v4-whithout-jquery, он уже в pool request, в планах выпустить bootstrap-nojquery c версии 4.3. Ранее самой большой проблемой отказа от jquery назывались namespace событий, хотя и очевидно что можно писать без них (BsMultiSelect обошелся). Видимо решились.
Также объявлено что с версии 4.3 оригинальные компоненты будет возможно грузить в броузер по отдельности (только для сценария «приложение»). Станут ли тогда оригинальные компоненты «как BsMultiSelect»? Нет. Если команде BS будут нужны какие-то переменные SASS — понаделают под себя классы/селекторы CSS и будут оперировать ими из JS («функциональный CSS»). Создателям пользовательских компонент такие возможности не доступны.
Возможный переход с sass на post-css https://github.com/twbs/bootstrap/projects/11 в 5ой версии принципиально ничего не меняет. Или меняет всё: «JS over HTML».
Bootstrap 5 придется установить рекомендации как интегрироваться в полифилы Babel, и как патчить DOM. Тут прогноз более-менее ясен: создателям страничек и создателям приложений будут предложены совершенно различные сборки.
Итоги
Пока пишешь компоненты Bootstrap 4 на Babel методом ad hoc не задумываясь о переиспользовании, а значит о полифилах, и о том где взять переменные стилей — горя не знаешь.
Но если делать плагин отдельным npm пакетом — и с желанием сделать решение в духе самого Bootstrap 4 удовольствия становится меньше, задумываешься чаще и дольше. Вероятно придется сразу определиться — кто ваши пользователи, и предлагать различные сборки, одну для тех, кто будет собирать приложение в бандл, другую для пишущих странички, т.е. загружающих плагин script’ом.
Всплывающие окна
Документация и примеры добавления всплывающих окон Bootstrap, подобных тем, которые есть в iOS, к любому элементу на вашем сайте.
Обзор
Что нужно знать при использовании плагина всплывающих окон:
Продолжайте читать, чтобы увидеть, как работают всплывающие окна, на некоторых примерах.
Пример: Включить всплывающие окна везде
Пример: Использование опции container
Пример
Четыре направления
Доступны четыре варианта: по верхнему, правому, нижнему и левому краям. Направления зеркалируются при использовании Bootstrap в RTL.
Отклонить при следующем нажатии
Специальная разметка, необходимая для закрытия при следующем клике
Отключенные элементы
Элементы с атрибутом disabled не являются интерактивными, то есть пользователи не могут навести на них курсор или щелкнуть по ним, чтобы вызвать всплывающее окно (или всплывающую подсказку). В качестве обходного пути Вы захотите запускать всплывающее окно из оболочки
Переменные
Использование
Включить всплывающие окна через JavaScript:
Как заставить всплывающие окна работать для пользователей клавиатуры и вспомогательных технологий
Кроме того, хотя можно также включить интерактивные элементы управления (например, элементы формы или ссылки) в Ваше всплывающее окно (путем добавления этих элементов в allowList разрешенных атрибутов и тегов), имейте в виду, что в настоящее время всплывающее окно не управляет фокусом клавиатуры. Когда пользователь клавиатуры открывает всплывающее окно, фокус остается на инициирующем элементе, и поскольку всплывающее окно обычно не следует сразу за триггером в структуре документа, нет гарантии, что перемещение вперед/нажатие TAB приведет к перемещению пользователя клавиатуры в само всплывающее окно. Короче говоря, простое добавление интерактивных элементов управления к всплывающему окну может сделать эти элементы управления недоступными/непригодными для использования пользователями клавиатуры и пользователей вспомогательных технологий или, по крайней мере, сделать общий порядок фокусировки нелогичным. В этих случаях рассмотрите возможность использования модального диалога.