Popover

Overview

Zvinhu zvekuziva kana uchishandisa popover plugin:

• Popovers vanovimba neyechitatu bato raibhurari Popper yekumisikidza . Unofanira kusanganisira popper.min.js pamberi bootstrap.js kana kushandisa bootstrap.bundle.min.js/ bootstrap.bundle.jsiyo ine Popper kuitira kuti popovers kushanda!
• Popovers inoda iyo tooltip plugin sekutsamira .
• Mapopovers anosarudza-kupinda nekuda kwezvikonzero zvekuita, saka iwe unofanirwa kuzvitangisa iwe pachako .
• Zero-kureba titleuye contentkukosha hazvizomboratidzi popover.
• Nyora container: 'body'kudzivirira kupa matambudziko muzvikamu zvakaoma zvikuru (semapoka edu ekuisa, mapoka emabhatani, nezvimwe).
• Kukurudzira popover pazvinhu zvakavanzika hazvishande.
• Mapopovers e .disabledkana ma disabledelement anofanira kukonzereswa pane wrapper element.
• Kana ikamutswa kubva kune zvibatiso zvinoputira mumitsetse yakawanda, mapopovers achange ari pakati pehupamhi hwezvimiso. Shandisa .text-nowrappane yako <a>kudzivirira maitiro aya.
• Mapopover anofanirwa kuvanzwa zvinhu zvawo zvinowirirana zvisati zvabviswa muDOM.
• Popovers inogona kukonzereswa nekuda kwechinhu chiri mukati memumvuri DOM.

Ramba uchiverenga kuti uone mashandiro anoita popover nemimwe mienzaniso.

Muenzaniso: Gonesa popovers kwese kwese

Imwe nzira yekutanga mapopovers pane peji ingave yekuvasarudza nehunhu hwavo data-bs-toggle:

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

Muenzaniso: Kushandisa containersarudzo

Paunenge uine mamwe masitayera pane chinhu chemubereki chinokanganisa popover, iwe unozoda kutsanangura tsika containerkuitira kuti popover's HTML ioneke mukati mechinhu ichocho.

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

Muenzaniso

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

Nzira ina

Sarudzo ina dziripo: kumusoro, kurudyi, pasi, uye kuruboshwe zvakaenderana. Mafambiro anotaridzwa kana uchishandisa Bootstrap muRTL.

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

Ramba paunodzvanya kunotevera

Shandisa focuschibatiso kuti udzinge mapopovers pakudzvanya kunotevera kwemushandisi kwechimwe chinhu pane chekuchinja.

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

Zvinhu zvakaremara

Zvinhu zvine disabledhunhu hazvidyidzane, zvichireva kuti vashandisi havagone kusimudza kana kudzvanya kuti vakonzerese popover (kana tooltip). Sekushanda, iwe unozoda kukonzeresa popover kubva pakuputira <div>kana <span>, yakanyatsogadzirwa keyboard-inotariswa uchishandisa tabindex="0".

Kune akaremara popover zvinokonzeresa, unogona zvakare kuda data-bs-trigger="hover focus"kuitira kuti popover ioneke semhinduro yekuona nekukurumidza kune vashandisi vako sezvo vangasatarisira kudzvanya chinhu chakaremara.

<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

Variables

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

Usage

Gonesa mapopovers kuburikidza neJavaScript:

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

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-bs-, semu data-bs-animation="". Ita shuwa yekushandura iyo kesi mhando yezita resarudzo kubva kameraCase kuenda ku kebab-kesi kana uchipfuura sarudzo kuburikidza ne data hunhu. Semuenzaniso, pane kushandisa data-bs-customClass="beautifier", shandisa data-bs-custom-class="beautifier".

Kushandisa basa nepopperConfig

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

Nzira

show

Inoratidza kubuda kwechimwe chinhu. Inodzokera kumunhu arikufona popover isati yanyatsoratidzwa (kureva kuti shown.bs.popoverchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yehupover. Mapopovers ane zita uye zvirimo zvese zviri zero-kureba hazvimbotaridzwa.

myPopover.show()

hide

Inovanza kubuda kwechinhu. Inodzokera kune ari kufona popover isati yanyatsovanzwa (kureva hidden.bs.popoverchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yehupover.

myPopover.hide()

toggle

Inoshandura kubuda kwechinhu. Inodzokera kumunhu arikufona popover isati yanyatsoratidzwa kana kuvanzwa (kureva kuti shown.bs.popoverkana hidden.bs.popoverchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yehupover.

myPopover.toggle()

kurasa

Inovanza uye inoparadza popover yechinhu (Inobvisa data rakachengetwa pachinhu cheDOM). Mapopover anoshandisa kugovera (ayo anogadzirwa pachishandiswa sarudzoselector ) haagone kuparadzwa ega pane zvinokonzeresa zvinhu .

myPopover.dispose()

enable

Inopa element's popover kugona kuratidzwa. Popovers inogoneswa neiyo default.

myPopover.enable()

disable

Inobvisa kugona kwechinhu chinobuda pachena. Iyo popover inongo kwanisa kuratidzwa kana ikabatidzwa zvakare.

myPopover.disable()

toggleEnabled

Inosandura kugona kwechinhu chinobuda kuti chiratidze kana kuvanzwa.

myPopover.toggleEnabled()

update

Inovandudza nzvimbo yechinhu chinobuda.

myPopover.update()

getInstance

Static nzira iyo inokutendera iwe kuti uwane iyo popover muenzaniso yakabatana neiyo DOM chinhu

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

getOrCreateInstance

Static nzira iyo inokutendera iwe kuti uwane iyo popover muenzaniso yakabatana neiyo DOM chinhu, kana kugadzira imwe nyowani kana isina kutangwa.

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

Zviitiko

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