Үндсэн агуулга руу шилжих Docs навигаци руу алгасах
in English

Поповерууд

Танай сайтын аль ч элементэд iOS-д байдаг шиг Bootstrap popovers нэмэх баримт бичиг, жишээнүүд.

Тойм

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 доторх элементийн ачаар поповеруудыг өдөөж болно.
Анхдагч байдлаар, энэ бүрэлдэхүүн хэсэг нь агуулгыг ариутгагчийг ашигладаг бөгөөд энэ нь тодорхой зөвшөөрөгдөөгүй HTML элементүүдийг арилгадаг. Дэлгэрэнгүй мэдээллийг манай JavaScript баримт бичгийн ариутгагч хэсгийг үзнэ үү.
Энэ бүрэлдэхүүн хэсгийн хөдөлгөөнт эффект нь prefers-reduced-motionмедиа асуулгаас хамаарна. Манай хүртээмжтэй байдлын баримт бичгийн хөдөлгөөнийг багасгасан хэсгийг үзнэ үү .

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

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

Хуудас дээрх бүх поповыг эхлүүлэх нэг арга бол тэдгээрийг 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>бөгөөд мөн шинж <button>чанарыг агуулсан байх ёстой tabindex.

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

Гар болон туслах технологийн хэрэглэгчдэд зориулсан поповеруудыг ажиллуулж байна

Гар хэрэглэгчдэд таны поповеруудыг идэвхжүүлэхийг зөвшөөрөхийн тулд та тэдгээрийг зөвхөн гар дээр төвлөрч, интерактив (холбоос эсвэл маягтын удирдлага гэх мэт) HTML элементүүдэд нэмэх хэрэгтэй. Хэдийгээр дурын HTML элементүүдийг ( <span>s гэх мэт) атрибут нэмснээр анхаарлаа tabindex="0"төвлөрүүлэх боломжтой боловч энэ нь гар хэрэглэгчдэд зориулсан интерактив бус элементүүдэд залхмаар, төөрөгдүүлсэн цонхны цэгүүдийг нэмж өгөх бөгөөд одоогоор ихэнх туслах технологиуд энэ нөхцөлд поповын агуулгыг зарладаггүй. . hoverНэмж дурдахад, зөвхөн поповеруудыг гох гэж бүү найд , учир нь энэ нь гар хэрэглэгчдэд тэднийг өдөөх боломжгүй болгоно.

Сонголтыг ашиглан баялаг, бүтэцлэгдсэн HTML-г поповогт оруулах боломжтой htmlч бид танд хэт их контент нэмэхээс зайлсхийхийг зөвлөж байна. Поповерууд одоогоор ажиллаж байгаа арга нь нэг удаа гарч ирсний дараа контент нь aria-describedbyатрибут бүхий гох элементтэй холбогддог. Үүний үр дүнд поповерын агуулгыг бүхэлд нь туслах технологийн хэрэглэгчдэд нэг урт, тасралтгүй урсгал болгон зарлах болно.

Нэмж дурдахад, өөрийн попover дотор интерактив удирдлага (формат элемент эсвэл холбоос гэх мэт) оруулах боломжтой ч (эдгээр элементүүдийг allowListзөвшөөрөгдсөн шинж чанарууд болон шошгон дээр нэмэх замаар) одоогоор поповер нь гарын фокус дарааллыг удирдахгүй гэдгийг анхаарна уу. Гарын хэрэглэгч popover-г нээх үед гол анхаарлаа өдөөх элемент дээр үлдээдэг бөгөөд поповер нь ихэвчлэн баримт бичгийн бүтцэд гохыг шууд дагаж мөрддөггүй тул урагшлах/дарах баталгаа байхгүй.TABгар хэрэглэгчийг popover руу шилжүүлэх болно. Товчхондоо, зүгээр л поповер дээр интерактив удирдлага нэмэх нь эдгээр хяналтыг гар хэрэглэгчид болон туслах технологийн хэрэглэгчдэд ашиглах боломжгүй/ашиглах боломжгүй, эсвэл хамгийн багадаа логик бус ерөнхий фокус дараалал үүсгэх магадлалтай. Эдгээр тохиолдолд оронд нь модаль харилцах цонхыг ашиглахыг бодоорой.

