Popoverlar

Umumiy koʻrinish

Popover plaginini ishlatishda bilishingiz kerak bo'lgan narsalar:

• Popoverlar joylashishni aniqlash uchun uchinchi tomon kutubxonasi Popperga tayanadilar . Popoverlar ishlashi uchun bootstrap.js dan oldin popper.min.js ni qo'shishingiz yoki Popper o'z ichiga olgan bootstrap.bundle.min.js/ dan foydalanishingiz kerak !bootstrap.bundle.js
• Popoverlar bog'liqlik sifatida asboblar paneli plaginini talab qiladi.
• Popoverlar ishlash sabablariga ko'ra tanlanadi, shuning uchun ularni o'zingiz ishga tushirishingiz kerak .
• Nol uzunlik titleva contentqiymatlar hech qachon popoverni ko'rsatmaydi.
• container: 'body'Murakkabroq komponentlarda (masalan, kirish guruhlarimiz, tugma guruhlarimiz va h.k.) muammolarni keltirib chiqarmaslik uchun belgilang .
• Yashirin elementlarda popoverlarni ishga tushirish ishlamaydi.
• .disabledO'ram elementida yoki disabledelementlar uchun popoverlar ishga tushirilishi kerak.
• Bir nechta chiziqlar bo'ylab o'ralgan langarlardan ishga tushirilganda, popoverlar langarlarning umumiy kengligi o'rtasida joylashgan bo'ladi. Ushbu xatti-harakatdan qochish .text-nowrapuchun s-da foydalaning.<a>
• Tegishli elementlar DOMdan olib tashlanishidan oldin popoverlar yashirilishi kerak.
• Popoverlar soyali DOM ichidagi element tufayli ishga tushirilishi mumkin.

Ba'zi misollar bilan popoverlar qanday ishlashini ko'rish uchun o'qishni davom eting.

Misol: hamma joyda popoverlarni yoqing

Sahifadagi barcha popoverlarni ishga tushirishning bir usuli ularni data-bs-toggleatributiga ko'ra tanlashdir:

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

Misol: Variantdan containerfoydalanish

Agar sizda asosiy elementda popoverga xalaqit beradigan ba'zi uslublar mavjud bo'lsa container, popoverning HTML o'rniga ushbu element ichida paydo bo'lishi uchun maxsus belgilashni xohlaysiz.

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

Misol

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

To'rt yo'nalish

To'rtta variant mavjud: yuqori, o'ng, pastki va chapga tekislangan. RTL-da Bootstrap-dan foydalanganda ko'rsatmalar aks ettiriladi.

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

Keyingi bosishda o'chirib qo'ying

Foydalanuvchi focusoʻzgartirish elementidan boshqa elementni keyingi bosganida popoverlarni oʻchirish uchun triggerdan foydalaning.

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

O'chirilgan elementlar

Atributga ega boʻlgan elementlar disabledinteraktiv emas, yaʼni foydalanuvchilar qalqib chiquvchi (yoki asboblar maslahati)ni ishga tushirish uchun ularni sichqonchani koʻtarib yoki bosishlari mumkin emas. Vaqtinchalik yechim sifatida siz popoverni o‘ramdan ishga tushirishni <div>xohlaysiz .<span>tabindex="0"

O'chirilgan popover triggerlari uchun siz popover foydalanuvchilaringizga darhol vizual fikr-mulohaza sifatida ko'rinishini ham afzal ko'rishingiz mumkin, chunki ular o'chirilgan elementni bosishnidata-bs-trigger="hover focus" kutmasligi mumkin .

<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

O'zgaruvchilar

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

Foydalanish

JavaScript orqali popoverlarni yoqish:

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

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-bs-kabi qoʻshing data-bs-animation="". Variantlarni maʼlumotlar atributlari orqali oʻtkazishda optsion nomining registr turini camelCase’dan kabob-case’ga oʻzgartirishni unutmang. Misol uchun, dan foydalanish o'rniga data-bs-customClass="beautifier", foydalaning data-bs-custom-class="beautifier".

Funktsiyadan foydalanishpopperConfig

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

Usullari

ko'rsatish

Elementning popoverini ko'rsatadi. Qo'ng'iroq qiluvchiga popover haqiqatda ko'rsatilishidan oldin (ya'ni shown.bs.popovervoqea sodir bo'lishidan oldin) qaytadi. Bu popoverning "qo'lda" ishga tushirilishi hisoblanadi. Sarlavhasi va mazmuni nol uzunlikdagi popoverlar hech qachon ko'rsatilmaydi.

myPopover.show()

yashirish

Elementning qalqib chiquvchi oynasini yashiradi. Qo'ng'iroq qiluvchiga popover yashirin bo'lishidan oldin (ya'ni hidden.bs.popovervoqea sodir bo'lishidan oldin) qaytadi. Bu popoverning "qo'lda" ishga tushirilishi hisoblanadi.

myPopover.hide()

almashtirish

Elementning qalqib chiquvchi oynasini almashtiradi. Qo'ng'iroq qiluvchiga popover haqiqatda ko'rsatilishi yoki yashirilishidan oldin (ya'ni shown.bs.popoveryoki hidden.bs.popoverhodisa sodir bo'lishidan oldin) qaytadi. Bu popoverning "qo'lda" ishga tushirilishi hisoblanadi.

myPopover.toggle()

tasarruf qilish

Elementning popoverini yashiradi va yo'q qiladi (DOM elementida saqlangan ma'lumotlarni o'chiradi). Delegatsiyadan foydalanadigan popoverlarni ( opsiya yordamida yaratilgan )selector nasl trigger elementlarida alohida yo‘q qilib bo‘lmaydi.

myPopover.dispose()

yoqish

Elementning popoverini ko'rsatish imkoniyatini beradi. Popovers sukut bo'yicha yoqilgan.

myPopover.enable()

o'chirish

Elementning qalqib chiquvchisini ko'rsatish imkoniyatini olib tashlaydi. Popover faqat qayta yoqilgan bo'lsa, ko'rsatilishi mumkin bo'ladi.

myPopover.disable()

toggleEnabled

Element popoverini ko‘rsatish yoki yashirish imkoniyatini o‘zgartiradi.

myPopover.toggleEnabled()

yangilash

Elementning qalqib chiquvchi joylashuvini yangilaydi.

myPopover.update()

getInstance

DOM elementi bilan bog'langan popover misolini olish imkonini beruvchi statik usul

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

getOrCreateInstance

DOM elementi bilan bog'langan popover misolini olish yoki agar u ishga tushirilmagan bo'lsa, yangisini yaratish imkonini beruvchi statik usul

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

Voqealar

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