Popovers

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.

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.

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

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

Amfani da aiki tare dapopperConfig

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

Hanyoyin

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

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})