Сонголтууд

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

Аюулгүй байдлын үүднээс sanitize, sanitizeFn, болон allowListсонголтуудыг өгөгдлийн шинж чанаруудыг ашиглан нийлүүлэх боломжгүйг анхаарна уу.
Нэр Төрөл Өгөгдмөл Тодорхойлолт
animation логик true Popover руу CSS бүдгэрүүлэх шилжилтийг ашиглана уу
container мөр | элемент | худлаа false

Тодорхой элементэд поповыг хавсаргана. Жишээ нь: container: 'body'. Энэ сонголт нь цонхны хэмжээг өөрчлөх үед поповерыг идэвхжүүлэгч элементээс холдохоос сэргийлж, баримт бичгийн урсгалд гох элементийн ойролцоо байрлуулах боломжийг олгодогоороо онцгой ач холбогдолтой юм.

content мөр | элемент | функц ''

data-bs-contentХэрэв шинж чанар байхгүй бол агуулгын өгөгдмөл утга .

Хэрэв функц өгөгдсөн thisбол поповер залгагдсан элементийн лавлагаагаар дуудагдах болно.

delay тоо | обьект 0

Поповерыг харуулах, нуух саатал (ms) - гарын авлагын гох төрөлд хамаарахгүй

Хэрэв дугаар өгсөн бол нуух/шоулуулах хоёуланд нь саатал хэрэглэнэ

Объектын бүтэц нь:delay: { "show": 500, "hide": 100 }

html логик false Popover руу HTML оруулна уу. Хэрэв худал бол innerTextөмчийг DOM-д контент оруулахад ашиглана. Хэрэв та XSS халдлагын талаар санаа зовж байгаа бол текстийг ашиглана уу.
placement мөр | функц 'right'

Поповерыг хэрхэн байрлуулах вэ - auto | дээд | доод | зүүн | зөв.
Тодорхойлсон үед autoэнэ нь поповыг динамикаар өөрчлөх болно.

Байршлыг тодорхойлоход функцийг ашиглах үед түүнийг эхний аргумент болгон popover DOM зангилаа, хоёр дахь нь DOM зангилаагаар дууддаг. Контекстийг поповын thisжишээнд тохируулсан.

selector мөр | худлаа false Хэрэв сонгогчийг өгсөн бол popover объектуудыг заасан зорилтууд руу шилжүүлнэ. Практикт энэ нь динамик HTML контентыг поповер нэмэхэд ашигладаг. Үүнийг болон мэдээллийн жишээг үзнэ үү .
template мөр '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Popover үүсгэх үед ашиглах үндсэн HTML.

Поповерыг . title_.popover-header

Поповерыг . content_.popover-body

.popover-arrowпоповын сум болно.

Хамгийн гадна талын боодлын элемент нь .popoverангитай байх ёстой.

title мөр | элемент | функц ''

titleХэрэв шинж чанар байхгүй бол гарчгийн өгөгдмөл утга .

Хэрэв функц өгөгдсөн thisбол поповер залгагдсан элементийн лавлагаагаар дуудагдах болно.

trigger мөр 'click' Поповер хэрхэн идэвхждэг вэ - | дээр дарна уу хулганаа аваач | төвлөрөл | гарын авлага. Та олон өдөөгчийг дамжуулж болно; тэдгээрийг зайгаар тусгаарла. manualбусад өдөөгчтэй хослуулах боломжгүй.
fallbackPlacements массив ['top', 'right', 'bottom', 'left'] Массив дахь байршлын жагсаалтыг гаргаж (давуу дарааллаар) нөөц байршуулалтыг тодорхойлно уу. Дэлгэрэнгүй мэдээллийг Попперын зан үйлийн баримт бичгүүдээс үзнэ үү
boundary мөр | элемент 'clippingParents' Поповерын халих хязгаарлалтын хил хязгаар (зөвхөн Попперын preventOverflow хувиргагчид хамаарна). Анхдагч байдлаар энэ 'clippingParents'нь HTMLElement лавлагааг хүлээн авах боломжтой (зөвхөн JavaScript-ээр). Дэлгэрэнгүй мэдээллийг Попперын detectOverflow баримтаас үзнэ үү .
customClass мөр | функц ''

