Popovers
Nā palapala a me nā laʻana no ka hoʻohui ʻana i nā popovers Bootstrap, e like me nā mea i loaʻa ma iOS, i kekahi mea ma kāu pūnaewele.
Nānā nui
Nā mea e ʻike ai i ka hoʻohana ʻana i ka popover plugin:
- Ke hilinaʻi nei nā Popovers i ka waihona puke ʻaoʻao 3 Popper no ka hoʻonohonoho ʻana. Pono ʻoe e hoʻokomo i ka popper.min.js ma mua o ka bootstrap.js a i ʻole ka hoʻohana ʻana
bootstrap.bundle.min.js
/bootstrap.bundle.js
i loaʻa iā Popper i mea e hana ai nā popovers! - Pono nā Popovers i ka plugin tooltip ma ke ʻano he hilinaʻi.
- Hoʻokomo ʻia nā Popovers no nā kumu hana, no laila pono ʻoe e hoʻomaka iā lākou iho .
- ʻAʻole loa e hōʻike ʻia kahi popover ka lōʻihi ʻole
title
a me nā waiwai.content
- E wehewehe
container: 'body'
i mea e pale aku ai i nā pilikia i loko o nā ʻāpana paʻakikī (e like me kā mākou pūʻulu hoʻokomo, pūʻulu pihi, a pēlā aku). - ʻAʻole e holo ka hoʻoulu ʻana i nā popovers ma nā mea huna.
- Pono e ho'āla ʻia nā popovers no a i
.disabled
ʻoledisabled
nā mea ʻeleʻele ma luna o kahi mea ʻōwili. - Ke hoʻāla ʻia mai nā heleuma e ʻōwili i nā laina he nui, e kau ʻia nā popovers ma waena o ka laula holoʻokoʻa o nā heleuma. E hoʻohana
.text-nowrap
i kāu<a>
s e pale i kēia ʻano. - Pono e hūnā ʻia nā popover ma mua o ka wehe ʻia ʻana o kā lākou mau mea pili mai ka DOM.
- Hiki ke hoʻoulu ʻia nā popovers i kahi mea i loko o kahi DOM shadow.
prefers-reduced-motion
nīnau media. E ʻike
i ka ʻāpana hoʻohaʻahaʻa o kā mākou palapala hiki ke komo .
E hoʻomau i ka heluhelu e ʻike i ka hana ʻana o nā popovers me kekahi mau laʻana.
Laʻana: Hoʻā i nā popovers ma nā wahi āpau
ʻO kahi ala e hoʻomaka ai i nā popovers a pau ma kahi ʻaoʻao ʻo ke koho ʻana iā lākou ma ko lākou data-bs-toggle
ʻano:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Laʻana: Ke hoʻohana nei i ke container
koho
Ke loaʻa iā ʻoe kekahi mau kaila ma kahi mea makua e hoʻopilikia i kahi popover, makemake ʻoe e kuhikuhi i kahi maʻamau container
i ʻike ʻia ka HTML o ka popover i loko o ia mea.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Laʻana
<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>
ʻEhā kuhikuhi
Loaʻa nā koho ʻehā: luna, ʻākau, lalo, a hema. Hoʻohālikelike ʻia nā kuhikuhi i ka wā e hoʻohana ai iā Bootstrap ma 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>
Hoʻokuʻu i ke kaomi aʻe
E hoʻohana i ke focus
kumu no ka hoʻokuʻu ʻana i nā popovers ma ke kaomi aʻe a ka mea hoʻohana i kekahi mea ʻokoʻa ma mua o ka mea hoʻololi.
Pono ka māka kikoʻī no ka hoʻokuʻu ʻana ma ka kaomi aʻe
No ka hoʻohana ʻana i ka <a>
lepili, ʻaʻole ka <button>
tag, a pono ʻoe e hoʻokomo i kahi tabindex
ʻano.
<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'
})
Nā mea hoʻopale
ʻAʻole pili nā mea me ka disabled
hiʻohiʻona, ʻo ia hoʻi, ʻaʻole hiki i nā mea hoʻohana ke hoʻoluli a kaomi paha iā lākou no ka hoʻomaka ʻana i kahi popover (a i ʻole tooltip). Ma ke ʻano he hana hoʻoponopono, makemake ʻoe e hoʻomaka i ka popover mai kahi wīwī a i <div>
ʻole <span>
, i hana maikaʻi ʻia ʻo keyboard-focusable me ka hoʻohana ʻana i tabindex="0"
.
No nā mea hoʻomaka popover kīnā ʻole, makemake paha ʻoe i data-bs-trigger="hover focus"
ʻike ʻia ka popover ma ke ʻano he manaʻo ʻike koke i kāu mea hoʻohana no ka mea ʻaʻole lākou e manaʻo e kaomi i kahi mea kīnā.
<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
Nā mea hoʻololi
$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);
Hoʻohana
E ho'ā i nā popovers ma o JavaScript:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Hana ʻia nā popovers no nā mea hoʻohana ʻenehana kōkua
No ka ʻae ʻana i nā mea hoʻohana papapāpā e hoʻāla i kāu mau popovers, pono ʻoe e hoʻohui iā lākou i nā mea HTML i maʻa mau i ka keyboard-focusable a me ka launa pū ʻana (e like me nā loulou a i ʻole nā mana hoʻoponopono). ʻOiai hiki ke hoʻopaʻa ʻia nā mea HTML ʻokoʻa (e like me <span>
s) ma ka hoʻohui ʻana i ke ʻano tabindex="0"
, e hoʻohui kēia i nā pahu hoʻonāukiuki a huikau i nā mea pili ʻole no nā mea hoʻohana keyboard, a ʻo ka hapa nui o nā ʻenehana kōkua i kēia manawa ʻaʻole e hoʻolaha i ka ʻike o ka popover i kēia kūlana. . Eia hou, mai hilinaʻi wale ma hover
ke ʻano he kumu no kāu popovers, no ka mea e hiki ʻole ai iā lākou ke hoʻomaka no nā mea hoʻohana keyboard.
ʻOiai hiki iā ʻoe ke hoʻokomo i ka HTML waiwai, kūkulu ʻia i loko o nā popovers me ke html
koho, manaʻo ikaika mākou e hōʻole ʻoe i ka hoʻohui ʻana i ka nui o ka ʻike. ʻO ke ʻano o ka hana ʻana o nā popovers i kēia manawa, i ka manawa i hōʻike ʻia, pili ʻia kā lākou ʻike i ka mea hoʻoulu me ke aria-describedby
ʻano. ʻO ka hopena, e hoʻolaha ʻia ka ʻike holoʻokoʻa o ka popover i nā mea hoʻohana ʻenehana kōkua ma ke ʻano he kahawai lōʻihi ʻole.
Eia kekahi, ʻoiai hiki ke hoʻokomo pū i nā mana pāʻani (e like me nā ʻano kumu a i ʻole nā loulou) i kāu popover (ma ka hoʻohui ʻana i kēia mau mea i nā ʻano allowList
a me nā hōʻailona i ʻae ʻia), e hoʻomaopopo ʻoe ʻaʻole e hoʻokele ka popover i kēia manawa i ka papa kuhikuhi. Ke wehe ka mea hoʻohana keyboard i kahi popover, e kau ka manaʻo ma ka mea hoʻāla, a no ka mea, ʻaʻole e hahai koke ka popover i ke kumu o ka palapala, ʻaʻohe mea e hōʻoiaʻiʻo e neʻe i mua / kaomi.TABe hoʻoneʻe i kahi mea hoʻohana keyboard i loko o ka popover ponoʻī. I ka pōkole, ʻo ka hoʻohui wale ʻana i nā mana interactive i kahi popover e hiki ʻole ai ke hoʻohana ʻia kēia mau mana no nā mea hoʻohana keyboard a me nā mea hoʻohana i nā ʻenehana kōkua, a i ʻole ka mea liʻiliʻi loa e hana i kahi kauoha kikoʻī holoʻokoʻa. I kēia mau hihia, e noʻonoʻo e hoʻohana i kahi kamaʻilio modal.
Nā koho
Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-bs-
, e like me ka data-bs-animation=""
. E hōʻoia e hoʻololi i ke ʻano hihia o ka inoa koho mai camelCase i kebab-case i ka wā e hāʻawi ai i nā koho ma o nā ʻano ʻikepili. No ka laʻana, ma kahi o ka hoʻohana ʻana data-bs-customClass="beautifier"
, hoʻohana data-bs-custom-class="beautifier"
.
sanitize
E hoʻomanaʻo ʻaʻole hiki ke hāʻawi ʻia nā ,
sanitizeFn
, a me
nā koho
no nā kumu palekana
allowList
me ka hoʻohana ʻana i nā ʻano ʻikepili.
inoa | ʻAno | Default | wehewehe |
---|---|---|---|
animation |
boolean | true |
E noi i kahi hoʻololi fade CSS i ka popover |
container |
kaula | mea | wahahee | false |
Hoʻopili i ka popover i kahi mea kikoʻī. Laʻana: |
content |
kaula | mea | hana | '' |
Waiwai maʻiʻo paʻamau inā Inā hāʻawi ʻia kahi hana, e kāhea ʻia me kāna |
delay |
helu | mea | 0 |
Hoʻopaneʻe ka hōʻike ʻana a me ka hūnā ʻana i ka popover (ms) - ʻaʻole pili i ke ʻano hoʻoiho manual Inā hāʻawi ʻia kahi helu, hoʻopili ʻia ka lohi i ka huna/hōʻike ʻelua ʻO ka hoʻolālā mea: |
html |
boolean | false |
E hoʻokomo i ka HTML i ka popover. Inā hewa, innerText e hoʻohana ʻia ka waiwai e hoʻokomo i ka ʻike i loko o ka DOM. E hoʻohana i ka kikokikona inā hopohopo ʻoe e pili ana i ka hoʻouka kaua XSS. |
placement |
kaula | hana | 'right' |
Pehea e hoʻonoho ai i ka popover - auto | luna | lalo | waiho | akau. Ke hoʻohana ʻia kahi hana no ka hoʻoholo ʻana i ka hoʻokomo ʻana, ua kapa ʻia ʻo ia me ka popover DOM node ma ke ʻano he kumu hoʻopaʻapaʻa mua a ʻo ka mea hoʻomaka DOM node ʻo ia ka lua. Hoʻonohonoho ʻia ka |
selector |
kaula | wahahee | false |
Inā hāʻawi ʻia kahi mea koho, e hāʻawi ʻia nā mea popover i nā pahuhopu i kuhikuhi ʻia. I ka hoʻomaʻamaʻa ʻana, hoʻohana ʻia kēia e hiki ai i nā ʻike HTML ikaika ke hoʻohui i nā popovers. E ʻike i kēia a me kahi hiʻohiʻona ʻike . |
template |
kaulahao | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Base HTML e hoʻohana i ka hana ʻana i ka popover. E hoʻokomo ʻia ka popover i E hoʻokomo ʻia ka popover i
Pono e loaʻa ka |
title |
kaula | mea | hana | '' |
Waiwai poʻo inoa paʻamau inā Inā hāʻawi ʻia kahi hana, e kāhea ʻia me kāna |
trigger |
kaulahao | 'click' |
Pehea e hoʻomaka ai ka popover - kaomi | e hoolana | makaikai | manual. Hiki iā ʻoe ke hāʻawi i nā kumu he nui; e hoʻokaʻawale iā lākou me kahi ākea. manual ʻAʻole hiki ke hoʻohui ʻia me kekahi mea hoʻoulu ʻē aʻe. |
fallbackPlacements |
pūʻulu | ['top', 'right', 'bottom', 'left'] |
E wehewehe i nā wahi hāʻule hope ma ka hāʻawi ʻana i kahi papa inoa o nā wahi i ka laha (e like me ka makemake). No ka ʻike hou aku, e nānā i nā palapala hana a Popper |
boundary |
kaula | ʻeleʻele | 'clippingParents' |
ʻO ka palena palena o ka popover (pili wale i ka mea hoʻololi preventOverflow a Popper). Ma ka maʻamau, 'clippingParents' hiki iā ia ke ʻae i kahi kuhikuhi HTMLElement (ma JavaScript wale nō). No ka ʻike hou aku e nānā i nā palapala detectOverflow a Popper . |
customClass |
kaula | hana | '' |
Hoʻohui i nā papa i ka popover ke hōʻike ʻia. E hoʻomaopopo e hoʻohui ʻia kēia mau papa i nā papa i kuhikuhi ʻia i loko o ka template. No ka hoʻohui ʻana i nā papa he nui, e hoʻokaʻawale iā lākou me nā hakahaka: Hiki iā ʻoe ke hāʻawi i kahi hana e hoʻihoʻi i kahi kaula hoʻokahi i loaʻa nā inoa papa hou. |
sanitize |
boolean | true |
E ho'ā a hoʻopau paha i ka hoʻomaʻemaʻe. Inā ho'āla ʻia 'template' , 'content' a 'title' e hoʻomaʻemaʻe ʻia nā koho. E ʻike i ka ʻāpana sanitizer i kā mākou palapala JavaScript . |
allowList |
mea | Waiwai paʻamau | He mea i ʻae ʻia nā ʻano a me nā hōʻailona |
sanitizeFn |
null | hana | null |
Maanei hiki iā ʻoe ke hoʻolako i kāu hana hoʻomaʻemaʻe ponoʻī. Hiki ke kōkua inā makemake ʻoe e hoʻohana i kahi waihona i hoʻolaʻa ʻia e hana i ka hoʻomaʻemaʻe. |
offset |
laha | kaula | hana | [0, 8] |
Offset o ka popover e pili ana i kona pahu hopu. Hiki iā ʻoe ke hāʻawi i kahi kaula i nā ʻano ʻikepili me nā koma i hoʻokaʻawale ʻia e like me: Ke hoʻohana ʻia kahi hana no ka hoʻoholo ʻana i ka offset, ua kapa ʻia ia me kahi mea i loaʻa ka popper placement, ka kuhikuhi, a me ka popper rects e like me kāna hoʻopaʻapaʻa mua. Hoʻoholo ʻia ka mea hoʻomaka DOM node ma ke ʻano he pane ʻelua. Pono ka hana e hoʻihoʻi i kahi lae me nā helu ʻelua: . No ka ʻike hou aku e nānā i nā palapala offset a Popper . |
popperConfig |
null | mea | hana | null |
No ka hoʻololi i ka hoʻonohonoho Popper paʻamau o Bootstrap, e ʻike i ka hoʻonohonoho ʻana o Popper . Ke hoʻohana ʻia kahi hana no ka hana ʻana i ka hoʻonohonoho Popper, kāhea ʻia me kahi mea i loaʻa ka hoʻonohonoho Popper paʻamau o Bootstrap. Kōkua ia iā ʻoe e hoʻohana a hoʻohui i ka paʻamau me kāu hoʻonohonoho ponoʻī. Pono e hoʻihoʻi ka hana i kahi mea hoʻonohonoho no Popper. |
Nā hiʻohiʻona ʻikepili no nā popovers pākahi
Hiki ke koho ʻia nā koho no kēlā me kēia popovers ma o ka hoʻohana ʻana i nā hiʻohiʻona ʻikepili, e like me ka wehewehe ʻana ma luna.
Ke hoʻohana nei i ka hana mepopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Nā ʻano hana
Nā ʻano asynchronous a me nā hoʻololi
Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .
hōʻike
Hōʻike i ka popover o kekahi mea. Hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka popover (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.popover
hanana). Manaʻo ʻia kēia he "manual" triggering o ka popover. ʻAʻole hōʻike ʻia nā Popovers nona ke poʻo inoa a me ka ʻike.
myPopover.show()
huna
Hūnā i ka popover o kekahi mea. Hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka popover (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hidden.bs.popover
hanana). Manaʻo ʻia kēia he "manual" triggering o ka popover.
myPopover.hide()
hoʻololi
Hoʻololi i ka popover o kekahi mea. Hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana a huna ʻana paha o ka popover (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hanana shown.bs.popover
a i ʻole). hidden.bs.popover
Manaʻo ʻia kēia he "manual" triggering o ka popover.
myPopover.toggle()
e hoolei aku
Hūnā a hoʻopau i ka popover o kahi mea (Wehe i ka ʻikepili i mālama ʻia ma ka mea DOM). ʻAʻole hiki ke hoʻopau pākahi ʻia nā popovers e hoʻohana ana i ka ʻelele (i hana ʻia me ka hoʻohana ʻana i ke selector
koho ).
myPopover.dispose()
hiki
Hāʻawi i ka popover o kahi mea i hiki ke hōʻike ʻia. Hoʻohana ʻia nā Popovers ma ka paʻamau.
myPopover.enable()
hoʻopau
Wehe i ka hiki ke hōʻike ʻia ka popover o kahi mea. Hiki ke hōʻike ʻia ka popover inā hoʻā hou ʻia.
myPopover.disable()
hoʻololi
Hoʻololi i ka hiki ke hōʻike ʻia a hūnā ʻia paha ka popover o kahi mea.
myPopover.toggleEnabled()
hōʻano hou
Hoʻohou i ke kūlana o ka popover o kekahi mea.
myPopover.update()
getInstance
ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka laʻana popover e pili ana me kahi mea DOM
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka popover i pili me kahi mea DOM, a i ʻole e hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia.
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Nā hanana
ʻAno hanana | wehewehe |
---|---|
hōʻike.bs.popover | Hoʻomaka koke kēia hanana i ke show kāhea ʻia ʻana o ke ʻano hana. |
hoikeia.bs.popover | Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai ka popover i ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS). |
huna.bs.popover | Hoʻopau koke ʻia kēia hanana i ka wā hide i kāhea ʻia ai ke ʻano hana. |
huna.bs.popover | Hoʻopau ʻia kēia hanana i ka pau ʻana o ka huna ʻana o ka popover mai ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS). |
hookomo.bs.popover | Hoʻopau ʻia kēia hanana ma hope o ka show.bs.popover hanana i ka wā i hoʻohui ʻia ai ka template popover i ka DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})