Что такое popover окно

Popovers

Документация и примеры добавления всплывающих окон Bootstrap, подобных тем, которые есть в iOS, к любому элементу на вашем сайте.

Обзор

Что нужно знать при использовании плагина popover:

• Popovers полагаются на стороннюю библиотеку Popper.js для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать bootstrap.bundle.min.js /, bootstrap.bundle.js который содержит Popper.js, чтобы всплывающие окна работали!
• Для всплывающих окон в качестве зависимости требуется плагин всплывающей подсказки.
• Всплывающие окна включены по соображениям производительности, поэтому вы должны инициализировать их самостоятельно .
• При нулевой длине title и content значениях всплывающее окно никогда не отображается.
• Укажите container: ‘body’ , чтобы избежать проблем с отображением в более сложных компонентах (например, в наших группах ввода, группах кнопок и т.д.).
• Запуск всплывающих окон для скрытых элементов не работает.
• Всплывающие окна для элементов .disabled или disabled должны запускаться для элемента-оболочки.
• При запуске от якорей, которые переносятся по нескольким строкам, всплывающие окна будут центрированы между общей шириной якорей. Используйте .text-nowrap на своем , чтобы избежать такого поведения.
• Всплывающие окна должны быть скрыты до того, как соответствующие им элементы будут удалены из DOM.
• Всплывающие окна могут запускаться благодаря элементу внутри теневой DOM.

Продолжайте читать, чтобы увидеть, как работают всплывающие окна, на некоторых примерах.

Пример: включить всплывающие окна везде

Один из способов инициализировать все всплывающие окна на странице — выбрать их по их data-toggle атрибуту:

Пример: использования опции container

Если у вас есть стили родительского элемента, которые мешают отображению всплывающего окна, вам нужно указать пользовательский container вариант, чтобы HTML всплывающего окна отображался внутри этого элемента.

Примеры

Четыре направления

Доступны четыре варианта: по верхнему, правому, нижнему и левому краям.

Отказаться при следующем нажатии

Используйте триггер focus , чтобы закрыть всплывающие окна при следующем щелчке пользователем элемента, отличного от элемента переключения.

Специальная разметка, необходимая для закрытия при следующем щелчке

Для правильного кросс-браузер и поведение кросс-платформенной, вы должны использовать тег , не тегов, и вы также должны включать в себя tabindex атрибут.

Отключенные элементы

Элементы с атрибутом disabled не являются интерактивными, то есть пользователи не могут навести на них курсор или щелкнуть их, чтобы вызвать всплывающее окно (или всплывающую подсказку). В качестве обходного пути вы захотите запустить всплывающее окно из оболочки

Для отключенных триггеров всплывающего окна вы также можете предпочесть data-trigger=»hover» , чтобы всплывающее окно отображалось как немедленная визуальная обратная связь для ваших пользователей, поскольку они могут не ожидать нажатия на отключенный элемент.

Применение

Включить всплывающие окна через JavaScript:

Как заставить всплывающие окна работать для пользователей клавиатуры и вспомогательных технологий

Чтобы пользователи с клавиатурой могли активировать ваши всплывающие окна, вам следует добавлять их только к элементам HTML, которые традиционно ориентированы на клавиатуру и являются интерактивными (например, ссылки или элементы управления формы). Хотя произвольные элементы HTML (например, ) можно сделать доступными для фокусировки, добавив tabindex=»0″ атрибут, это добавит потенциально раздражающие и сбивающие с толку позиции табуляции в неинтерактивных элементах для пользователей клавиатуры, и большинство вспомогательных технологий в настоящее время не объявляют содержимое всплывающего окна в этой ситуации. . Кроме того, не полагайтесь исключительно на hover триггер для ваших всплывающих окон, так как это сделает их невозможным для пользователей клавиатуры.

Хотя вы можете вставлять богатый структурированный HTML-код в всплывающие окна с помощью этой html опции, мы настоятельно рекомендуем вам избегать добавления чрезмерного количества контента. В настоящее время всплывающие окна работают так, что после отображения их содержимое привязывается к элементу триггера с aria-describedby атрибутом. В результате весь контент всплывающего окна будет объявлен пользователям вспомогательных технологий как один длинный непрерывный поток.

