Popovers

Gysgaça syn

Açylýan plugin ulanylanda bilmeli zatlar:

• Popovers ýerleşmek üçin üçünji tarap kitaphanasy Popper -ä bil baglaýar . Öň popper.min.js goşmaly ýa -da Popper-i öz içine alýan bootstrap.jsbirini ulanmaly .bootstrap.bundle.min.js
• Popovers garaşlylyk hökmünde popover 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 çyzyk bilen örtülen 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ň.

Mysallar

Açylýanlary açyň

Aboveokarda belläp geçişimiz ýaly, popoverleri ulanmazdan ozal başlamaly. Sahypadaky ähli açyjylary başlamagyň bir usuly, olary öz data-bs-toggleaýratynlyklary boýunça saýlamak bolar:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Göni görkeziş

Aşakdaky göni ýaýlymy görkezmek üçin ýokardaky parça meňzeş JavaScript ulanýarys. Atlar üsti bilen düzülýär data-bs-titlewe beden mazmuny düzülýär data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-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. RTL-de Bootstrap ulanylanda görkezmeler aýnalanýar. data-bs-placementUgry üýtgetmegi düzüň .

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

Omöritecontainer

Esasy elementde popover-a päsgel berýän käbir stilleriňiz bar bolsa, containerýerine ýetirijiniň HTML-iň ýerine şol elementiň içinde peýda bolmagy üçin bir adat görkezmek islärsiňiz. Bu jogap beriji tablisalarda, giriş toparlarynda we şuňa meňzeşlerde köp bolýar.

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

Aç -açan adat goýmak isleýän başga bir ýagdaýyňyz , popover-iň modala goşulandygyna göz ýetirmek üçin modal gepleşik penjiresiniňcontainer içindäki açyjylardyr. Bu, interaktiw elementleri öz içine alýan açyjylar üçin aýratyn möhümdir - modal gepleşikler ünsi duzaga düşürer, şonuň üçin popover modalyň çaga elementi bolmasa, ulanyjylar bu interaktiw elementlere ünsi jemläp ýa-da işjeňleşdirip bilmezler.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Omörite açylýan ýerler

CSS üýtgeýjilerini ulanyp, popoversiň görnüşini sazlap bilersiňiz . Customörite data-bs-custom-class="custom-popover"daşky görnüşimizi giňeltmek we ýerli CSS üýtgeýjileriniň käbirini ýok etmek üçin ulanýarys.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

Indiki gezek basyň

focusUlanyjynyň üýtgetmek elementinden başga bir elementiň indiki gezek basylmagynda açylanlary aýyrmak üçin trigger ulanyň .

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.popover-dismiss', {
  trigger: 'focus'
})

Öçürilen elementler

Aýratynlygy 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>

CSS

Üýtgeýjiler

“Bootstrap” -yň ösýän CSS üýtgeýjileriniň çemeleşmesiniň bir bölegi hökmünde, popoversler .popoverhakyky wagtlaýyn özleşdirmek üçin ýerli CSS üýtgeýjilerini ulanýarlar. CSS üýtgeýjileriniň bahalary Sass arkaly kesgitlenýär, şonuň üçin Sass sazlamasy henizem goldanýar.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Sass üýtgeýjileri

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

Ulanylyşy

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

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

Görnüş

Opsiýalary maglumat atributlary ýa-da JavaScript arkaly geçirip bolýandygy sebäpli, opsiýa adyny data-bs-bolşy ýaly goşup bilersiňiz data-bs-animation="{value}". Opsiýalary maglumat atributlary arkaly geçireniňizde , opsiýanyň adynyň görnüşini “ camelCase ” -den “ kebab-case ” diýip üýtgediň. Mysal üçin, data-bs-custom-class="beautifier"ýerine ulanyň data-bs-customClass="beautifier".

“Bootstrap 5.2.0” -e görä, ähli komponentler JSON setiri hökmünde ýönekeý komponent konfigurasiýasyny saklap bilýän tejribe ätiýaçlandyrylan maglumat atributyny goldaýar. data-bs-configHaçan-da bir element data-bs-config='{"delay":0, "title":123}'we data-bs-title="456"häsiýetler bar bolsa, iň soňky titlebaha bolar 456we aýratyn maglumatlar atributlary berlen bahalary ýok eder data-bs-config. Mundan başga-da, bar bolan maglumatlar atributlary ýaly JSON bahalaryny ýerleşdirmäge ukyply data-bs-delay='{"show":0,"hide":150}'.

Bilen işlemekpopperConfig

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

Usullar

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Wakalar

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