Поповерууд

Тойм

Popover залгаасыг ашиглахдаа анхаарах зүйлс:

• Поповерууд байрлал тогтоохдоо гуравдагч талын Поппер номын санд тулгуурладаг . Та bootstrap.js-ээс өмнө popper.min.js- г оруулах эсвэл поповеруудыг ажиллуулахын тулд Поппер агуулсан bootstrap.bundle.min.js/ ашиглах ёстой!bootstrap.bundle.js
• Поповерууд нь хараат байдлаар tooltip залгаасыг шаарддаг.
• Поповерууд нь гүйцэтгэлийн шалтгаанаар сонгогддог тул та өөрөө эхлүүлэх хэрэгтэй .
• Тэг урт titleба contentутгууд нь поповыг хэзээ ч харуулахгүй.
• container: 'body'Илүү төвөгтэй бүрэлдэхүүн хэсгүүдэд (манай оролтын бүлгүүд, товчлуурын бүлгүүд гэх мэт) асуудал гаргахгүйн тулд зааж өгнө үү .
• Нууцлагдмал элементүүд дээр поповеруудыг өдөөх нь ажиллахгүй.
• Поповер .disabledэсвэл disabledэлементүүдийг боодлын элемент дээр өдөөх ёстой.
• Олон мөрөнд ороосон зангуунаас өдөөх үед поповерууд зангууны нийт өргөний хооронд төвлөрөх болно. Энэ зан үйлээс зайлсхийхийн тулд .text-nowrapөөрийн s дээр ашиглаарай .<a>
• DOM-ээс харгалзах элементүүдийг устгахаас өмнө поповуудыг нуусан байх ёстой.
• Сүүдрийн DOM доторх элементийн ачаар поповеруудыг өдөөж болно.

Зарим жишээн дээр поповерууд хэрхэн ажилладагийг харахын тулд үргэлжлүүлэн уншина уу.

Жишээ: Хаа сайгүй поповеруудыг идэвхжүүл

Хуудас дээрх бүх поповыг эхлүүлэх нэг арга бол тэдгээрийг data-bs-toggleшинж чанараар нь сонгох явдал юм:

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

Жишээ нь: containerСонголтыг ашиглаж байна

Хэрэв таны эх элемент дээр поповерт саад болох зарим загвар байгаа бол containerпоповерын HTML нь тухайн элемент дотор харагдахын тулд өөрчлөн тохируулахыг хүсэх болно.

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

Жишээ

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

Дөрвөн чиглэл

Дөрвөн сонголт боломжтой: дээд, баруун, доод, зүүн зэрэгцүүлсэн. RTL дээр Bootstrap ашиглах үед зааврыг толин тусгал хийдэг.

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

Дараагийн товшилтоор хаах

focusХэрэглэгч сэлгэх элементээс өөр элемент дээр дараагийн товшилтоор поповеруудыг хаахын тулд гохыг ашиглана уу.

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

Идэвхгүй элементүүд

Атрибуттай элементүүд нь disabledинтерактив биш тул хэрэглэгчид хулганаа аваачиж эсвэл товшиж popover (эсвэл хэрэгслийн зөвлөмж)-ийг идэвхжүүлэх боломжгүй гэсэн үг юм. Үүнийг шийдвэрлэхийн тулд та боодолоос поповыг өдөөх <div>эсвэл <span>гар дээр анхаарлаа төвлөрүүлэхэд тохиромжтой tabindex="0".

Идэвхгүй болсон поповер триггерүүдийн хувьд та поповер нь идэвхгүй болсон элемент дээр дарнаdata-bs-trigger="hover focus" гэж бодохгүй байгаа тул хэрэглэгчдэд шууд харааны санал болгож харуулахыг илүүд үзэж болно.

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

Сасс

Хувьсагч

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

Хэрэглээ

JavaScript-ээр поповеруудыг идэвхжүүлэх:

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

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-bs-хавсаргана data-bs-animation="". Өгөгдлийн шинж чанараар сонголтуудыг дамжуулахдаа опционы нэрийн төрлийг camelCase-аас kebab-case болгон өөрчлөхөө мартуузай. Жишээлбэл, ашиглахын оронд data-bs-customClass="beautifier"ашиглах data-bs-custom-class="beautifier".

Функцийг ашигланpopperConfig

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

Арга зүй

шоу

Элементийн поповыг харуулна. Поповер харагдахаас өмнө (өөрөөр хэлбэл shown.bs.popoverүйл явдал болохоос өмнө) дуудагч руу буцна. Энэ нь поповыг "гараар" өдөөдөг гэж үздэг. Гарчиг болон агуулга нь хоёулаа 0 урттай поповеруудыг хэзээ ч харуулахгүй.

myPopover.show()

нуугдах

Элементийн поповыг нууна. Поповыг нуухаас өмнө (өөрөөр хэлбэл hidden.bs.popoverүйл явдал болохоос өмнө) дуудагч руу буцна. Энэ нь поповыг "гараар" өдөөдөг гэж үздэг.

myPopover.hide()

солих

Элементийн поповыг асаадаг. Поповыг харуулах эсвэл нуухаас өмнө (өөрөөр хэлбэл shown.bs.popoverэсвэл hidden.bs.popoverүйл явдал болохоос өмнө) дуудагч руу буцна. Энэ нь поповыг "гараар" өдөөдөг гэж үздэг.

myPopover.toggle()

захиран зарцуулах

Элементийн поповыг нууж устгана (DOM элемент дээр хадгалагдсан өгөгдлийг устгана). Төлөөлөгчийг ашигладаг поповеруудыг ( сонголтыг ашиглан үүсгэсэнselector ) удамшлын триггер элементүүд дээр тус тусад нь устгах боломжгүй.

myPopover.dispose()

идэвхжүүлэх

Элементийн поповыг харуулах боломжийг олгоно. Popovers нь анхдагчаар идэвхждэг.

myPopover.enable()

идэвхгүй болгох

Элементийн поповыг харуулах боломжийг арилгана. Дахин идэвхжүүлсэн тохиолдолд л поповыг харуулах боломжтой.

myPopover.disable()

toggleEnabled

Элементийн поповыг харуулах эсвэл нуух боломжийг сэлгэдэг.

myPopover.toggleEnabled()

шинэчлэх

Элементийн поповерын байрлалыг шинэчилнэ.

myPopover.update()

getInstance

DOM элементтэй холбоотой поповын жишээг авах боломжийг олгодог статик арга

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

getOrCreateInstance

DOM элементтэй холбоотой поповын жишээг авах эсвэл эхлүүлээгүй тохиолдолд шинээр үүсгэх боломжийг олгодог статик арга.

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

Үйл явдал

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