Кроме того, хотя можно также включить интерактивные элементы управления (такие как элементы формы или ссылки) в ваше всплывающее окно (путем добавления этих элементов к allowList разрешенным атрибутам и тегам), имейте в виду, что в настоящее время всплывающее окно не управляет порядком фокуса клавиатуры. Когда пользователь клавиатуры открывает всплывающее окно, фокус остается на инициирующем элементе, и поскольку всплывающее окно обычно не следует сразу за триггером в структуре документа, нет гарантии, что движение вперед / нажатие TAB переместит пользователя клавиатуры в само всплывающее окно. Короче говоря, простое добавление интерактивных элементов управления во всплывающее окно может сделать эти элементы управления недоступными / непригодными для использования пользователями клавиатуры и пользователей вспомогательных технологий или, по крайней мере, сделать общий порядок фокусировки нелогичным. В этих случаях рассмотрите возможность использования модального диалогового окна.

Параметры

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра data- , как в data-animation=»» .

Добавляет всплывающее окно к определенному элементу. Пример: container: ‘body’ . Этот параметр особенно полезен тем, что позволяет вам размещать всплывающее окно в потоке документа рядом с элементом запуска, что предотвращает отрыв всплывающего окна от элемента запуска во время изменения размера окна.

Значение содержимого по умолчанию, если data-content атрибут отсутствует.

Если задана функция, она будет вызываться со this ссылкой на элемент, к которому прикреплено всплывающее окно.

Задержка показа и скрытия всплывающего окна (мс) — не относится к ручному типу триггера

Если указан номер, задержка применяется как к скрытию, так и к отображению.

Структура объекта: delay:

Как разместить поповер — авто | наверх | внизу | слева | право.
Когда auto указано, он будет динамически переориентировать всплывающее окно.

Когда функция используется для определения размещения, она вызывается с помощью узла DOM всплывающего окна в качестве первого аргумента и узла DOM элемента запуска в качестве второго. this Контекст установлен на экземпляр поповера.

Значение заголовка по умолчанию, если title атрибут отсутствует.

Если задана функция, она будет вызываться со this ссылкой на элемент, к которому прикреплено всплывающее окно.

Имя	Тип	По умолчанию	Описание
animation	логический	true	Применить переход CSS fade к всплывающему окну
container	строка | элемент | ложный	false
content	строка | элемент | функция	»
html	логический	false	Вставьте HTML в всплывающее окно. Если false, innerText свойство будет использоваться для вставки содержимого в DOM. Используйте текст, если вас беспокоят XSS-атаки.
placement	строка | функция	‘right’
selector	строка | ложный	false	Если предусмотрен селектор, объекты всплывающих окон будут делегированы указанным целям. На практике это используется для включения всплывающих окон динамического HTML-контента. См. этот и информативный пример.
template	строка	‘ Базовый HTML для использования при создании всплывающего окна. Всплывающие окна title будут вставлены в .popover-header . Всплывающие окна content будут вставлены в .popover-body . .popover-arrow станет стрелкой всплывающего окна. Самый внешний элемент-оболочка должен иметь .popover класс.
title	строка | элемент | функция	»
trigger	строка	‘click’	Как запускается всплывающее окно — нажмите | парить | фокус | руководство по эксплуатации. Вы можете передать несколько триггеров; разделите их пробелом. manual нельзя комбинировать с каким-либо другим триггером.
offset	номер | строка		Смещение всплывающего окна относительно его цели. Дополнительные сведения см. В документации по смещению Popper.js .
fallbackPlacement	строка | массив	‘flip’	Разрешить указать, какую позицию Поппер будет использовать при откате. Дополнительные сведения см. В документации по поведению Popper.js.
boundary	строка | элемент	‘scrollParent’	Граница ограничения переполнения всплывающего окна. Принимает значения ‘viewport’ , ‘window’ , ‘scrollParent’ или ссылка на HTMLElement (JavaScript только). Для получения дополнительной информации см. документацию PreventOverflow Popper.js.
sanitize	логический	true	Включите или отключите дезинфекцию. Если активировано ‘template’ , ‘content’ и ‘title’ параметры будут очищены.
allowList	объект	Значение по умолчанию	Объект, содержащий разрешенные атрибуты и теги
sanitizeFn	null | функция	null	Здесь вы можете предоставить свою собственную функцию дезинфекции. Это может быть полезно, если вы предпочитаете использовать специальную библиотеку для выполнения очистки.
popperConfig	null | объект	null	Чтобы изменить конфигурацию Popper.js по умолчанию для Bootstrap, см. конфигурацию Popper.js

