Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
in English

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.jswanda ya ƙunshi Popper domin popovers suyi aiki!
  • Popovers suna buƙatar plugin ɗin kayan aiki azaman abin dogaro.
  • Popovers suna shiga don dalilai na aiki, don haka dole ne ka fara su da kanka .
  • Tsawon sifili titleda contentƙ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 .disabledko disabledabubuwan 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-nowrapda <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.
Ta hanyar tsoho, wannan bangaren yana amfani da ginanniyar sanitizer na abun ciki, wanda ke fitar da duk wani abu na HTML da ba a yarda da shi ba. Duba sashin sanitizer a cikin takaddun JavaScript ɗin mu don ƙarin cikakkun bayanai.
Tasirin raye-rayen wannan bangaren ya dogara ne da prefers-reduced-motiontambayar 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-bs-togglehalayensu:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Misali: Amfani da containerzaɓ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 containerta yadda HTML ɗin popover ta bayyana a cikin wannan kashi maimakon.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Misali

<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>

Hanyoyi hudu

Akwai zaɓuɓɓuka huɗu: saman, dama, ƙasa, da hagu masu layi. Ana nuna kwatance yayin amfani da Bootstrap a cikin 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>

Kore a danna gaba

Yi amfani da focusfaɗ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 tabindexsifa.

<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'
})

Abubuwan da aka kashe

Abubuwan da ke da disabledsifa 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 nannade <div>ko <span>, wanda aka fi dacewa da maballin madannai ta amfani da tabindex="0".

Don naƙasassun abubuwan faɗowa, kuna iya gwammace data-bs-trigger="hover focus"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" 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

Masu canji

$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);

Amfani

Kunna popovers ta JavaScript:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

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 hovermatsayin 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 htmlzaɓ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-describedbysifa. 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 zai yiwu a haɗa da iko mai hulɗa (kamar abubuwa) a cikin poution da aka allowListyarda da shi a halin yanzu Pover ba ta gudanar da tsarin kula da keyboard ba. 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-bs-, kamar a cikin data-bs-animation="". Tabbatar canza nau'in shari'ar sunan zaɓi daga raƙumi zuwa kebab-case lokacin ƙaddamar da zaɓuɓɓuka ta hanyar halayen bayanai. Misali, maimakon yin amfani da data-bs-customClass="beautifier", yi amfani da data-bs-custom-class="beautifier".

Lura cewa saboda dalilai na tsaro ba za a iya samar da sanitize, sanitizeFn, da zaɓuɓɓuka ta amfani da halayen bayanai ba.allowList
Suna Nau'in Default Bayani
animation boolean true Aiwatar da canjin Fade CSS zuwa popover
container zaren | kashi | karya false

Haɗa popover zuwa takamaiman yanki. Misali container: 'body':. Wannan zaɓin yana da amfani musamman domin yana ba ku damar sanya popover a cikin kwararar daftarin aiki kusa da abin da ke haifarwa - wanda zai hana popover daga shawagi daga abin da ke kunnawa yayin girman taga.

content zaren | kashi | aiki ''

Tsohuwar ƙimar abun ciki idan data-bs-contentsifa ba ta nan.

Idan an ba da aiki, za a kira shi tare da thissaita saitin abin da aka makala popover da shi.

delay 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:delay: { "show": 500, "hide": 100 }

html boolean false Saka HTML a cikin popover. Idan ƙarya, innerTextza a yi amfani da dukiya don saka abun ciki a cikin DOM. Yi amfani da rubutu idan kun damu da harin XSS.
placement zaren | aiki 'right'

Yadda ake sanya popover - auto | saman | kasa | hagu | dama.
Lokacin autoda aka ƙayyade, zai sake jujjuya yanayin popover.

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 thissaita mahallin zuwa misalin popover.

selector zaren | karya false 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 .
template kirtani '<div class="popover" role="tooltip"><div class="popover-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 titlea cikin .popover-header.

Za a yi allurar popover contenta cikin .popover-body.

.popover-arrowzai zama kibiya popover.

Abun nadi na waje yakamata ya kasance yana da .popoveraji.

title zaren | kashi | aiki ''

Tsohuwar ƙimar take idan babu titlesifa.

Idan an ba da aiki, za a kira shi tare da thissaita saitin abin da aka makala popover da shi.

