Popovers

ئومۇمىي چۈشەنچە

قاڭقىش قىستۇرمىسىنى ئىشلەتكەندە بىلىشكە تېگىشلىك ئىشلار:

• پوپلار ئورۇن بەلگىلەش ئۈچۈن 3-تەرەپ كۇتۇپخانىسى Popper غا تايىنىدۇ . Bootstrap.js دىن بۇرۇن popper.min.js نى ئۆز ئىچىگە ئېلىشىڭىز ياكى پوپايكىلارنىڭ ئىشلىشى ئۈچۈن Popper نى ئۆز ئىچىگە ئالغان bootstrap.bundle.min.jsئىشلىتىڭ .bootstrap.bundle.js
• Popovers قورال قورال قىستۇرمىسىنى بېقىنىش سۈپىتىدە تەلەپ قىلىدۇ.
• پوپايكىلار ئىقتىدار سەۋەبىدىن تاللىنىدۇ ، شۇڭا چوقۇم ئۇلارنى ئۆزىڭىز باشلىشىڭىز كېرەك .
• نۆل ئۇزۇنلۇق titleۋە contentقىممەت ھەرگىزمۇ مودا ئېقىمىنى كۆرسەتمەيدۇ.
• تېخىمۇ مۇرەككەپ زاپچاسلاردا مەسىلە پەيدا قىلىشتىن ساقلىنىشنى بەلگىلەڭ container: 'body'(بىزنىڭ كىرگۈزۈش گۇرۇپپىلىرىمىز ، كۇنۇپكا گۇرۇپپىلىرىمىز دېگەندەك).
• يوشۇرۇن ئېلېمېنتلارنى قوزغىتىش قوزغاتقۇچ ئىشلىمەيدۇ.
• ئېلېمېنتلار .disabledياكى disabledئېلېمېنتلار چوقۇم ئورالغان ئېلېمېنتتا قوزغىتىلىشى كېرەك.
• بىر نەچچە قۇرنى ئوراپ تۇرىدىغان لەڭگەردىن قوزغالغاندا ، لەڭگەرلەر لەڭگەرنىڭ ئومۇمىي كەڭلىكى ئوتتۇرىسىدا مەركەزلىشىدۇ. بۇ ھەرىكەتتىن ساقلىنىش ئۈچۈن s .text-nowrapنى ئىشلىتىڭ .<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ئۆز-ئارا تەسىر كۆرسىتەلمەيدۇ ، يەنى ئىشلەتكۈچىلەر يۆتكىلىپ ياكى چېكىپ سەكرەش (ياكى قورال كۆرسەتكۈچى) نى قوزغىتالمايدۇ. بىر ھەل قىلىش چارىسى بولۇش سۈپىتىڭىز بىلەن ، ئورالمىنى <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>

Sass

ئۆزگەرگۈچى مىقدار

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

Methods

show

بىر ئېلېمېنتنىڭ مودا ئېقىمىنى ئاشكارىلايدۇ. پوپايكا ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . shown.bs.popoverبۇ مودا ئېقىمىنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ. ئىسمى ۋە مەزمۇنى ھەر ئىككىسى نۆل ئۇزۇنلۇقتىكى پوپايكىلار ھەرگىز كۆرۈنمەيدۇ.

myPopover.show()

يوشۇر

بىر ئېلېمېنتنىڭ ئېقىمىنى يوشۇرىدۇ. پوپايكا ئەمەلىيەتتە يوشۇرۇنغان (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . hidden.bs.popoverبۇ مودا ئېقىمىنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ.

myPopover.hide()

toggle

بىر ئېلېمېنتنىڭ مودا ئېقىمىنى توغرىلايدۇ. پوپايكا ئەمەلىيەتتە كۆرسىتىش ياكى يوشۇرۇشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . بۇ مودا ئېقىمىنىڭ «قولدا قوزغىتىش» دەپ قارىلىدۇ.shown.bs.popoverhidden.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

Events

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