Поповерлер

Шолу

Popover плагинін пайдалану кезінде білу керек нәрселер:

• Поповерлер орналасу үшін үшінші тарап кітапханасының Попперіне сүйенеді . Сіз popper.min.js файлын bootstrap.js алдында қосуыңыз керек немесе popovers жұмыс істеуі үшін Popper бар bootstrap.bundle.min.js/ пайдалануыңыз керек!bootstrap.bundle.js
• Popovers тәуелділік ретінде құралдар тақтасының плагинін қажет етеді.
• Popovers өнімділік себептері бойынша қосылады, сондықтан оларды өзіңіз баптандыруыңыз керек .
• Нөлдік ұзындық titleпен contentмәндер ешқашан қалқымалы терезені көрсетпейді.
• container: 'body'Күрделі құрамдас бөліктерде (мысалы, енгізу топтары, түймелер топтары, т.б.) ақауларды көрсетпеу үшін көрсетіңіз .
• Жасырын элементтерде қалқандарды іске қосу жұмыс істемейді.
• .disabledҚаптама элементінде немесе disabledэлементтер үшін поповерлер іске қосылуы керек.
• Бірнеше жолдар бойымен оралатын якорьлерден іске қосылғанда, қалқымалы белгілер якорьдің жалпы ені арасында ортаға орналасады. Бұл әрекетті болдырмау үшін s .text-nowrapon yours пайдаланыңыз .<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оның орнына қалқымалы файлдың 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>

Сасс

Айнымалылар

$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 арқылы popovers қосыңыз:

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

қосу

Элементтің қалқымалы терезесін көрсету мүмкіндігін береді. 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...
})