Popovers

Gysgaça syn

Açylýan plugin ulanylanda bilmeli zatlar:

• Popovers ýerleşmek üçin 3-nji tarap kitaphanasy Popper -ä bil baglaýar . Bootstrap.js-dan öň popper.min.js goşmaly ýa -da popoversiň işlemegi üçin Popper-i ulanmaly bootstrap.bundle.min.js/ ulanmaly bootstrap.bundle.js!
• Popovers garaşlylyk hökmünde gurallar pluginini talap edýär.
• Popovers öndürijilik sebäplerine görä saýlanýar, şonuň üçin olary özüňiz başlamaly .
• Nol uzynlygy titlewe contentbahalary hiç haçan açylmaz.
• container: 'body'Has çylşyrymly komponentlerde kynçylyk döretmezligi kesgitläň (giriş toparlarymyz, düwme toparlarymyz we ş.m.) .
• Gizlin elementlerde açylan popowerler işlemez.
• Elementler .disabledýa-da disabledelementler üçin ýazgylar, örtük elementinde başlamaly.
• Birnäçe setir bilen gurşalan labyrlardan başlanda, gämi duralgalarynyň umumy giňliginiň arasynda jemlener. Bu gylyk-häsiýetden gaça durmak üçin s-leri .text-nowrapulanyň .<a>
• Popovers degişli elementleri DOM-dan aýrylmazdan ozal gizlenmeli.
• Popovers kölegeli DOM içindäki bir elementiň kömegi bilen ýüze çykyp biler.

Käbir mysallar bilen popoversiň nähili işleýändigini görmek üçin okaň.

Mysal: Her ýerde popovers açyň

Sahypadaky ähli açyjylary başlamagyň bir usuly, olary data-bs-toggleatributlary boýunça saýlamak bolar:

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

Mysal: containerOpsiýany ulanmak

Esasy elementde popover-a päsgel berýän käbir stilleriňiz bar bolsa, containeraç-açan HTML-iň ýerine şol elementiň içinde peýda bolmagy üçin bir adat görkezmek islärsiňiz.

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

Mysal

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

Dört ugur

Dört wariant bar: ýokarky, sag, aşaky we çep deňleşdirilen. RTL-de Bootstrap ulanylanda görkezmeler aýnalanýar.

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

Indiki gezek basyň

focusUlanyjynyň üýtgetmek elementinden başga bir elementiň indiki gezek basylmagynda triggerleri ulanyň .

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

Öçürilen elementler

Sypaty bolan elementler disabledinteraktiw däl, ýagny ulanyjylar bir popover (ýa-da gural görkezmesi) açmak üçin basyp ýa-da basyp bilmeýärler. Iş usuly hökmünde, aç-açan önümi bir gabykdan <div>ýa-da iň <span>oňat klawiatura gönükdirilen ulanyp başlarsyňyz tabindex="0".

Maýyp popover triggerleri üçin, popover ulanyjylaryňyza ýapyk elemente basmagynadata-bs-trigger="hover focus" garaşmazlygy sebäpli derrew wizual seslenme bolup görünmegini isläp bilersiňiz .

<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

Üýtgeýjiler

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

Ulanylyşy

JavaScript arkaly açylýan ýerleri açyň:

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

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bs-bolşy ýaly goşuň data-bs-animation="". Opsiýalary maglumat atributlary arkaly geçireniňizde, opsiýanyň adynyň görnüşini kamelCase-den kebab-kase üýtgediň. Mysal üçin, ulanmagyň ýerine data-bs-customClass="beautifier"ulanyň data-bs-custom-class="beautifier".

Bilen işlemekpopperConfig

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

Usullar

görkezmek

Bir elementiň açylýan ýerini açýar. Açylýan ýer görkezilmänkä (ýagny shown.bs.popoverwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu popoveriň “gollanma” başlangyjy hasaplanýar. Ady we mazmuny ikisi nol uzynlykdaky popovers hiç haçan görkezilmeýär.

myPopover.show()

gizle

Bir elementiň açylýan ýerini gizleýär. Açylýan ýer hakykatdanam gizlenmänkä (ýagny hidden.bs.popoverwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu popoveriň “gollanma” başlangyjy hasaplanýar.

myPopover.hide()

üýtgetmek

Bir elementiň açylýan ýerini üýtgedýär. Açylýan ýer görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.popoverýa-da hidden.bs.popoverwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu popoveriň “gollanma” başlangyjy hasaplanýar.

myPopover.toggle()

taşlaň

Bir elementiň açylýan ýerini gizleýär we ýok edýär (DOM elementindäki saklanan maglumatlary aýyrýar). Delegasiýany ulanýan poplar (opsiýany ulanyp döredilýär ) selectornesil trigger elementlerinde aýratyn ýok edilip bilinmez.

myPopover.dispose()

işletmek

Bir elementiň açylýan ýerini görkezmek ukybyny berýär. Popovers deslapky görnüşde işledilýär.

myPopover.enable()

öçürmek

Bir elementiň açylýan ýerini görkezmek ukybyny aýyrýar. Açylýan ýer diňe täzeden işledilen ýagdaýynda görkezilip bilner.

myPopover.disable()

açmak

Bir elementiň açylýan ýerini görkezmek ýa-da gizlemek ukybyny üýtgedýär.

myPopover.toggleEnabled()

täzelen

Bir elementiň açylýan ýerini täzeleýär.

myPopover.update()

GetInstance

DOM elementi bilen baglanyşykly popover mysalyny almaga mümkinçilik berýän statiki usul

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

getOrCreateInstance

DOM elementi bilen baglanyşykly popover mysalyny almaga ýa-da başlamadyk ýagdaýynda täzesini döretmäge mümkinçilik berýän statiki usul.

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

Wakalar

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