Поповери
Документација и примери за додавање Bootstrap popovers, како оние што се наоѓаат во iOS, на кој било елемент на вашата страница.
Преглед
Работи што треба да ги знаете кога го користите приклучокот за поповер:
- Поповерите се потпираат на библиотеката од трета страна Popper за позиционирање. Мора да вклучите popper.min.js пред bootstrap.js или да користите
bootstrap.bundle.min.js
/bootstrap.bundle.js
што содржи Popper за да може поповерите да функционираат! - Поповерите бараат додаток за совети за алатки како зависност.
- Поповерите се избираат поради перформанси, па мора сами да ги иницијализирате .
- Нулта должина
title
иcontent
вредности никогаш нема да покажат поповер. - Наведете
container: 'body'
за да избегнете рендерирање проблеми во посложени компоненти (како што се нашите влезни групи, групи копчиња итн.). - Активирањето поповери на скриените елементи нема да работи.
- Поповер за
.disabled
илиdisabled
елементи мора да се активираат на елементот за обвивка. - Кога ќе се активираат од сидра што се обвиткуваат преку повеќе линии, поповерите ќе бидат центрирани помеѓу вкупната ширина на сидрата. Користете
.text-nowrap
го вашиот<a>
s за да го избегнете ова однесување. - Поповерите мора да се сокријат пред нивните соодветни елементи да бидат отстранети од DOM.
- Поповерите може да се активи��аат благодарение на елемент во сенка DOM.
prefers-reduced-motion
медиумското барање. Погледнете го делот за
намалено движење од нашата документација за пристапност .
Продолжете да читате за да видите како функционираат поповерите со некои примери.
Пример: овозможете popovers насекаде
Еден начин да се иницијализираат сите поповери на страницата би било да ги изберете според нивниот data-bs-toggle
атрибут:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Пример: Користење на container
опцијата
Кога имате некои стилови на родителски елемент што се мешаат со поповер, ќе сакате да наведете приспособување container
така што HTML-от на поповерот да се појавува во тој елемент наместо тоа.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Пример
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Четири насоки
Достапни се четири опции: горе, десно, долу и лево порамнети. Насоките се пресликуваат кога се користи Bootstrap во RTL.
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button>
Отфрли на следниот клик
Користете го focus
активирањето за да ги отфрлите поповерите при следното кликнување на корисникот на различен елемент од елементот за префрлување.
Потребна е специфична ознака за отфрлање-на-следниот-клик
За правилно однесување меѓу прелистувачите и меѓуплатформите, мора да ја користите <a>
ознаката, а не<button>
ознаката, а исто така мора да вклучите tabindex
атрибут.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
trigger: 'focus'
})
Оневозможени елементи
Елементите со disabled
атрибут не се интерактивни, што значи дека корисниците не можат да лебдат или да кликнат на нив за да активираат поповер (или совет за алатка). Како решение, ќе сакате да го активирате поповерот од обвивка <div>
или <span>
идеално направено фокусирање на тастатура користејќи tabindex="0"
.
За оневозможени предизвикувачи на поповер, исто така може да претпочитате data-bs-trigger="hover focus"
поповерот да се појавува како непосредна визуелна повратна информација за вашите корисници бидејќи тие можеби не очекуваат да кликнат на оневозможен елемент.
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
Сас
Променливи
$popover-font-size: $font-size-sm;
$popover-bg: $white;
$popover-max-width: 276px;
$popover-border-width: $border-width;
$popover-border-color: rgba($black, .2);
$popover-border-radius: $border-radius-lg;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow: $box-shadow;
$popover-header-bg: shade-color($popover-bg, 6%);
$popover-header-color: $headings-color;
$popover-header-padding-y: .5rem;
$popover-header-padding-x: $spacer;
$popover-body-color: $body-color;
$popover-body-padding-y: $spacer;
$popover-body-padding-x: $spacer;
$popover-arrow-width: 1rem;
$popover-arrow-height: .5rem;
$popover-arrow-color: $popover-bg;
$popover-arrow-outer-color: fade-in($popover-border-color, .05);
Употреба
Овозможете popovers преку JavaScript:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Да се направат поповерите да работат за корисници на тастатура и помошна технологија
За да им дозволите на корисниците на тастатурата да ги активираат вашите поповери, треба да ги додавате само во HTML елементи кои традиционално се фокусирани на тастатурата и интерактивни (како што се врски или контроли на форма). Иако произволните HTML-елементи (како што се <span>
s) може да се направат фокусирани со додавање на tabindex="0"
атрибутот, ова ќе додаде потенцијално досадни и збунувачки таб-стопови на неинтерактивни елементи за корисниците на тастатурата, а повеќето помошни технологии моментално не ја објавуваат содржината на поповер во оваа ситуација . Дополнително, немојте да се потпирате само на hover
како активирач за вашите поповери, бидејќи тоа ќе го оневозможи нивното активирање за корисниците на тастатура.
Иако можете да вметнете богат, структуриран HTML во поповери со html
опцијата, ние силно препорачуваме да избегнувате да додавате прекумерна количина на содржина. Начинот на кој поповерите моментално функционираат е тоа што, откако ќе се прикажат, нивната содржина е врзана за активирачкиот елемент со aria-describedby
атрибутот. Како резултат на тоа, целата содржина на поповер ќе им биде објавена на корисниците на помошната технологија како еден долг, непрекинат пренос.
Дополнително, иако е можно да вклучите и интерактивни контроли (како што се елементи на форма или врски) во вашиот popover (со додавање на овие елементи во allowList
дозволените атрибути и ознаки), имајте предвид дека моментално поповерот не управува со редоследот на фокусирање на тастатурата. Кога корисникот на тастатурата отвора поповер, фокусот останува на активирачкиот елемент и бидејќи пукањето обично не го следи веднаш активирањето во структурата на документот, нема гаранција дека се движи напред/притискаTABќе премести корисник на тастатура во самиот поповер. Накратко, едноставното додавање на интерактивни контроли на поповер веројатно ќе ги направи овие контроли недостапни/неупотребливи за корисниците на тастатура и корисниците на помошни технологии, или во најмала рака ќе направи нелогичен целокупен редослед на фокусирање. Во овие случаи, размислете наместо тоа да користите модален дијалог.
Опции
Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-bs-
, како во data-bs-animation=""
. Погрижете се да го смените типот на буквата на името на опцијата од camelCase во ќебап-футрола кога ги пренесувате опциите преку атрибути на податоци. На пример, наместо да користите data-bs-customClass="beautifier"
, користете data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, и
allowList
не може да се обезбедат со користење на атрибути на податоци.
Име | Тип | Стандардно | Опис |
---|---|---|---|
animation |
булови | true |
Примени CSS Fade транзиција на поповер |
container |
низа | елемент | лажни | false |
Го додава поповерот на одреден елемент. Пример: |
content |
низа | елемент | функција | '' |
Стандардна вредност на содржината ако Ако е дадена функција, таа ќе се повика со нејзиното |
delay |
број | објект | 0 |
Одложено прикажување и сокривање на поповер (ms) - не важи за рачниот тип на активирач Ако е доставен број, одложувањето се применува и на двете сокриј/прикажи Структурата на објектот е: |
html |
булови | false |
Вметнете HTML во поповерот. Ако е неточно, innerText имотот ќе се користи за вметнување содржина во DOM. Користете текст ако сте загрижени за нападите на XSS. |
placement |
низа | функција | 'right' |
Како да се позиционира поповер - авто | врвот | дното | лево | право. Кога функцијата се користи за определување на поставеноста, таа се повикува со јазол DOM поповер како прв аргумент и активирачки елемент DOM јазол како негов втор. Контекстот |
selector |
низа | лажни | false |
Ако е обезбеден селектор, објектите за поповер ќе бидат делегирани на наведените цели. Во пракса, ова се користи за да се овозможи динамична HTML содржина да има додадени поповери. Видете го ова и информативен пример . |
template |
низа | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Основен HTML што треба да се користи при креирање на поповер. Поповерот Поповерот
Најоддалечениот елемент за обвивка треба да ја има |
title |
низа | елемент | функција | '' |
Стандардна вредност на насловот ако Ако е дадена функција, таа ќе се повика со нејзиното |
trigger |
низа | 'click' |
Како се активира поповер - кликнете | лебди | фокус | прирачник. Може да поминете повеќе предизвикувачи; одделете ги со празно место. manual не може да се комбинира со кој било друг активирач. |
fallbackPlacements |
низа | ['top', 'right', 'bottom', 'left'] |
Дефинирајте резервни пласмани со обезбедување листа на сместувања во низа (по редослед на претпочитање). За повеќе информации погледнете ги документите за однесувањето на Попер |
boundary |
низа | елемент | 'clippingParents' |
Границата на ограничување за прелевање на поповерот (важи само за модификаторот на Popper preventOverflow). Стандардно, тоа е 'clippingParents' и може да прифати референца HTMLElement (само преку JavaScript). За повеќе информации погледнете ги Popper's detectOverflow docs . |
customClass |
низа | функција | '' |
Додајте класи на поповер кога ќе се прикаже. Имајте предвид дека овие класи ќе се додадат како додаток на класите наведени во шаблонот. За да додадете повеќе класи, одделете ги со празни места: Можете исто така да пренесете функција која треба да врати една низа што содржи дополнителни имиња на класи. |
sanitize |
булови | true |
Овозможете или оневозможете ја дезинфекцијата. Ако се активира 'template' , 'content' и 'title' опциите ќе се дезинфицираат. Погледнете го делот за дезинфекција во нашата JavaScript документација . |
allowList |
објект | Стандардна вредност | Објект кој содржи дозволени атрибути и ознаки |
sanitizeFn |
нула | функција | null |
Овде можете да обезбедите своја сопствена функција за дезинфекција. Ова може да биде корисно ако претпочитате да користите посебна библиотека за да извршите дезинфекција. |
offset |
низа | низа | функција | [0, 8] |
Поместување на поповер во однос на неговата цел. Можете да пренесете низа во атрибути на податоци со вредности разделени со запирка како: Кога функцијата се користи за определување на поместувањето, таа се повикува со објект што го содржи поставувањето на попер, референцата и попер рекциите како нејзин прв аргумент. Активирачкиот елемент DOM јазол се пренесува како втор аргумент. Функцијата мора да врати низа со два броја: . За повеќе информации погледнете ги офсет документите на Попер . |
popperConfig |
нула | објект | функција | null |
За да ја промените стандардната конфигурација на Popper на Bootstrap, видете ја конфигурацијата на Popper . Кога функцијата се користи за креирање на Popper конфигурацијата, таа се повикува со објект што ја содржи стандардната Popper конфигурација на Bootstrap. Тоа ви помага да ги користите и споите стандардните со вашата сопствена конфигурација. Функцијата мора да врати конфигурациски објект за Popper. |
Атрибути на податоци за поединечни поповери
Опциите за поединечни поповери може алтернативно да се специфицираат преку употреба на атрибути на податоци, како што е објаснето погоре.
Користење на функцијата соpopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Методи
Асинхрони методи и транзиции
Сите API методи се асинхрони и започнуваат транзиција . Тие се враќаат кај повикувачот штом ќе започне транзицијата, но пред да заврши . Дополнително, повик на метод на компонента во транзиција ќе се игнорира .
Погледнете ја нашата JavaScript документација за повеќе информации .
покажуваат
Открива популарност на елементот. Се враќа кај повикувачот пред да се прикаже поповерот (т.е. пред да се shown.bs.popover
случи настанот). Ова се смета за „рачно“ активирање на поповер. Поповерите чиј наслов и содржина се со нулта должина никогаш не се прикажуваат.
myPopover.show()
крие
Го крие поповерот на елементот. Се враќа на повикувачот пред да се сокрие поповерот (т.е. пред да се hidden.bs.popover
случи настанот). Ова се смета за „рачно“ активирање на поповер.
myPopover.hide()
префрли
Вклучува исклучување на елементот. Се враќа на повикувачот пред да се прикаже или скрие пукачот (т.е. пред да се случи настанот shown.bs.popover
или hidden.bs.popover
настанот). Ова се смета за „рачно“ активирање на поповер.
myPopover.toggle()
располага
Сокрива и уништува поповер на елементот (Ги отстранува зачуваните податоци на елементот DOM). Поповерите што користат делегирање (кои се креирани со опцијата selector
) не можат да се уништат поединечно на елементите за потомство.
myPopover.dispose()
овозможи
Дава можност за прикажување на popover на елементот. Поповерите се стандардно овозможени.
myPopover.enable()
оневозможи
Ја отстранува можноста за прикажување на popover на елементот. Поповерот ќе може да се прикаже само ако е повторно овозможен.
myPopover.disable()
вклучи Овозможено
Ја исклучува можноста за прикажување или сокривање на popover на елементот.
myPopover.toggleEnabled()
ажурирање
Ја ажурира позицијата на поповер на елементот.
myPopover.update()
getInstance
Статички метод кој ви овозможува да го добиете примерокот на поповер поврзан со елементот DOM
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
Статички метод кој ви овозможува да го добиете примерокот на поповер поврзан со елемент DOM или да создадете нов во случај да не е иницијализиран
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Настани
Тип на настан | Опис |
---|---|
шоу.бс.поповер | Овој настан се вклучува веднаш кога show ќе се повика методот на пример. |
прикажани.бс.поповер | Овој настан се активира кога поповерот е видлив за корисникот (ќе чека да се завршат транзициите на CSS). |
скриј.бс.поповер | Овој настан се активира веднаш кога hide ќе се повика методот на пример. |
скриени.бс.поповер | Овој настан се активира кога поповерот ќе заврши со криење од корисникот (ќе почека да се завршат транзициите на CSS). |
вметната.бс.поповер | Овој настан се активира по show.bs.popover настанот кога шаблонот за поповер е додаден во DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})