Поповерҳо

Барраси

Чизҳоро ҳангоми истифодаи плагини popover донистан лозим аст:

• Поповҳо барои ҷойгиркунӣ ба китобхонаи сеюми Popper такя мекунанд. Шумо бояд пеш аз bootstrap.js popper.min.js-ро дохил кунед ё истифода баред bootstrap.bundle.min.js/ bootstrap.bundle.jsки Попперро дар бар мегирад, то поповҳо кор кунанд!
• Popovers плагини асбобро ҳамчун вобастагӣ талаб мекунанд.
• Поповҳо бо сабабҳои иҷроиш дохил мешаванд, аз ин рӯ шумо бояд онҳоро худатон оғоз кунед .
• Дарозии сифр titleва contentарзишҳо ҳеҷ гоҳ поповро нишон намедиҳанд.
• Барои container: 'body'пешгирӣ кардани мушкилот дар ҷузъҳои мураккабтар муайян кунед (ба монанди гурӯҳҳои вуруди мо, гурӯҳҳои тугмаҳо ва ғайра).
• Оғози поповҳо дар унсурҳои пинҳон кор намекунад.
• Поповарҳо барои .disabledё disabledунсурҳо бояд дар элементи печанда фаъол карда шаванд.
• Вақте ки аз лангарҳое, ки дар байни сатрҳои гуногун мепечанд, поповҳо дар байни паҳнои умумии лангарҳо марказонида мешаванд. Барои пешгирӣ кардани ин рафтори .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-и popover дар дохили он элемент пайдо шавад.

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>

Чор самт

Чор вариант дастрас аст: боло, рост, поён ва ба чап мувофиқ. Ҳангоми истифодаи Bootstrap дар RTL, самтҳо инъикос карда мешаванд.

<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аттрибутӣ интерактивӣ нестанд, яъне корбарон наметавонанд онҳоро ба ҷояшон гузоранд ё клик кунанд, то попover (ё маслиҳати абзор) ангезанд. Ҳамчун як роҳи ҳал, шумо мехоҳед, ки попover-ро аз парпеч <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)

Имконот

Имконотро тавассути атрибутҳои додаҳо ё 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
  }
})

Усулҳо

нишон додан

Поповери элементро ошкор мекунад. Ба зангзананда пеш аз намоиши поповер бармегардад (яъне пеш аз 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()

гирифтани Instance

Усули статикӣ , ки ба шумо имкон медиҳад, ки мисоли поповеро, ки бо унсури 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...
})