Popovers

Têgihiştinî

Tiştên ku divê hûn zanibin dema ku pêveka popover bikar tînin:

• Popover ji bo pozîsyonê xwe dispêrin pirtûkxaneya partiya sêyemîn Popper . Divê hûn berî bootstrap.js -ê popper.min.js-ê têxinbootstrap.bundle.min.js nav xwe an jî / bootstrap.bundle.jsya ku Popper-ê dihewîne bikar bînin da ku popover kar bikin!
• Popover pêveka tooltip -ê wekî pêvedanê hewce dike.
• Popover ji ber sedemên performansê têne hilbijartin, ji ber vê yekê divê hûn bi xwe wan dest pê bikin .
• Zero-dirêj titleû contentnirx dê ti carî popoverek nîşan nedin.
• Diyar container: 'body'bikin ku hûn di hêmanên tevlihevtir de (mîna komên têketina me, komên bişkokê, hwd) pirsgirêkan çênekin.
• Vekirina popoverên li ser hêmanên veşartî dê nexebite.
• Pêdivî ye ku popoverên ji bo .disabledan disabledhêmanan li ser hêmanek pêçandî werin avêtin.
• Dema ku ji lengerên ku li gelek rêzan diqelibin werin avêtin, popover dê di navbera firehiya giştî ya lengeran de bibin navend. .text-nowrapLi ser s-ya xwe bikar bînin <a>ku ji vê tevgerê dûr bixin.
• Berî ku hêmanên wan ên têkildar ji DOM-ê werin rakirin divê popover werin veşartin.
• Popover dikarin bi saya hêmanek di hundurê DOM-a siya de werin dest pê kirin.

Xwendina xwe bidomînin da ku bibînin ka popover çawa bi hin mînakan re dixebitin.

Mînak: Li her derê popovers çalak bike

Yek rê ji bo destpêkirina hemî popoverên li ser rûpelek dê ev be ku hûn wan li gorî taybetmendiya xwe data-bs-togglehilbijêrin:

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

Mînak: Vebijêrk bikar containertînin

Gava ku we hin şêwazên li ser hêmanek dêûbav hene ku mudaxeleyî popoverekê dikin, hûn ê bixwazin ku xwerûyek diyar bikin containerda ku li şûna wê HTML-a popover di hundurê wê hêmanê de xuya bibe.

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

Mînak

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

Çar rê

Çar vebijark hene: jor, rast, jêr û çepê rêzkirî. Dema ku Bootstrap-ê di RTL-ê de bikar tînin rêwerz têne xuyang kirin.

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

Li ser klîkek paşîn veqetînin

Tetikê bikar focusbînin da ku popoverên li ser klîkek paşîn a bikarhêner a hêmanek cûda ji hêmana veguheztinê dûr bixe.

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

hêmanên astengdar

Hêmanên bi disabledtaybetmendiyê ne înteraktîf in, yanî bikarhêner nikanin li wan bizivirin an bikirtînin da ku popoverek (an şîretek amûrek) bişopînin. Wekî çareseriyek, hûn ê bixwazin ku popover-ê ji pêçanek <div>an jî <span>, ku bi îdeal e ku bi karanîna klavyeyê-focusable hatî çêkirin vekin tabindex="0".

Ji bo pêlên popover ên neçalak, hûn dikarin her weha tercîh data-bs-trigger="hover focus"bikin da ku popover ji bikarhênerên we re wekî bertekek dîtbarî ya tavilê xuya bibe ji ber ku ew ne li bendê ne ku li ser hêmanek neçalak bikirtînin .

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

Bikaranîna

Bi JavaScriptê popovers çalak bikin:

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

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-bs-, wekî di data-bs-animation="". Dema ku vebijarkan bi taybetmendiyên daneyê re derbas dikin, pê ewle bin ku celebê doza navê vebijarkê ji camelCase biguhezînin kebab-case. Mînakî, li şûna ku bikar bînin data-bs-customClass="beautifier", bikar bînin data-bs-custom-class="beautifier".

Bikaranîna fonksiyonê bipopperConfig

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

Methods

rêdan

Popovera hêmanek eşkere dike. Berî ku popover bi rastî were xuyang kirin (ango berî ku shown.bs.popoverbûyer çêbibe) vedigere bangewazî. Ev wekî "bi destan" vekêşana popover tê hesibandin. Popoverên ku sernav û naveroka wan herdu jî sifir-dirêj in qet nayên xuyang kirin.

myPopover.show()

veşartin

Hêmanek popover vedişêre. Berî ku popover bi rastî veşêre (ango berî ku hidden.bs.popoverbûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana popover tê hesibandin.

myPopover.hide()

toggle

Pîvana hêmanekê vedike. Berî ku popover bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.popoveran hidden.bs.popoverbûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana popover tê hesibandin.

myPopover.toggle()

avêtin

Popovera hêmanekê vedişêre û hilweşîne (Daneyên hilanîn ên li ser hêmana DOM-ê radike). Popoverên ku delegasyonê bikar tînin (yên ku bi karanîna vebijarkê selectortêne afirandin ) nekarin bi rengekî ferdî li ser hêmanên nifûsê werin hilweşandin.

myPopover.dispose()

bikêrkirin

Kapasîteya nîşankirinê dide popovera hêmanan. Popover ji hêla xwerû ve têne çalak kirin.

myPopover.enable()

neçalak bike

Kapasîteya ku popovera hêmanek were xuyang kirin jê dike. Popover tenê heke ji nû ve were çalak kirin dê bikaribe were xuyang kirin.

myPopover.disable()

toggleEnabled

Desthilatdariya popovera hêmanek ku were xuyang kirin an veşartî vedike.

myPopover.toggleEnabled()

update

Helwesta popovera hêmanekê nûve dike.

myPopover.update()

getInstance

Rêbaza statîk ku dihêle hûn mînaka popover-ê ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin

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

getOrCreateInstance

Rêbaza statîk a ku dihêle hûn mînaka popover-ê ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin, an heke ew nehatibe destpêkirin yek nû biafirînin .

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

Events

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