Поповери
Документација и примери за додавање Bootstrap popovers, како оние што се наоѓаат во iOS, на кој било елемент на вашата страница.
Работи што треба да ги знаете кога го користите приклучокот за поповер:
- Поповерите се потпираат на библиотеката од трета страна Popper.js за позиционирање. Мора да вклучите popper.min.js пред bootstrap.js или да користите
bootstrap.bundle.min.js
/bootstrap.bundle.js
што содржи Popper.js за да може поповерите да функционираат! - Поповерите бараат додаток за совети за алатки како зависност.
- Ако го градите нашиот JavaScript од извор, тоа бара
util.js
. - Поповерите се избираат поради перформанси, па мора сами да ги иницијализирате .
- Нулта должина
title
иcontent
вредности никогаш нема да покажат поповер. - Наведете
container: 'body'
за да избегнете рендерирање проблеми во посложени компоненти (како што се нашите влезни групи, групи копчиња итн.). - Активирањето поповери на скриените елементи нема да работи.
- Поповер за
.disabled
илиdisabled
елементи мора да се активираат на елементот за обвивка. - Кога ќе се активираат од сидра што се обвиткуваат преку повеќе линии, поповерите ќе бидат центрирани помеѓу вкупната ширина на сидрата. Користете
.text-nowrap
го вашиот<a>
s за да го избегнете ова однесување. - Поповерите мора да се сокријат пред нивните соодветни елементи да бидат отстранети од DOM.
Продолжете да читате за да видите како функционираат поповерите со некои примери.
Еден начин да се иницијализираат сите поповери на страницата би било да ги изберете според нивниот data-toggle
атрибут:
Кога имате некои стилови на родителски елемент што се мешаат со поповер, ќе сакате да наведете приспособување container
така што HTML-от на поповерот да се појавува во тој елемент наместо тоа.
Достапни се четири опции: горе, десно, долу и лево порамнети.
Користете го focus
активирањето за да ги отфрлите поповерите при следното кликнување на корисникот на различен елемент од елементот за префрлување.
Потребна е специфична ознака за отфрлање-на-следниот-клик
За правилно однесување меѓу прелистувачите и меѓуплатформите, мора да ја користите <a>
ознаката, а не<button>
ознаката, а исто така мора да вклучите tabindex
атрибут.
Елементите со disabled
атрибут не се интерактивни, што значи дека корисниците не можат да лебдат или да кликнат на нив за да активираат поповер (или совет за алатка). Како заобиколување, ќе сакате да го активирате поповерот од обвивка <div>
или <span>
и да го отфрлите pointer-events
оневозможениот елемент.
За оневозможени предизвикувачи на поповер, исто така може да претпочитате data-trigger="hover"
поповерот да се појавува како непосредна визуелна повратна информација за вашите корисници бидејќи тие можеби не очекуваат да кликнат на оневозможен елемент.
Овозможете popovers преку JavaScript:
Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-
, како во data-animation=""
.
Име | Тип | Стандардно | Опис |
---|---|---|---|
анимација | булови | вистина | Примени CSS Fade транзиција на поповер |
контејнер | низа | елемент | лажни | лажни | Го додава поповерот на одреден елемент. Пример: |
содржина | низа | елемент | функција | '' | Стандардна вредност на содржината ако Ако е дадена функција, таа ќе се повика со нејзиното |
одложување | број | објект | 0 | Одложено прикажување и сокривање на поповер (ms) - не важи за рачниот тип на активирач Ако е доставен број, одложувањето се применува и на двете сокриј/прикажи Структурата на објектот е: |
html | булови | лажни | Вметнете HTML во поповерот. Ако е неточно, text методот на jQuery ќе се користи за вметнување содржина во DOM. Користете текст ако сте загрижени за нападите на XSS. |
поставување | низа | функција | 'право' | Како да се позиционира поповер - авто | врвот | дното | лево | право. Кога функцијата се користи за определување на поставеноста, таа се повикува со јазол DOM поповер како прв аргумент и активирачки елемент DOM јазол како негов втор. Контекстот |
селектор | низа | лажни | лажни | Ако е обезбеден селектор, објектите за поповер ќе бидат делегирани на наведените цели. Во пракса, ова се користи за да се овозможи динамична HTML содржина да има додадени поповери. Видете го ова и информативен пример . |
шаблон | низа | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Основен HTML што треба да се користи при креирање на поповер. Поповерот Поповерот
Најоддалечениот елемент за обвивка треба да ја има |
Наслов | низа | елемент | функција | '' | Стандардна вредност на насловот ако Ако е дадена функција, таа ќе се повика со нејзиното |
чкрапало | низа | 'кликни' | Како се активира поповер - кликнете | лебди | фокус | прирачник. Може да поминете повеќе предизвикувачи; одделете ги со празно место. manual не може да се комбинира со кој било друг активирач. |
офсет | број | низа | 0 | Поместување на поповер во однос на неговата цел. За повеќе информации погледнете ги офсет документите на Popper.js . |
резервна поставеност | низа | низа | 'превртување' | Дозволете да одредите која позиција ќе ја користи Попер при резервна копија. За повеќе информации погледнете ги документите за однесувањето на Popper.js |
граница | низа | елемент | 'scrollParent' | Границата на ограничување на прелевање на поповер. Ги прифаќа вредностите на 'viewport' , 'window' , 'scrollParent' или референца на HTMLElement (само JavaScript). За повеќе информации, погледнете ги документите за спречување на превртување на Popper.js . |
Атрибути на податоци за поединечни поповери
Опциите за поединечни поповери може алтернативно да се специфицираат преку употреба на атрибути на податоци, како што е објаснето погоре.
Асинхрони методи и транзиции
Сите API методи се асинхрони и започнуваат транзиција . Тие се враќаат кај повикувачот штом ќе започне транзицијата, но пред да заврши . Дополнително, повик на метод на компонента во транзиција ќе се игнорира .
Погледнете ја нашата JavaScript документација за повеќе информации.
Иницијализира поповери за колекција на елементи.
Открива популарност на елементот. Се враќа кај повикувачот пред да се прикаже поповерот (т.е. пред да се shown.bs.popover
случи настанот). Ова се смета за „рачно“ активирање на поповер. Поповерите чиишто наслов и содржина се со нулта должина никогаш не се прикажуваат.
Го крие поповерот на елементот. Се враќа на повикувачот пред да се сокрие поповерот (т.е. пред да се hidden.bs.popover
случи настанот). Ова се смета за „рачно“ активирање на поповер.
Вклучува исклучување на елементот. Се враќа на повикувачот пред да се прикаже или скрие пукачот (т.е. пред да се случи настанот shown.bs.popover
или hidden.bs.popover
настанот). Ова се смета за „рачно“ активирање на поповер.
Сокрива и уништува поповер на елементот. Поповерите што користат делегирање (кои се креирани со опцијата selector
) не можат да се уништат поединечно на елементите за потомство.
Дава можност за прикажување на popover на елементот. Поповерите се стандардно овозможени.
Ја отстранува можноста за прикажување на popover на елементот. Поповерот ќе може да се прикаже само ако е повторно овозможен.
Ја исклучува можноста за прикажување или сокривање на popover на елементот.
Ја ажурира позицијата на поповер на елементот.
Тип на настан | Опис |
---|---|
шоу.бс.поповер | Овој настан се вклучува веднаш кога show ќе се повика методот на пример. |
прикажани.бс.поповер | Овој настан се активира кога поповерот е видлив за корисникот (ќе чека да се завршат транзициите на CSS). |
скриј.бс.поповер | Овој настан се активира веднаш кога hide ќе се повика методот на пример. |
скриени.бс.поповер | Овој настан се активира кога поповерот ќе заврши со криење од корисникот (ќе почека да се завршат транзициите на CSS). |
вметната.бс.поповер | Овој настан се активира по show.bs.popover настанот кога шаблонот за поповер е додаден во DOM. |