Popovers
Iwe ati awọn apẹẹrẹ fun fifi awọn agbejade Bootstrap kun, bii awọn ti a rii ni iOS, si eyikeyi eroja lori aaye rẹ.
Akopọ
Awọn nkan lati mọ nigba lilo ohun itanna popover:
- Popovers gbarale ile-ikawe ẹgbẹ kẹta Popper fun ipo. O gbọdọ pẹlu popper.min.js ṣaaju bootstrap.js tabi lo
bootstrap.bundle.min.js
/bootstrap.bundle.js
eyiti o ni Popper ninu lati le ṣiṣẹ! - Popovers nilo ohun itanna ọpa bi igbẹkẹle kan.
- Popovers ti yọkuro fun awọn idi iṣẹ ṣiṣe, nitorinaa o gbọdọ ṣe ipilẹṣẹ wọn funrararẹ .
- Gigun odo
title
aticontent
awọn iye kii yoo ṣe afihan agbejade kan. - Pato
container: 'body'
lati yago fun awọn iṣoro ṣiṣe ni awọn paati eka diẹ sii (bii awọn ẹgbẹ titẹ sii, awọn ẹgbẹ bọtini, ati bẹbẹ lọ). - Nfa popovers lori awọn eroja ti o farapamọ kii yoo ṣiṣẹ.
- Popovers fun
.disabled
tabidisabled
eroja gbọdọ wa ni jeki on a wrapper ano. - Nigbati o ba fa lati awọn ìdákọró ti o fi ipari si awọn laini pupọ, awọn popovers yoo wa ni aarin laarin iwọn apapọ awọn ìdákọró. Lo
.text-nowrap
lori rẹ<a>
s lati yago fun yi ihuwasi. - Popovers gbọdọ wa ni pamọ ṣaaju ki o to yọkuro awọn eroja ti o baamu wọn lati DOM.
- Popovers le ti wa ni jeki ọpẹ si ohun ano inu a ojiji DOM.
prefers-reduced-motion
ibeere media. Wo
apakan išipopada ti o dinku ti iwe iraye si wa .
Jeki kika lati wo bi popovers ṣe n ṣiṣẹ pẹlu awọn apẹẹrẹ diẹ.
Apeere: Mu popovers ṣiṣẹ nibi gbogbo
Ọna kan lati bẹrẹ gbogbo awọn agbejade lori oju-iwe kan yoo jẹ lati yan wọn nipasẹ data-bs-toggle
ẹda wọn:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Apeere: Lilo container
aṣayan
Nigba ti o ba ni diẹ ninu awọn aza lori kan obi ano ti o dabaru pẹlu a popover, o yoo fẹ lati pato kan aṣa container
ki HTML popover han laarin ti ano dipo.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Apeere
<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>
Awọn itọnisọna mẹrin
Awọn aṣayan mẹrin wa: oke, ọtun, isalẹ, ati ti osi. Awọn itọnisọna jẹ digi nigba lilo Bootstrap ni 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>
Yọọ kuro ni titẹ atẹle
Lo focus
okunfa lati yọ awọn popovers kuro lori titẹ atẹle olumulo ti nkan ti o yatọ ju ano toggle.
Siṣamisi kan pato nilo fun yiyọ kuro-lori-tẹle
Fun aṣawakiri agbelebu ti o tọ ati ihuwasi Syeed, o gbọdọ lo <a>
tag, kii ṣe tag <button>
, ati pe o tun gbọdọ ni abuda kan 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'
})
Awọn eroja alaabo
Awọn eroja pẹlu disabled
ẹya kii ṣe ibaraenisepo, afipamo pe awọn olumulo ko le rababa tabi tẹ wọn lati ṣe okunfa agbejade (tabi ohun elo irinṣẹ). Gẹgẹbi iṣẹ-ṣiṣe, iwọ yoo fẹ lati ma ṣe okunfa popover lati inu iwe-ipamọ <div>
tabi <span>
, ti a ṣe ni aifọwọyi-idojukọ keyboard nipa lilo tabindex="0"
.
Fun awọn okunfa popover alaabo, o tun le fẹ data-bs-trigger="hover focus"
ki popover naa han bi esi wiwo lẹsẹkẹsẹ si awọn olumulo rẹ nitori wọn le ma nireti lati tẹ lori nkan alaabo kan.
<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>
Sass
Awọn oniyipada
$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);
Lilo
Mu awọn agbejade ṣiṣẹ nipasẹ JavaScript:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Ṣiṣe popovers ṣiṣẹ fun keyboard ati awọn olumulo imọ-ẹrọ iranlọwọ
Lati gba awọn olumulo keyboard laaye lati mu awọn agbejade rẹ ṣiṣẹ, o yẹ ki o ṣafikun wọn nikan si awọn eroja HTML ti o jẹ aifọwọyi ti aṣa ati ibaraenisọrọ (gẹgẹbi awọn ọna asopọ tabi awọn idari fọọmu). Botilẹjẹpe awọn eroja HTML lainidii (gẹgẹbi awọn <span>
s) le jẹ ki o ni idojukọ nipa fifi tabindex="0"
ẹda naa kun, eyi yoo ṣafikun awọn iduro didanubi ati idamu lori awọn eroja ti kii ṣe ibaraenisepo fun awọn olumulo keyboard, ati ọpọlọpọ awọn imọ-ẹrọ iranlọwọ lọwọlọwọ ko kede akoonu popover ni ipo yii. . Ni afikun, maṣe gbarale hover
bi okunfa fun awọn agbejade rẹ, nitori eyi yoo jẹ ki wọn ko ṣee ṣe lati ma ṣe okunfa fun awọn olumulo keyboard.
Lakoko ti o le fi ọrọ sii, HTML ti iṣeto ni awọn agbejade pẹlu html
aṣayan, a ṣeduro ni iyanju pe ki o yago fun fifi iye akoonu ti o pọ ju. Awọn ọna popovers Lọwọlọwọ ṣiṣẹ ni wipe, ni kete ti han, wọn akoonu ti wa ni ti so si awọn okunfa ano pẹlu awọn aria-describedby
ro pe. Bi abajade, gbogbo akoonu popover ni yoo kede si awọn olumulo imọ-ẹrọ iranlọwọ bi ṣiṣan gigun kan, ṣiṣan ti ko ni idilọwọ.
Ni afikun, lakoko ti o ṣee ṣe lati tun pẹlu awọn iṣakoso ibaraenisepo (gẹgẹbi awọn eroja fọọmu tabi awọn ọna asopọ) ninu agbejade rẹ (nipa fifi awọn eroja wọnyi kun awọn abuda allowList
ti a gba laaye ati awọn afi), ṣe akiyesi pe lọwọlọwọ popover ko ṣakoso aṣẹ idojukọ keyboard. Nigbati olumulo keyboard ba ṣii agbejade kan, idojukọ wa lori nkan ti o nfa, ati pe bi popover nigbagbogbo ko ṣe tẹle okunfa lẹsẹkẹsẹ ninu eto iwe, ko si iṣeduro pe gbigbe siwaju / titẹTAByoo gbe olumulo keyboard sinu popover funrararẹ. Ni kukuru, fifi awọn iṣakoso ibaraenisepo pọ si agbejade kan ṣee ṣe lati jẹ ki awọn idari wọnyi ko ṣee de / ko ṣee ṣe fun awọn olumulo keyboard ati awọn olumulo ti awọn imọ-ẹrọ iranlọwọ, tabi ni o kere pupọ ṣe fun aṣẹ idojukọ gbogbogbo ti ko logbon. Ni awọn iṣẹlẹ wọnyi, ronu nipa lilo ibaraẹnisọrọ modal dipo.
Awọn aṣayan
Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-bs-
, bi ninu data-bs-animation=""
. Rii daju lati yi iru ọran ti orukọ aṣayan pada lati camelCase si kebab-case nigba gbigbe awọn aṣayan nipasẹ awọn abuda data. Fun apẹẹrẹ, dipo lilo data-bs-customClass="beautifier"
, lo data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, ati
allowList
awọn aṣayan ko ṣe pese pẹlu awọn abuda data.
Oruko | Iru | Aiyipada | Apejuwe |
---|---|---|---|
animation |
boolian | true |
Waye iyipada ipare CSS kan si agbejade |
container |
okun | ano | eke | false |
Ṣafikun popover si nkan kan pato. Apeere |
content |
okun | ano | iṣẹ | '' |
Iwọn akoonu aiyipada ti Ti a ba fun iṣẹ kan, yoo pe pẹlu |
delay |
nọmba | nkan | 0 |
Idaduro iṣafihan ati fifipamo popover (ms) - ko kan si iru okunfa afọwọṣe Ti nọmba kan ba pese, idaduro jẹ lilo si tọju/fihan mejeeji Eto nkan jẹ: |
html |
boolian | false |
Fi HTML sinu agbejade. Ti o ba jẹ eke, innerText ohun-ini yoo ṣee lo lati fi akoonu sii sinu DOM. Lo ọrọ ti o ba ni aniyan nipa awọn ikọlu XSS. |
placement |
okun | iṣẹ | 'right' |
Bawo ni lati ipo awọn popover - auto | oke | isalẹ | osi | ọtun. Nigbati a ba lo iṣẹ kan lati pinnu ipo, o pe pẹlu agbejade DOM agbejade bi ariyanjiyan akọkọ rẹ ati node DOM ti o nfa bi keji rẹ. A |
selector |
okun | eke | false |
Ti o ba ti pese oluyan, awọn ohun agbejade yoo jẹ aṣoju si awọn ibi-afẹde ti a pato. Ni iṣe, eyi ni a lo lati mu akoonu HTML ti o ni agbara lati ni afikun awọn agbejade. Wo eyi ati apẹẹrẹ alaye . |
template |
okun | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
HTML mimọ lati lo nigba ṣiṣẹda popover. Awọn popover's Awọn popover's
Awọn outermost wrapper ano yẹ ki o ni awọn |
title |
okun | ano | iṣẹ | '' |
Iwọn akọle aiyipada ti Ti a ba fun iṣẹ kan, yoo pe pẹlu |
trigger |
okun | 'click' |
Bawo ni popover ti wa ni jeki - tẹ | rababa | idojukọ | Afowoyi. O le ṣe ọpọlọpọ awọn okunfa; ya wọn pẹlu aaye kan. manual ko le wa ni idapo pelu eyikeyi miiran okunfa. |
fallbackPlacements |
orun | ['top', 'right', 'bottom', 'left'] |
Ṣetumo awọn ipo ifẹhinti nipasẹ pipese atokọ ti awọn ipo ni titobi (ni aṣẹ ti o fẹ). Fun alaye diẹ sii tọka si awọn iwe aṣẹ ihuwasi Popper |
boundary |
okun | eroja | 'clippingParents' |
Ààlà ìjánu àkúnwọ́sílẹ̀ ti popover (kan nikan si Popper ká preventOverflow modifier). Nipa aiyipada o jẹ 'clippingParents' ati pe o le gba itọkasi HTMLElement (nipasẹ JavaScript nikan). Fun alaye diẹ sii tọka si Popper's detectOverflow docs . |
customClass |
okun | iṣẹ | '' |
Fi awọn kilasi kun popover nigbati o ba han. Ṣe akiyesi pe awọn kilasi wọnyi yoo ṣafikun ni afikun si eyikeyi awọn kilasi pato ninu awoṣe. Lati ṣafikun awọn kilasi pupọ, ya wọn sọtọ pẹlu awọn alafo O tun le ṣe iṣẹ kan ti o yẹ ki o da okun kan pada ti o ni awọn orukọ kilasi afikun ninu. |
sanitize |
boolian | true |
Muu ṣiṣẹ tabi mu isọdọmọ kuro. Ti o ba muu ṣiṣẹ 'template' , 'content' ati 'title' awọn aṣayan yoo di mimọ. Wo apakan sanitizer ninu iwe JavaScript wa . |
allowList |
nkan | Iwọn aiyipada | Nkan ti o ni awọn abuda ti a gba laaye ati awọn afi |
sanitizeFn |
asan | iṣẹ | null |
Nibi o le pese iṣẹ imototo tirẹ. Eyi le wulo ti o ba fẹ lati lo ile-ikawe iyasọtọ lati ṣe imototo. |
offset |
orun | okun | iṣẹ | [0, 8] |
Aiṣedeede ti popover ni ibatan si ibi-afẹde rẹ. O le kọja okun kan ninu awọn abuda data pẹlu awọn iye ti o ya sọtọ komama bii: Nigba ti a ba lo iṣẹ kan lati pinnu aiṣedeede, a npe ni pẹlu ohun ti o ni ibi-popper, itọkasi, ati popper rects bi ariyanjiyan akọkọ rẹ. Ipin DOM ti o nfa ti kọja bi ariyanjiyan keji. Iṣẹ naa gbọdọ da orun pada pẹlu awọn nọmba meji: . Fun alaye diẹ sii tọka si awọn iwe aiṣedeede Popper . |
popperConfig |
asan | ohun | iṣẹ | null |
Lati yi Bootstrap aiyipada atunto Popper pada, wo iṣeto Popper . Nigba ti a ba lo iṣẹ kan lati ṣẹda iṣeto Popper, o pe pẹlu ohun kan ti o ni iṣeto ni aiyipada Bootstrap. O ṣe iranlọwọ fun ọ lati lo ati dapọ aiyipada pẹlu iṣeto tirẹ. Iṣẹ naa gbọdọ da ohun atunto pada fun Popper. |
Data eroja fun olukuluku popovers
Awọn aṣayan fun awọn agbejade kọọkan le jẹ iyasọtọ nipasẹ lilo awọn abuda data, bi a ti salaye loke.
Lilo iṣẹ pẹlupopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Awọn ọna
Awọn ọna Asynchronous ati awọn iyipada
Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .
ifihan
Ṣe afihan agbejade ano kan. Pada si olupe ṣaaju ki agbejade ti han gangan (ie ṣaaju ki shown.bs.popover
iṣẹlẹ naa to waye). Eyi ni a kà si “afọwọṣe” ti nfa popover. Popovers ti akọle ati akoonu mejeeji jẹ gigun odo ko han rara.
myPopover.show()
tọju
Ìbòmọlẹ ohun ano ká popover. Pada si olupe ṣaaju ki agbejade ti farapamọ gangan (ie ṣaaju ki hidden.bs.popover
iṣẹlẹ naa to waye). Eyi ni a kà si “afọwọṣe” ti nfa popover.
myPopover.hide()
yipada
Yipada ohun ano ká popover. Pada si olupe ṣaaju ki agbejade ti han gangan tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.popover
tabi hidden.bs.popover
iṣẹlẹ to waye). Eyi ni a kà si “afọwọṣe” ti nfa popover.
myPopover.toggle()
sọnù
Ìbòmọlẹ ati ki o run ohun ano ká popover (Yọ awọn ti o ti fipamọ data lori DOM ano). Popovers ti o lo aṣoju (eyi ti a ṣẹda nipa lilo aṣayan ) selector
ko le ṣe iparun ni ẹyọkan lori awọn eroja ti o nfa ọmọ.
myPopover.dispose()
mu ṣiṣẹ
Yoo fun ohun ano ká popover ni agbara lati han. Popovers ti ṣiṣẹ nipasẹ aiyipada.
myPopover.enable()
mu ṣiṣẹ
Yọ awọn agbara fun ohun ano ká popover lati han. Agbejade naa yoo ni anfani lati han nikan ti o ba tun ṣiṣẹ.
myPopover.disable()
Ti ṣiṣẹ toggle
Yipada agbara fun agbejade eroja lati han tabi pamọ.
myPopover.toggleEnabled()
imudojuiwọn
Ṣe imudojuiwọn ipo agbejade eroja kan.
myPopover.update()
gbaInstance
Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ popover ti o ni nkan ṣe pẹlu nkan DOM kan
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
gbaOrCreateInstance
Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ popover ti o ni nkan ṣe pẹlu nkan DOM kan, tabi ṣẹda ọkan tuntun ti o ko ba ṣe ipilẹṣẹ
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Awọn iṣẹlẹ
Iru iṣẹlẹ | Apejuwe |
---|---|
fihan.bs.popover | Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn show apẹẹrẹ ọna ti a npe ni. |
han.bs.popover | Iṣẹlẹ yii jẹ ina nigbati popover ti jẹ ki o han si olumulo (yoo duro fun awọn iyipada CSS lati pari). |
tọju.bs.popover | Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hide apẹẹrẹ ti pe. |
farasin.bs.popover | Iṣẹlẹ yii jẹ ina nigbati agbejade ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari). |
ti a fi sii.bs.popover | Iṣẹlẹ yii jẹ ina lẹhin show.bs.popover iṣẹlẹ naa nigbati a ti ṣafikun awoṣe popover si DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})