Popovers
Takaddun bayanai da misalai don ƙara abubuwan buƙatun Bootstrap, kamar waɗanda aka samu a cikin iOS, zuwa kowane nau'i akan rukunin yanar gizon ku.
Dubawa
Abubuwan da ya kamata ku sani lokacin amfani da plugin ɗin popover:
- Popovers sun dogara da ɗakin karatu na ɓangare na uku Popper don matsayi. Dole ne ku haɗa popper.min.js kafin bootstrap.js ko amfani
bootstrap.bundle.min.js
/bootstrap.bundle.js
wanda ya ƙunshi Popper domin popovers suyi aiki! - Popovers suna buƙatar plugin ɗin kayan aiki azaman abin dogaro.
- Idan kuna gina JavaScript ɗin mu daga tushe, yana buƙatar
util.js
. - Popovers suna shiga don dalilai na aiki, don haka dole ne ka fara su da kanka .
- Tsawon sifili
title
dacontent
ƙima ba za su taɓa nuna buguwa ba. - Ƙayyade
container: 'body'
don guje wa yin matsaloli a cikin ƙarin hadaddun abubuwa (kamar ƙungiyoyin shigar da mu, ƙungiyoyin maɓalli, da sauransu). - Haɓaka popovers akan abubuwan ɓoye ba zai yi aiki ba.
- Popovers don
.disabled
kodisabled
abubuwan dole ne a kunna su akan abin nadi. - Lokacin da aka kunna shi daga anka waɗanda ke nannade cikin layi ɗaya, popovers za su kasance a tsakiya tsakanin faɗin anka gaba ɗaya. Yi amfani
.text-nowrap
da<a>
s ɗin ku don guje wa wannan halin. - Dole ne a ɓoye maɓuɓɓuka kafin a cire abubuwan da suka dace daga DOM.
- Ana iya haifar da popovers godiya ga wani abu a cikin inuwa DOM.
prefers-reduced-motion
tambayar kafofin watsa labarai. Dubi
raguwar sashin motsi na takaddun damar mu .
Ci gaba da karantawa don ganin yadda popovers ke aiki tare da wasu misalai.
Misali: Kunna popovers ko'ina
Hanya ɗaya don fara duk popovers akan shafi shine zaɓi su ta hanyar data-toggle
halayensu:
$(function () {
$('[data-toggle="popover"]').popover()
})
Misali: Amfani da container
zaɓi
Lokacin da kake da wasu nau'ikan nau'ikan nau'ikan iyaye waɗanda ke tsoma baki tare da popover, za ku so ku saka al'ada container
ta yadda HTML ɗin popover ta bayyana a cikin wannan kashi maimakon.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Misali
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Hanyoyi hudu
Akwai zaɓuɓɓuka huɗu: saman, dama, ƙasa, da hagu masu layi.
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
Kore a danna gaba
Yi amfani da focus
faɗakarwa don korar popovers akan danna gaba na mai amfani na wani nau'i na daban fiye da abin juyawa.
Takamaiman alamar da ake buƙata don korar-kan-na gaba-danna
Don dacewa da mai binciken giciye da kuma halayyar dandamali, dole ne ku yi amfani da <a>
alamar, ba alamar ba <button>
, kuma dole ne ku haɗa da tabindex
sifa.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
trigger: 'focus'
})
Abubuwan da aka kashe
Abubuwan da ke da disabled
sifa ba su da ma'amala, ma'ana masu amfani ba za su iya yin shawagi ko danna su don jawo popover (ko kayan aiki ba). A matsayin madaidaicin aiki, zaku so kunna popover daga abin rufe fuska <div>
ko <span>
kuma ku soke abin da ke pointer-events
kan nakasa.
Don naƙasassun abubuwan faɗowa, kuna iya gwammace data-trigger="hover"
ta yadda popover ɗin ya bayyana azaman ra'ayin gani nan da nan ga masu amfani da ku saboda ƙila ba za su yi tsammanin danna kan wani guragu ba.
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Amfani
Kunna popovers ta JavaScript:
$('#example').popover(options)
Haɗawar GPU
Popovers wani lokaci suna bayyana duhu akan na'urorin Windows 10 saboda haɓakawar GPU da tsarin DPI da aka gyara. Hanyar da za a yi don wannan a cikin v4 shine a kashe hanzarin GPU kamar yadda ake buƙata akan abubuwan da kuke so.
Gyaran da aka ba da shawarar:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Yin popovers yayi aiki ga maballin madannai da masu amfani da fasaha masu taimako
Don ƙyale masu amfani da madannai don kunna popovers ɗinku, yakamata ku ƙara su kawai zuwa abubuwan HTML waɗanda ke al'adar maɓalli-mayar da hankali da mu'amala (kamar hanyoyin haɗin gwiwa ko sarrafa tsari). Kodayake abubuwan HTML na sabani (kamar <span>
s) ana iya mai da hankali ta hanyar ƙara tabindex="0"
sifa, wannan zai ƙara yiwuwar dakatarwa mai ban haushi da ruɗani akan abubuwan da ba su da alaƙa ga masu amfani da keyboard, kuma galibin fasahar taimako a halin yanzu ba sa sanar da abun cikin popover a cikin wannan yanayin. . Bugu da ƙari, kar a dogara kawai a hover
matsayin abin da ke haifar da popover ɗinku, saboda wannan zai sa su gagara jawo masu amfani da madannai.
Yayin da za ku iya saka arziki, tsararren HTML a cikin popovers tare da html
zaɓi, muna ba da shawarar sosai cewa ku guji ƙara yawan adadin abun ciki. Yadda popovers ke aiki a halin yanzu shine, da zarar an nuna, abun cikin su yana ɗaure da sifa mai jawo tare da aria-describedby
sifa. Sakamakon haka, za a ba da sanarwar gabaɗayan abubuwan da ke cikin popover ga masu amfani da fasaha na taimaka wa masu amfani da fasaha a matsayin dogon rafi marar yankewa.
Bugu da ƙari, yayin da yana yiwuwa kuma a haɗa da sarrafa ma'amala (kamar abubuwa masu ƙima ko hanyoyin haɗin kai) a cikin popover ɗinku (ta ƙara waɗannan abubuwan zuwa abubuwan da aka ba da whiteList
izini da alamun), ku sani cewa a halin yanzu popover baya sarrafa tsarin mayar da hankali kan maɓalli. Lokacin da mai amfani da madannai ya buɗe popover, mayar da hankali kan abin da ke jawowa, kuma kamar yadda popover yawanci ba ya bin abin faɗakarwa a cikin tsarin takaddar, babu tabbacin ci gaba/latsawa.TABzai motsa mai amfani da madannai zuwa cikin popover kanta. A taƙaice, ƙara ikon mu'amala kawai zuwa popover yana yiwuwa ya sa waɗannan abubuwan sarrafawa ba za su iya isa ga masu amfani da madannai da masu amfani da fasahar taimako ba, ko kuma aƙalla yin tsarin mayar da hankali gabaɗaya mara ma'ana. A cikin waɗannan lokuta, yi la'akari da yin amfani da maganganun modal maimakon.
Zabuka
Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-
, kamar a cikin data-animation=""
.
sanitize
,
sanitizeFn
da
whiteList
zaɓuɓɓukan ba za a iya samar da su ta amfani da halayen bayanai ba.
Suna | Nau'in | Default | Bayani |
---|---|---|---|
tashin hankali | boolean | gaskiya | Aiwatar da canjin Fade CSS zuwa popover |
ganga | zaren | kashi | karya | karya | Haɗa popover zuwa takamaiman yanki. Misali |
abun ciki | zaren | kashi | aiki | '' | Tsohuwar ƙimar abun ciki idan Idan an ba da aiki, za a kira shi tare da |
jinkiri | lamba | abu | 0 | Jinkirin nunawa da ɓoye popover (ms) - baya shafi nau'in fararwa na hannu Idan an ba da lamba, ana amfani da jinkiri ga duka ɓoye/nunawa Tsarin abu shine: |
html | boolean | karya | Saka HTML a cikin popover. Idan ƙarya, text za a yi amfani da hanyar jQuery don saka abun ciki a cikin DOM. Yi amfani da rubutu idan kun damu da harin XSS. |
jeri | zaren | aiki | 'dama' | Yadda ake sanya popover - auto | saman | kasa | hagu | dama. Lokacin da aka yi amfani da aiki don ƙayyade wurin, ana kiran shi tare da kumburin DOM popover a matsayin hujjarsa ta farko da maɓallin DOM mai jawowa a matsayin na biyu. An |
mai zaɓe | zaren | karya | karya | Idan an samar da mai zaɓe, za a ba da abubuwan da za a yi amfani da su zuwa ƙayyadaddun manufa. A aikace, ana amfani da wannan don ba da damar abun ciki na HTML mai ƙarfi don ƙara fa'ida. Dubi wannan da misali mai ba da labari . |
samfuri | kirtani | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Tushen HTML don amfani yayin ƙirƙirar popover. Za a yi allurar popover Za a yi allurar popover
Abun nadi na waje yakamata ya kasance yana da |
take | zaren | kashi | aiki | '' | Tsohuwar ƙimar take idan babu Idan an ba da aiki, za a kira shi tare da |
jawo | kirtani | 'danna' | Yadda ake kunna popover - danna | shawa | mayar da hankali | manual. Kuna iya wuce abubuwan jan hankali da yawa; raba su da sarari. manual ba za a iya haɗa shi da wani abin tayar da hankali ba. |
biya diyya | lamba | kirtani | 0 | Matsalolin popover dangane da manufar sa. Don ƙarin bayani koma zuwa Popper's offset docs . |
fallbackPlacement | zaren | tsararru | 'juya' | Bada izinin saka ko wane matsayi Popper zai yi amfani da shi akan koma baya. Don ƙarin bayani koma zuwa Docs halayyar Popper |
Class Class | zaren | aiki | '' | Ƙara azuzuwan zuwa popover lokacin da aka nuna shi. Lura cewa waɗannan azuzuwan za a ƙara su ban da kowane nau'i da aka kayyade a cikin samfuri. Don ƙara azuzuwan da yawa, raba su da sarari: Hakanan zaka iya wuce aikin da yakamata ya dawo da kirtani ɗaya mai ɗauke da ƙarin sunayen aji. |
iyaka | zaren | kashi | ' gungurawaParent' | Matsakaicin ƙaƙƙarfan iyaka na popover. Yana karɓar ƙimar 'viewport' , 'window' , 'scrollParent' , ko ma'anar HTMLElement (JavaScript kawai). Don ƙarin bayani koma zuwa Popper's preventOverflow docs . |
sanitize | boolean | gaskiya | Kunna ko kashe tsaftar. Idan an kunna 'template' , 'content' kuma 'title' za a tsabtace zaɓuɓɓuka. Duba sashin sanitizer a cikin takaddun JavaScript ɗin mu . |
whiteList | abu | Ƙimar ta asali | Abu wanda ya ƙunshi halayen da aka yarda da alamun |
sanitizeFn | null | aiki | banza | Anan zaku iya samar da aikin tsabtace ku. Wannan na iya zama da amfani idan kun fi son yin amfani da ɗakin karatu da aka keɓe don yin tsafta. |
popperConfig | null | abu | banza | Don canza tsohuwar saitin Popper na Bootstrap, duba tsarin Popper |
Halayen bayanai don faɗuwar mutum ɗaya
Zaɓuɓɓuka don faɗuwar faɗuwar mutum ɗaya ana iya a madadin su ta hanyar amfani da sifofin bayanai, kamar yadda aka bayyana a sama.
Hanyoyin
Hanyoyi masu daidaitawa da canji
Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .
$().popover(options)
Yana farawa popovers don tarin abubuwa.
.popover('show')
Yana bayyana faɗuwar wani abu. Komawa ga mai kira kafin a nuna popover a zahiri (watau kafin shown.bs.popover
abin ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da popover. Popovers waɗanda take da abun ciki duka tsawon sifili ne ba a taɓa nunawa ba.
$('#element').popover('show')
.popover('hide')
Yana ɓoye ɓoyayyen abu. Komawa ga mai kira kafin a ɓoye popover a zahiri (watau kafin hidden.bs.popover
abin ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da popover.
$('#element').popover('hide')
.popover('toggle')
Yana jujjuya faɗuwar wani abu. Komawa ga mai kira kafin a nuna ko ɓoye a zahiri (watau kafin abin shown.bs.popover
ko hidden.bs.popover
abin ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da popover.
$('#element').popover('toggle')
.popover('dispose')
Yana ɓoyewa da lalata faɗuwar wani abu. Popovers da ke amfani da wakilai (waɗanda aka ƙirƙira ta amfani da selector
zaɓi ) ba za a iya lalata su daban-daban akan abubuwan da ke haifar da zuriya ba.
$('#element').popover('dispose')
.popover('enable')
Yana ba da popover na kashi ikon nunawa. Ana kunna Popovers ta tsohuwa.
$('#element').popover('enable')
.popover('disable')
Yana kawar da damar da za a iya nunawa wani abu na popover. Za a iya nunawa popover kawai idan an sake kunna shi.
$('#element').popover('disable')
.popover('toggleEnabled')
Yana jujjuya ikon faɗuwar wani abu don nunawa ko ɓoye.
$('#element').popover('toggleEnabled')
.popover('update')
Yana sabunta matsayin popover na kashi.
$('#element').popover('update')
Abubuwan da suka faru
Nau'in Taron | Bayani |
---|---|
nuna.bs.popover | Wannan taron yana gobara nan da nan lokacin da show aka kira hanyar misali. |
nuna.bs.popover | Ana korar wannan taron lokacin da aka bayyana popover ga mai amfani (zai jira canjin CSS ya kammala). |
boye.bs.popover | Ana korar wannan taron nan da nan lokacin da hide aka kira hanyar misali. |
boye.bs.popover | Ana korar wannan taron lokacin da popover ya gama ɓoyewa daga mai amfani (zai jira canjin CSS ya kammala). |
shigar.bs.popover | An kori wannan taron bayan show.bs.popover taron lokacin da aka ƙara samfurin popover zuwa DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})