Պոպովերներ
Փաստաթղթեր և օրինակներ՝ Bootstrap popover-ներ, ինչպիսիք են iOS-ում հայտնաբերվածները, ձեր կայքի ցանկացած տարրին ավելացնելու համար:
Ընդհանուր ակնարկ
Բաներ, որոնք պետք է իմանալ popover plugin-ն օգտագործելիս.
- Պոպովերը ապավինում են երրորդ կողմի Popper գրադարանին դիրքավորման համար: Դուք պետք է ներառեք popper.min.js-ը bootstrap.js-ից առաջ կամ օգտագործեք
bootstrap.bundle.min.js
/bootstrap.bundle.js
որը պարունակում է Popper, որպեսզի popover-ները աշխատեն: - Popover-ները պահանջում են գործիքի հուշում հավելվածը որպես կախվածություն:
- Popover-ները միանում են կատարողականի նկատառումներով, այնպես որ դուք պետք է նախաստորագրեք դրանք ինքներդ :
- Զրոյական երկարությունը
title
ևcontent
արժեքները երբեք չեն ցուցադրի պոպովեր: - Նշեք
container: 'body'
՝ ավելի բարդ բաղադրիչներում խնդիրներ չարտադրելու համար (օրինակ՝ մեր մուտքային խմբերը, կոճակների խմբերը և այլն): - Թաքնված տարրերի վրա popover-ների գործարկումը չի աշխատի:
- Պոպովերը
.disabled
կամdisabled
տարրերը պետք է գործարկվեն փաթաթման տարրի վրա: - Երբ գործարկվում են խարիսխն��րից, որոնք փաթաթվում են մի քանի գծերի վրայով, պոպովերը կկենտրոնացվեն խարիսխների ընդհանուր լայնության միջև: Օգտագործեք
.text-nowrap
ձեր<a>
s-ի վրա՝ այս պահվածքից խուսափելու համար: - Popover-ները պետք է թաքցվեն նախքան դրանց համապատասխան տարրերը DOM-ից հեռացնելը:
- Popover-ները կարող են գործարկվել ստվերային DOM-ի ներսում գտնվող տարրի շնորհիվ:
prefers-reduced-motion
լրատվամիջոցների հարցումից: Տեսեք
մեր մատչելիության փաստաթղթերի կրճատված շարժման բաժինը :
Շարունակեք կարդալ՝ որոշ օրինակներով տեսնելու համար, թե ինչպես են աշխատում popover-ները:
Օրինակ. Միացնել popovers ամենուր
Էջի բոլոր popover-ները սկզբնավորելու եղանակներից մեկը կլինի դրանք ընտրելն իրենց 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
տարբերակը
Երբ դուք ունեք որոշ ոճեր ծնող տարրի վրա, որոնք խանգարում են popover-ին, դուք պետք է նշեք սովորական container
տարբերակ, որպեսզի դրա փոխարեն popover-ի 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>
Չորս ուղղություն
Հասանելի է չորս տարբերակ՝ վերև, աջ, ներքև և ձախ հավասարեցված: RTL-ում Bootstrap-ն օգտագործելիս ուղղությունները արտացոլվում են:
<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
ձգանը՝ անջատելու տարրից տարբերվող տարրի օգտատիրոջ հաջորդ կտտոցով popover-ները հեռացնելու համար:
Հերթական սեղմումով անջատելու համար պահանջվում է հատուկ նշում
Բրաուզերի և միջպլատֆորմների պատշաճ վարքի համար դուք պետք է օգտագործեք <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
ինտերակտիվ չեն, ինչը նշանակում է, որ օգտատերերը չեն կարող սավառնել կամ սեղմել դրանց վրա՝ բաց թողնելու համար (կամ գործիքի հուշում): Որպես ելք՝ դուք պետք է գործարկեք «popover»-ը փաթաթիչից <div>
կամ <span>
իդեալականորեն ստեղծված ստեղնաշարի վրա կենտրոնացված օգտագործելով tabindex="0"
.
Անջատված popover գործարկիչների դեպքում դուք կարող եք նաև նախընտրել data-bs-trigger="hover focus"
, որպեսզի popover-ը հայտնվի որպես անմիջական տեսողական արձագանք ձեր օգտատերերին, քանի որ նրանք չեն ակնկալում սեղմել անջատված տարրի վրա:
<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);
Օգտագործումը
Միացնել popover-ները JavaScript-ի միջոցով.
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Ստեղնաշարի և օժանդակ տեխնոլոգիաների օգտատերերի համար պոպովեր պատրաստելը
Որպեսզի ստեղնաշարի օգտատերերին թույլատրեք ակտիվացնել ձեր popover-ները, դուք պետք է դրանք ավելացնեք միայն HTML տարրերին, որոնք ավանդաբար կենտրոնացված են ստեղնաշարի վրա և ինտերակտիվ են (օրինակ՝ հղումները կամ ձևի կառավարումը): Թեև կամայական HTML տարրերը (օրինակ՝ <span>
s) կարող են կենտրոնացվել՝ ավելացնելով tabindex="0"
հատկանիշը, սա ստեղնաշարի օգտագործողների համար կավելացնի պոտենցիալ նյարդայնացնող և շփոթեցնող ներդիրներ ոչ ինտերակտիվ տարրերի վրա, և օժանդակ տեխնոլոգիաների մեծ մասը ներկայումս չի հայտարարում popover-ի բովանդակության մասին այս իրավիճակում: . Բացի այդ, մի ապավինեք բացառապես hover
որպես ձեր popover-ների գործարկիչին, քանի որ դա անհնարին կդարձնի դրանք գործարկել ստեղնաշարի օգտագործողների համար:
Թեև դուք կարող եք հարուստ, կառուցվածքային HTML-ը տեղադրել popover-ներում այս html
տարբերակով, մենք խստորեն խորհուրդ ենք տալիս խուսափել չափազանց մեծ քանակությամբ բովանդակություն ավելացնելուց: Պոպովերի ներկայիս աշխատանքի եղանակն այն է, որ ցուցադրվելուց հետո դրանց բովանդակությունը կապված է aria-describedby
հատկանիշով ձգանման տարրի հետ: Արդյունքում, popover-ի բովանդակության ամբողջությունը կհայտարարվի օժանդակ տեխնոլոգիաների օգտվողներին որպես մեկ երկար, անխափան հոսք:
Բացի այդ, թեև հնարավոր է նաև ներառել ինտերակտիվ կառավարումներ (օրինակ՝ ձևի տարրեր կամ հղումներ) ձեր popover-ում (ավելացնելով այս տարրերը allowList
թույլատրելի ատրիբուտների և պիտակների մեջ), տեղյակ եղեք, որ ներկայումս popover-ը չի կառավարում ստեղնաշարի ֆոկուսի կարգը: Երբ ստեղնաշարի օգտագործողը բացում է popover-ը, կենտրոնացումը մնում է գործարկող տարրի վրա, և քանի որ popover-ը սովորաբար անմիջապես չի հետևում փաստաթղթի կառուցվածքի ձգանին, երաշխիք չկա, որ առաջ շարժվելը/սեղմելըTABկտեղափոխի ստեղնաշարի օգտագործողին հենց popover-ի մեջ: Մի խոսքով, ինտերակտիվ հսկիչները պարզապես ավելացնելով popover-ին, ամենայն հավանականությամբ, այս հսկիչները անհասանելի/անօգտագործելի կդարձնեն ստեղնաշարից օգտվողների և օժանդակ տեխնոլոգիաների օգտագործողների համար, կամ առնվազն անտրամաբանական ընդհանուր ֆոկուսային կարգի կհանգեցնեն: Այս դեպքերում, փոխարենը մտածեք մոդալ երկխոսության օգտագործման մասին:
Ընտրանքներ
Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-bs-
, ինչպես data-bs-animation=""
. Համոզվեք, որ փոխել եք ընտրանքի անվանման պատյանների տեսակը camelCase-ից դեպի kebab-case՝ ընտրանքները տվյալների ատրիբուտների միջոցով փոխանցելիս: Օրինակ՝ օգտագործելու փոխարեն data-bs-customClass="beautifier"
օգտագործեք data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, և
allowList
տարբերակները չեն կարող տրամադրվել տվյալների ատրիբուտների միջոցով:
Անուն | Տիպ | Կանխադրված | Նկարագրություն |
---|---|---|---|
animation |
բուլյան | true |
Կիրառեք CSS fade անցում դեպի popover |
container |
լարային | տարր | կեղծ | false |
Ավելացնում է popover-ը կոնկրետ տարրի վրա: Օրինակ՝ |
content |
լարային | տարր | ֆունկցիան | '' |
Բովանդակության կանխադրված արժեքը, եթե Եթե տրված է ֆունկցիա, այն կկանչվի իր |
delay |
համարը | օբյեկտ | 0 |
Պոպովերի ցուցադրման և թաքցման հետաձգումը (ms) - չի տարածվում ձեռքով ձգանման տեսակի վրա Եթե համարը տրվում է, ապա ուշացումը կիրառվում է ինչպես թաքցնել/ցուցադրել Օբյեկտի կառուցվածքը հետևյալն է. |
html |
բուլյան | false |
Տեղադրեք HTML-ը popover-ի մեջ: Եթե կեղծ է, innerText գույքը կօգտագործվի DOM-ում բովանդակություն մտցնելու համար: Օգտագործեք տեքստ, եթե ձեզ անհանգստացնում են XSS հարձակումները: |
placement |
լարային | ֆունկցիան | 'right' |
Ինչպես տեղադրել popover - auto | վերև | ստորին | ձախ | ճիշտ. Երբ ֆունկցիան օգտագործվում է տեղաբաշխումը որոշելու համար, այն կանչվում է՝ որպես առաջին արգումենտ popover DOM հանգույցը, իսկ երկրորդը՝ DOM հանգույցը՝ գործարկող տարրը: Համատեքստը |
selector |
լարային | կեղծ | false |
Եթե ընտրիչ է տրամադրվում, popover օբյեկտները կփոխանցվեն նշված թիրախներին: Գործնականում սա օգտագործվում է դինամիկ HTML բովանդակության համար, որպեսզի ավելացվեն popovers: Տեսեք սա և տեղեկատվական օրինակ : |
template |
լար | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Բազային HTML-ն օգտագործելու համար popover-ը ստեղծելիս: The popover- The popover-
Ամենաարտաքին փաթաթման տարրը պետք է ունենա |
title |
լարային | տարր | ֆունկցիան | '' |
Վերնագրի կանխադրված արժեքը, եթե Եթե տրված է ֆունկցիա, այն կկանչվի իր |
trigger |
լար | 'click' |
Ինչպես է առաջանում popover-ը - սեղմեք | սավառնել | կենտրոնացում | ձեռնարկ. Դուք կարող եք անցնել մի քանի ձգան; առանձնացրեք դրանք բացատով: manual չի կարող համակցվել որևէ այլ ձգանի հետ: |
fallbackPlacements |
զանգված | ['top', 'right', 'bottom', 'left'] |
Սահմանեք հետադարձ տեղադրությունները՝ տրամադրելով զանգվածում տեղաբաշխումների ցանկը (նախապատվության կարգով): Լրացուցիչ տեղեկությունների համար տես Պոպերի վարքագծի փաստաթղթերը |
boundary |
լարային | տարր | 'clippingParents' |
Փոփովերի արտահոսքի սահմանափակման սահմանը (կիրառվում է միայն Popper-ի preventOverflow փոփոխիչի համար): Լռելյայն այն է 'clippingParents' և կարող է ընդունել HTMLElement հղում (միայն JavaScript-ի միջոցով): Լրացուցիչ տեղեկությունների համար տես Popper's detectOverflow փաստաթղթերը : |
customClass |
լարային | ֆունկցիան | '' |
Ավելացրեք դասեր popover-ին, երբ այն ցուցադրվում է: Նկատի ունեցեք, որ այս դասերը կավելացվեն ի լրումն ձևանմուշում նշված ցանկացած դասի: Մի քանի դասեր ավելացնելու համար դրանք առանձնացրեք բացատներով՝ Կարող եք նաև փոխանցել գործառույթ, որը պետք է վերադարձնի մեկ տող, որը պարունակում է լրացուցիչ դասերի անուններ: |
sanitize |
բուլյան | true |
Միացնել կամ անջատել ախտահանումը: Եթե ակտիվացվի 'template' , 'content' և 'title' ընտրանքները կախտահանվեն: Տեսեք ախտահանիչի բաժինը մեր JavaScript փաստաթղթերում : |
allowList |
օբյեկտ | Կանխադրված արժեք | Օբյեկտ, որը պարունակում է թույլատրելի ատրիբուտներ և պիտակներ |
sanitizeFn |
զրոյական | ֆունկցիան | null |
Այստեղ դուք կարող եք ապահովել ձեր սեփական ախտահանման գործառույթը: Սա կարող է օգտակար լինել, եթե նախընտրում եք օգտագործել հատուկ գրադարան՝ սանիտարական մաքրման համար: |
offset |
զանգված | լարային | ֆունկցիան | [0, 8] |
Պոպովերի օֆսեթ՝ իր թիրախի համեմատ: Դուք կարող եք տող փոխանցել տվյալների ատրիբուտներում ստորակետերով առանձնացված արժեքներով, ինչպիսիք են. Երբ ֆունկցիան օգտագործվում է օֆսեթը որոշելու համար, այն կանչվում է՝ որպես իր առաջին արգումենտ պարունակող popper-ի տեղադրումը, հղումը և popper-ի ուղղումները: Գործարկող տարրը DOM հանգույցը փոխանցվում է որպես երկրորդ արգումենտ: Ֆունկցիան պետք է վերադարձնի երկու թվերով զանգված՝ . Լրացուցիչ տեղեկությունների համար տես Պոպերի օֆսեթ փաստաթղթերը : |
popperConfig |
զրոյական | օբյեկտ | ֆունկցիան | null |
Bootstrap-ի լռելյայն Popper կոնֆիգուրացիան փոխելու համար տե՛ս Popper-ի կոնֆիգուրացիան : Երբ ֆունկցիան օգտագործվում է Popper կոնֆիգուրացիան ստեղծելու համար, այն կանչվում է օբյեկտի հետ, որը պարունակում է Bootstrap-ի լռելյայն Popper կոնֆիգուրացիան: Այն օգնում է ձեզ օգտագործել և միաձուլել կանխադրվածը ձեր սեփական կազմաձևի հետ: Ֆունկցիան պետք է վերադարձնի 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()
թաքցնել
Թաքցնում է տարրի պոպովերը: Վերադառնում է զանգահարողին նախքան popover-ը իրականում թաքցվել է (այսինքն՝ նախքան hidden.bs.popover
իրադարձությունը տեղի ունենալը): Սա համարվում է պոպովերի «մեխանիկական» հրահրում:
myPopover.hide()
փոխարկել
Անջատում է տարրի popover-ը: Վերադառնում է զանգահարողին նախքան popover-ն իրականում ցուցադրվել կամ թաքցվել է (այսինքն՝ նախքան իրադարձությունը shown.bs.popover
կամ hidden.bs.popover
իրադարձությունը տեղի ունենալը): Սա համարվում է պոպովերի «մեխանիկական» հրահրում:
myPopover.toggle()
տնօրինել
Թաքցնում և ոչնչացնում է տարրի popover-ը (Հեռացնում է DOM տարրի պահպանված տվյալները): Պոպովերը, որոնք օգտագործում են պատվիրակում (որոնք ստեղծվում են selector
տարբերակի միջոցով ) չեն կարող անհատապես ոչնչացվել հետնորդ ձգան տարրերի վրա:
myPopover.dispose()
միացնել
Տարրի popover-ին ցուցադրվելու հնարավորություն է տալիս: Popover-ները լռելյայն միացված են:
myPopover.enable()
անջատել
Հեռացնում է տարրի popover-ի ցուցադրման հնարավորությունը: Popover-ը հնարավոր կլինի ցուցադրել միայն այն դեպքում, եթե այն նորից միացվի:
myPopover.disable()
toggleՄիացված է
Անջատում է տարրի popover-ի ցուցադրման կամ թաքցման հնարավորությունը:
myPopover.toggleEnabled()
թարմացնել
Թարմացնում է տարրի popover-ի դիրքը:
myPopover.update()
getInstance
Ստատիկ մեթոդ, որը թույլ է տալիս ստանալ popover օրինակ՝ կապված DOM տարրի հետ
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
Ստատիկ մեթոդ, որը թույլ է տալիս ստանալ DOM տարրի հետ կապված popover օրինակը կամ ստեղծել նորը, եթե այն սկզբնավորվել չէ
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Իրադարձություններ
Միջոցառման տեսակը | Նկարագրություն |
---|---|
show.bs.popover | Այս իրադարձությունը գործարկվում է անմիջապես, երբ show կանչվում է օրինակի մեթոդը: |
ցուցադրված.bs.popover | Այս իրադարձությունը գործարկվում է, երբ popover-ը տեսանելի է դառնում օգտատիրոջը (կսպասի CSS անցումների ավարտին): |
hide.bs.popover | Այս իրադարձությունը գործարկվում է անմիջապես, երբ hide կանչվում է օրինակի մեթոդը: |
թաքնված.bs.popover | Այս իրադարձությունը գործարկվում է, երբ popover-ն ավարտում է օգտագործողից թաքցնելը (կսպասի CSS անցումների ավարտին): |
տեղադրված.bs.popover | Այս միջոցառումը գործարկվում է այն show.bs.popover իրադարձությունից հետո, երբ popover ձևանմուշը ավելացվի DOM-ում: |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})