trigger kirtani 'click' Yadda ake kunna popover - danna | shawa | mayar da hankali | manual. Kuna iya wuce abubuwan jan hankali da yawa; raba su da sarari. manualba za a iya haɗa shi da wani abin tayar da hankali ba.
fallbackPlacements tsararru ['top', 'right', 'bottom', 'left'] Ƙayyade jeri na faɗuwa ta hanyar samar da jerin jeri a tsararru (domin fifiko). Don ƙarin bayani koma zuwa Docs halayyar Popper
boundary zaren | kashi 'clippingParents' Matsakaicin ƙayyadaddun ƙayyadaddun ƙayyadaddun iyaka na popover (ya shafi Popper's preventOverflow modifier kawai). Ta hanyar tsoho yana 'clippingParents'kuma yana iya karɓar bayanin HTMLElement (ta JavaScript kawai). Don ƙarin bayani koma zuwa Popper's detectOverflow docs .
customClass 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: 'class-1 class-2'.

Hakanan zaka iya wuce aikin da yakamata ya dawo da kirtani ɗaya mai ɗauke da ƙarin sunayen aji.

sanitize boolean true 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 .
allowList abu Ƙimar ta asali Abu wanda ya ƙunshi halayen da aka yarda da alamun
sanitizeFn null | aiki null 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.
offset tsararru | zaren | aiki [0, 8]

Matsalolin popover dangane da manufar sa. Kuna iya wuce kirtani a cikin sifofin bayanai tare da raba waƙafi kamar:data-bs-offset="10,20"

Lokacin da aka yi amfani da aiki don tantance abin kashewa, ana kiran shi da wani abu mai ɗauke da popper placement, the reference, and popper rects as his first case. An wuce kullin DOM mai jawowa azaman hujja ta biyu. Dole ne aikin ya dawo da jeri tare da lambobi biyu: .[skidding, distance]

Don ƙarin bayani koma zuwa Popper's offset docs .

popperConfig null | abu | aiki null

Don canza saitunan Popper tsoho na Bootstrap, duba Tsarin Popper .

Lokacin da aka yi amfani da aiki don ƙirƙirar tsarin Popper, ana kiran shi da wani abu da ke ɗauke da tsohowar Popper na Bootstrap. Yana taimaka muku amfani da haɗa tsoho tare da tsarin ku. Dole ne aikin ya dawo da abin daidaitawa don 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.

Amfani da aiki tare dapopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

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 .

Duba takaddun JavaScript ɗin mu don ƙarin bayani .

nuna

Yana bayyana faɗuwar wani abu. Komawa ga mai kira kafin a nuna popover a zahiri (watau kafin shown.bs.popoverabin 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.

myPopover.show()

boye

Yana ɓoye ɓoyayyen abu. Komawa ga mai kira kafin a ɓoye popover a zahiri (watau kafin hidden.bs.popoverabin ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da popover.

myPopover.hide()

juya

Yana jujjuya faɗuwar wani abu. Komawa ga mai kira kafin a nuna ko ɓoye a zahiri (watau kafin abin shown.bs.popoverko hidden.bs.popoverabin ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da popover.

myPopover.toggle()

jefar

Yana ɓoyewa da lalata faɗuwar kashi (Yana cire bayanan da aka adana akan ɓangaren DOM). Popovers da ke amfani da wakilai (waɗanda aka ƙirƙira ta amfani da selectorzaɓi ) ba za a iya lalata su daban-daban akan abubuwan da ke haifar da zuriya ba.

myPopover.dispose()

ba da damar

Yana ba da popover na kashi ikon nunawa. Ana kunna Popovers ta tsohuwa.

myPopover.enable()

kashe

Yana kawar da damar da za a iya nunawa wani abu na popover. Za a iya nunawa popover kawai idan an sake kunna shi.

myPopover.disable()

An kunna kunnawa

Yana jujjuya ikon faɗuwar wani abu don nunawa ko ɓoye.

myPopover.toggleEnabled()

sabunta

Yana sabunta matsayin popover na kashi.

myPopover.update()

samunInstance

Hanyar a tsaye wacce ke ba ku damar samun misalin popover mai alaƙa da nau'in DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

samunOrCreateInstance

Hanyar a tsaye wacce ke ba ku damar samun misalin popover mai alaƙa da abun DOM, ko ƙirƙirar sabo idan ba a fara shi ba.

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Abubuwan da suka faru

Nau'in taron Bayani
nuna.bs.popover Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali.
nuna.bs.popover This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.popover This event is fired immediately when the hide instance method has been called.
hidden.bs.popover This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
inserted.bs.popover This event is fired after the show.bs.popover event when the popover template has been added to the DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})