Popovers

Mwachidule

Zomwe muyenera kudziwa mukamagwiritsa ntchito pulogalamu ya popover:

• Popovers amadalira laibulale ya chipani chachitatu Popper kuti akhazikike. Muyenera kuphatikiza popper.min.js pamaso pa bootstrap.js kapena gwiritsani ntchito bootstrap.bundle.min.js/ bootstrap.bundle.jsyomwe ili ndi Popper kuti popovers agwire ntchito!
• Popovers amafuna chida chowonjezera ngati chodalira.
• Ma Popover amasankha kulowa pazifukwa zogwirira ntchito, chifukwa chake muyenera kuziyambitsa nokha .
• Ziro-utali titlendi contentzikhalidwe sizidzawonetsa popover.
• Nenani container: 'body'kuti mupewe kupereka zovuta muzinthu zovuta kwambiri (monga magulu athu olowetsa, magulu a batani, ndi zina).
• Kuyambitsa popover pazinthu zobisika sikungagwire ntchito.
• Popovers .disabledkapena disabledzinthu ziyenera kuyambitsidwa pa chinthu chomangira.
• Zikayambidwa kuchokera ku anangula omwe amazungulira mizere ingapo, ma popovers amakhala pakati pa nangula wonsewo. Gwiritsani .text-nowrapntchito zanu <a>kuti mupewe izi.
• Popovers ayenera kubisidwa zinthu zawo zofananira zisanachotsedwe mu DOM.
• Popovers amatha kuyambika chifukwa cha chinthu chomwe chili mkati mwa mthunzi wa DOM.

Pitilizani kuwerenga kuti muwone momwe popover amagwirira ntchito ndi zitsanzo zina.

Chitsanzo: Atseguleni popoposera paliponse

Njira imodzi yokhazikitsira ma popovers onse patsamba ingakhale kuwasankha mwamakhalidwe awo data-bs-toggle:

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

Chitsanzo: Kugwiritsa ntchito containernjira

Mukakhala ndi masitaelo pa chinthu cha makolo chomwe chimasokoneza popover, mudzafuna kufotokoza mwambo containerkuti HTML ya popover iwonekere mkati mwa chinthucho.

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

Chitsanzo

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

Njira zinayi

Zosankha zinayi zilipo: pamwamba, kumanja, pansi, ndi kumanzere. Mayendedwe amawonekera mukamagwiritsa ntchito Bootstrap mu 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>

Chotsani mukadina kwina

Gwiritsani ntchito focuschoyambitsacho kuti muchotse zotulukapo pakadina kotsatira kwa wogwiritsa wa chinthu china kusiyana ndi chinthu chosinthira.

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

Zinthu zolemala

Zinthu zomwe zili ndi mawonekedwe disabledake sizimalumikizana, kutanthauza kuti ogwiritsa ntchito sangasunthe kapena kuzidina kuti ayambitse popover (kapena chida). Monga njira yogwirira ntchito, mudzafuna kuyambitsa popover kuchokera pa chokulunga <div>kapena <span>, chopangidwa kuti chikhale chokhazikika pogwiritsa ntchito tabindex="0".

Pazinthu zoyambitsa popover zolemala, mungakondenso data-bs-trigger="hover focus"kuti popover iwoneke ngati malingaliro apompopompo kwa ogwiritsa ntchito anu chifukwa sangayembekezere kudina chinthu cholemala.

<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

Zosintha

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

Kugwiritsa ntchito

Yambitsani popover kudzera pa JavaScript:

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

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-bs-, monga mu data-bs-animation="". Onetsetsani kuti musinthe mtundu wamtundu wa zosankha kuchokera ku camelCase kupita ku kebab-case podutsa zosankha kudzera pa data. Mwachitsanzo, m'malo mogwiritsa data-bs-customClass="beautifier"ntchito data-bs-custom-class="beautifier".

Kugwiritsa ntchito ndipopperConfig

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

Njira

chiwonetsero

Imawulula kuchuluka kwa zinthu. Imabwereranso kwa woyimba foniyo isanawonetsedwe (ie zisanachitike shown.bs.popover). Izi zimaganiziridwa kuti ndi "zamanja" zoyambitsa popover. Ma Popovers omwe mutu wawo ndi zomwe zili muutali wa ziro sizimawonetsedwa.

myPopover.show()

kubisa

Imabisa kuchuluka kwa zinthu. Imabwereranso kwa woyimba foniyo isanabisike (ie zisanachitike hidden.bs.popover). Izi zimaganiziridwa kuti ndi "zamanja" zoyambitsa popover.

myPopover.hide()

kusintha

Imasintha kuphulika kwa chinthu. Imabwereranso kwa woyimba foniyo isanawonetsedwe kapena kubisidwa (ie zisanachitike shown.bs.popoverkapena hidden.bs.popoverchochitikacho). Izi zimaganiziridwa kuti ndi "zamanja" zoyambitsa popover.

myPopover.toggle()

kutaya

Imabisa ndikuwononga popover ya chinthu (Imachotsa zosungidwa pa chinthu cha DOM). Ma Popovers omwe amagwiritsa ntchito kugawira ena (omwe amapangidwa pogwiritsa ntchito selectormwayi ) sangawonongedwe paokha pazoyambitsa zoyambitsa.

myPopover.dispose()

athe

Zimapereka mwayi wowoneka bwino wa element. Popovers amayatsidwa mwachisawawa.

myPopover.enable()

letsa

Imachotsa kuthekera kwa popover ya chinthu kuti iwonetsedwe. Popover imatha kuwonetsedwa ngati iyatsidwanso.

myPopover.disable()

toggleEnabled

Imasintha kuthekera kwa kufalikira kwa chinthu kuti chiwoneke kapena kubisika.

myPopover.toggleEnabled()

sinthani

Imasinthiratu pomwe zinthu zachuluka.

myPopover.update()

getInstance

Njira yosasunthika yomwe imakupatsani mwayi wopeza mawonekedwe a popover olumikizidwa ndi chinthu cha DOM

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

GetOrCreateInstance

Njira yosasunthika yomwe imakupatsani mwayi wopeza mawonekedwe a popover olumikizidwa ndi chinthu cha DOM, kapena pangani china china ngati sichinayambike.

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

Zochitika

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