Popovers

Обзор

Popover плагинин колдонууда билүү керек болгон нерселер:

• Поповерлер жайгаштыруу үчүн үчүнчү тараптын Поппер китепканасына таянышат . Сиз popper.min.js файлын bootstrap.js алдында камтышыңыз керек же попоперлер иштеши үчүн Popper камтылган bootstrap.bundle.min.js/ колдонушуңуз керек!bootstrap.bundle.js
• Popovers көз карандылык катары инструменттин плагинин талап кылат.
• Поповерлер майнаптуулугу үчүн кошулат, андыктан аларды өзүңүз башташыңыз керек .
• Нөл узундуктагы titleжана contentбаалуулуктар эч качан калкып чыгууну көрсөтпөйт.
• container: 'body'Татаалыраак компоненттерде (мисалы, киргизүү топторубуз, баскыч топторубуз ж.б.) көйгөйлөрдү жаратпаш үчүн белгилеңиз .
• Жашыруун элементтерде поповерлерди иштетүү иштебейт.
• .disabledҮчүн же disabledэлементтер үчүн поповерлер орогуч элементинде иштетилиши керек.
• Бир нече сызыктар боюнча оролгон анкерлерден иштетилгенде, поповерлер анкерлердин жалпы туурасынын ортосуна жайгаштырылат. Бул жүрүм-турумду болтурбоо үчүн .text-nowrapсиздин с боюнча колдонуңуз .<a>
• Поповерлер алардын тиешелүү элементтери DOMдан алынып салынганга чейин жашырылышы керек.
• Popovers көлөкө 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анын ордуна popover 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".

Өчүрүлгөн popover триггерлери үчүн, сиз ошондой эле поповер колдонуучуларыңызга дароо визуалдык пикир катары көрүнүшүн кааласаңыз болот, анткени алар өчүрүлгөн элементти басууну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тен кебаб-кепке өзгөртүүнү унутпаңыз. Мисалы, колдонуунун ордуна 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окуя болгонго чейин) чалуучуга кайтат. Бул поповерди "кол менен" ишке киргизүү деп эсептелет. Аталышы жана мазмуну нөлгө барабар болгон поповерлер эч качан көрсөтүлбөйт.

myPopover.show()

жашыруу

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

myPopover.hide()

которуштуруу

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

myPopover.toggle()

тескөө

Элементтин поповерин жашырат жана жок кылат (DOM элементинде сакталган маалыматтарды жок кылат). Делегацияны колдонгон поповерлер ( опцияны колдонуу мененselector түзүлгөн ) тукум триггер элементтеринде өзүнчө жок кылынбайт.

myPopover.dispose()

иштетүү

Элементтин калкып чыгуусуна көрсөтүү мүмкүнчүлүгүн берет. Поповерлер демейки боюнча иштетилген.

myPopover.enable()

өчүрүү

Элементтин поповерин көрсөтүү мүмкүнчүлүгүн жок кылат. Поповер кайра иштетилгенде гана көрсөтүлө алат.

myPopover.disable()

toggleEnabled

Элементтин поповерин көрсөтүү же жашыруу мүмкүнчүлүгүн өчүрөт.

myPopover.toggleEnabled()

жаңыртуу

Элементтин поповеринин абалын жаңыртат.

myPopover.update()

getInstance

DOM элементи менен байланышкан popover инстанциясын алууга мүмкүндүк берген статикалык ыкма

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

getOrCreateInstance

DOM элементи менен байланышкан popover инстанциясын алууга же ал инициализацияланбаган учурда жаңысын түзүүгө мүмкүндүк берген статикалык ыкма

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