Поповерҳо

Барраси

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

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

Хонданро давом диҳед, то бубинед, ки поповерҳо бо баъзе мисолҳо чӣ гуна кор мекунанд.

Мисолхо

Поповҳоро фаъол созед

Тавре ки дар боло зикр гардид, шумо бояд пеш аз истифода бурдани онҳо поповҳоро оғоз кунед. Як роҳи оғоз кардани ҳамаи поповҳо дар саҳифа ин интихоб кардани онҳо аз рӯи data-bs-toggleатрибутҳо мебошад, ба монанди:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Намоиши зинда

Мо JavaScript-ро истифода мебарем, ки ба порчаи дар боло овардашуда монандро барои намоиш додани поповери зиндаи зерин истифода мебарем. Унвонҳо тавассути танзим data-bs-titleва мундариҷаи бадан тавассути data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Чор самт

Чор вариант мавҷуд аст: боло, рост, поён ва чап. Ҳангоми истифодаи Bootstrap дар RTL, дастурҳо инъикос карда мешаванд. Барои data-bs-placementтағир додани самт таъин кунед.

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

Фармоишгарcontainer

Вақте ки шумо дар як унсури волидайн якчанд услубҳо доред, ки ба поповор халал мерасонанд, шумо мехоҳед одатеро муайян кунед, containerто HTML-и popover дар дохили он элемент пайдо шавад. Ин дар ҷадвалҳои ҷавобӣ, гурӯҳҳои воридотӣ ва ғайра маъмул аст.

const popover = new bootstrap.Popover('.example-popover', {
  container: 'body'
})

Вазъияти дигаре, ки шумо мехоҳед одати возеҳ муқаррар кунед container, поповҳо дар дохили муколамаи модалӣ мебошанд , то боварӣ ҳосил кунед, ки худи попов ба модаль замима шудааст. Ин махсусан барои popovers муҳим аст, ки дорои унсурҳои интерактивӣ мебошанд – муколамаҳои модалӣ фокусро ба дом мекашанд, аз ин рӯ, агар поповер унсури кӯдаки модаль набошад, корбарон наметавонанд ин унсурҳои интерактивиро тамаркуз кунанд ё фаъол кунанд.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Поповҳои фармоишӣ

Шумо метавонед намуди поповҳоро бо истифода аз тағирёбандаҳои CSS танзим кунед . Мо синфи фармоиширо бо он муқаррар кардем, data-bs-custom-class="custom-popover"то намуди зоҳирии фармоишии худро фаро гирем ва онро барои бекор кардани баъзе тағирёбандаҳои маҳаллии CSS истифода барем.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

Дар клики навбатӣ қатъ кунед

Аз триггер истифода баред focus, то поповҳоро дар клики навбатии корбар аз унсури дигар аз унсури ивазкунанда хориҷ кунед.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.popover-dismiss', {
  trigger: 'focus'
})

Унсурҳои ғайрифаъол

Унсурҳои дорои disabledаттрибутӣ интерактивӣ нестанд, яъне корбарон наметавонанд онҳоро ба ҷояшон гузоранд ё клик кунанд, то попover (ё маслиҳати абзор) ангезанд. Ҳамчун як роҳи ҳал, шумо мехоҳед, ки попover-ро аз парпеч <div>ё , бо истифода аз .<span>tabindex="0"

Барои триггерҳои поповери ғайрифаъол, шумо инчунин метавонед бартарӣ data-bs-trigger="hover focus"диҳед, ки popover ҳамчун аксуламали фаврии визуалӣ барои корбарони шумо пайдо шавад, зеро онҳо интизор нашаванд, ки элементи ғайрифаъолро пахш кунанд.

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

CSS

Тағйирёбандаҳо

Ҳамчун як қисми равиши тағирёбандаи CSS-и Bootstrap, поповҳо ҳоло тағирёбандаҳои маҳаллии CSS-ро .popoverбарои мутобиқсозии мукаммали вақти воқеӣ истифода мебаранд. Арзишҳо барои тағирёбандаҳои CSS тавассути Sass муқаррар карда мешаванд, аз ин рӯ мутобиқсозии Sass ҳанӯз ҳам дастгирӣ карда мешавад.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Тағйирёбандаҳои Sass

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

Истифода

Поповҳоро тавассути JavaScript фаъол созед:

const exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl, options)

Имконот

Азбаски вариантҳоро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст, шумо метавонед номи опсияро ба data-bs-монанди дар data-bs-animation="{value}". Ҳангоми интиқоли параметрҳо тавассути атрибутҳои додаҳо, боварӣ ҳосил кунед, ки навъи парвандаи номи опсияро аз “ camelCase ” ба “ kebab-case ” иваз кунед. Масалан, data-bs-custom-class="beautifier"ба ҷои data-bs-customClass="beautifier".

Аз Bootstrap 5.2.0, ҳама ҷузъҳо атрибутҳои таҷрибавии ҳифзшударо дастгирӣ мекунанд data-bs-config, ки метавонад конфигуратсияи ҷузъҳои оддиро ҳамчун сатри JSON ҷойгир кунад. Вақте ки элемент дорои data-bs-config='{"delay":0, "title":123}'ва data-bs-title="456"атрибутҳо мебошад, titleарзиши ниҳоӣ хоҳад буд 456ва атрибутҳои додаҳои алоҳида арзишҳои дар data-bs-config. Илова бар ин, атрибутҳои мавҷудаи маълумот қодиранд арзишҳои JSON ба монанди data-bs-delay='{"show":0,"hide":150}'.

Истифодаи функсия боpopperConfig

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

Усулҳо

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Ҳодисаҳо

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