Поповер гарч ирэх үед ангиудыг нэмнэ үү. Загварт заасан ангиуд дээр эдгээр ангиуд нэмэгдэх болно гэдгийг анхаарна уу. Олон анги нэмэхийн тулд тэдгээрийг хоосон зайгаар тусгаарлана уу: 'class-1 class-2'.

Та нэмэлт ангийн нэрийг агуулсан нэг мөрийг буцаах функцийг дамжуулж болно.

sanitize логик true Ариутгах ажиллагааг идэвхжүүлэх эсвэл идэвхгүй болгох. Идэвхжүүлсэн 'template'тохиолдолд сонголтуудыг ариутгана 'content'. Манай JavaScript баримт бичгийн ариутгагч хэсгийг'title' үзнэ үү .
allowList обьект Өгөгдмөл утга Зөвшөөрөгдсөн шинж чанарууд болон шошго агуулсан объект
sanitizeFn null | функц null Энд та өөрийн ариутгалын функцийг хангах боломжтой. Хэрэв та ариутгал хийхдээ зориулалтын номын сан ашиглахыг хүсвэл энэ нь хэрэг болно.
offset массив | мөр | функц [0, 8]

Зорилтоттойгоо харьцуулахад поповын офсет. Та өгөгдлийн атрибутууд дахь мөрийг таслалаар тусгаарласан утгуудыг дамжуулж болно:data-bs-offset="10,20"

Функцийг офсетийг тодорхойлоход ашиглах үед түүнийг эхний аргумент болгон попперийн байрлал, лавлагаа, поппер шулуунуудыг агуулсан объектоор дууддаг. Өдөөгч элементийн DOM зангилааг хоёр дахь аргумент болгон дамжуулна. Функц нь хоёр тоо бүхий массивыг буцаах ёстой: .[skidding, distance]

Дэлгэрэнгүй мэдээллийг Попперын офсет баримтаас үзнэ үү .

popperConfig null | объект | функц null

Bootstrap-ийн өгөгдмөл Popper тохиргоог өөрчлөхийн тулд Попперын тохиргоог үзнэ үү .

Попперын тохиргоог бий болгоход функцийг ашиглах үед Bootstrap-ийн анхдагч Popper тохиргоог агуулсан объектоор дуудагдана. Энэ нь танд өгөгдмөл тохиргоог өөрийн тохиргоотой ашиглах, нэгтгэхэд тусална. Функц нь Попперын тохиргооны объектыг буцаах ёстой.

Хувь хүний ​​поповеруудад зориулсан өгөгдлийн шинж чанарууд

Дээр тайлбарласны дагуу өгөгдлийн шинж чанаруудыг ашиглан хувь хүний ​​поповеруудын сонголтыг зааж өгч болно.

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

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

Арга зүй

Асинхрон аргууд ба шилжилтүүд

Бүх API аргууд асинхрон бөгөөд шилжилтийг эхлүүлнэ . Шилжилт эхэлмэгц дуусаагүй байхад тэд залгагч руу буцаж ирдэг . Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.

Дэлгэрэнгүй мэдээллийг манай JavaScript баримтаас үзнэ үү .

шоу

Элементийн поповыг харуулна. Поповер харагдахаас өмнө (өөрөөр хэлбэл 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

Үйл явдал

Үйл явдлын төрөл Тодорхойлолт
show.bs.popover showИнстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг .
үзүүлсэн.bs.popover Поповерыг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).
hide.bs.popover hideИнстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг .
hidden.bs.popover Поповыг хэрэглэгчээс нууж дууссаны дараа энэ үйл явдал идэвхждэг (CSS шилжилт дуусахыг хүлээх болно).
оруулсан.bs.popover show.bs.popoverDOM-д поповын загварыг нэмсэн тохиолдолд энэ үйл явдал идэвхгүй болно .
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})