Атрибуты данных для отдельных всплывающих окон

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

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются к вызывающему, как только переход начнется, но до его завершения . Кроме того, вызов метода переходного компонента будет проигнорирован .

show (показать)

Показывает всплывающее окно элемента. Возврат к вызывающей стороне до фактического отображения всплывающего окна (т. Е. До того, как shown.bs.popover произойдет событие). Это считается «ручным» запуском всплывающего окна. Всплывающие окна, заголовок и содержимое которых имеют нулевую длину, никогда не отображаются.

hide (скрыть)

Скрывает всплывающее окно элемента. Возврат к вызывающей стороне до того, как всплывающее окно было фактически скрыто (то есть до того, как hidden.bs.popover событие произойдет). Это считается «ручным» запуском всплывающего окна.

toggle (переключить)

Переключает всплывающее окно элемента. Возврат к вызывающей стороне до того, как всплывающее окно будет фактически показано или скрыто (то есть до того, как произойдет событие shown.bs.popover или hidden.bs.popover ). Это считается «ручным» запуском всплывающего окна.

dispose

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

enable (включить)

Дает возможность отображения всплывающего окна элемента. По умолчанию всплывающие окна включены.

disable (отключить)

Удаляет возможность отображения всплывающего окна элемента. Всплывающее окно будет отображаться, только если оно будет повторно включено.

toggleEnabled

Переключает возможность отображения или скрытия всплывающего окна элемента.

update (обновить)

Обновляет позицию всплывающего окна элемента.

getInstance

Статический метод, который позволяет вам получить экземпляр всплывающего окна, связанный с элементом DOM

События

Тип события	Описание
show.bs.popover	Это событие срабатывает сразу после show вызова метода экземпляра.
показано.bs.popover	Это событие запускается, когда всплывающее окно становится видимым для пользователя (будет ожидать завершения переходов CSS).
hide.bs.popover	Это событие запускается сразу после hide вызова метода экземпляра.
hidden.bs.popover	Это событие запускается, когда всплывающее окно перестало быть скрытым от пользователя (будет ожидать завершения переходов CSS).
вставлен.bs.popover	Это событие запускается после show.bs.popover события, когда шаблон всплывающего окна был добавлен в DOM.

Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.

В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.

Источник

Компоненты

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

Информеры

Добавить небольшим содержанием наложения, как в iOS, к любому элементу на жилье вторичной информации.

Содержание

Обзор

Что нужно знать при использовании плагина пирог:

• Информеры полагаться на 3-й партии библиотеки Tether для позиционирования. Необходимо включить tether.min.js до bootstrap.js чтобы информеры на работу!
• Информеры требуют подсказка плагин как зависимость.
• Информеры опт-по соображениям производительности, так вы должны инициализировать их самостоятельно.
• Нулевой длины title и content значениями не будет показывать диалоговое окно.
• Укажите container: ‘body’ чтобы избежать проблем с рендерингом в более сложные компоненты (типа наших группы ввода, групп кнопки и т. д.).
• Пусковым информеры на скрытые элементы не будут работать.
• Информеры для .disabled или disabled элементы должны быть вызваны на элемент оболочки.
• При срабатывании из гиперссылок, которые охватывают несколько строк, информеры центрируется. Используйте white-space: nowrap; на , чтобы избежать этого поведения.

Получил все это? Отлично, давайте посмотрим, как они работают с некоторыми примерами.

Пример: включить информеры везде

Одним из способов инициализации все информеры на странице будет выбрать их data-toggle атрибута:

Пример: использование container опция

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

Статические пирог

Доступны четыре варианта: сверху, справа, снизу и выровнен по левому краю.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Источник