Popovers

Обзор

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

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

Төрт багыт

Төрт вариант бар: жогорку, оң, ылдый жана сол. RTLде Bootstrap колдонууда багыттар чагылдырылат. 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анын ордуна popover HTML'и ошол элементтин ичинде пайда болушу үчүн салтты белгилегиңиз келет. Бул жооп берүүчү таблицаларда, киргизүү топторунда жана башкаларда кеңири таралган.

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

Ачык салтты орноткуңуз келген дагы бир жагдай - бул поповердин өзү модалга тиркелгендигине ынануу үчүн модалдык диалогдунcontainer ичиндеги popovers. Бул өзгөчө интерактивдүү элементтерди камтыган поповерлер үчүн маанилүү – модалдык диалогдор фокусту кармап калат, андыктан popover модалдын кошумча элементи болбосо, колдонуучулар бул интерактивдүү элементтерди фокустай алышпайт же активдештире алышпайт.

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интерактивдүү эмес, демек, колдонуучулар калкып чыгууну (же инструментарийди) ишке киргизүү үчүн аларды басып же баса албайт. Чечим катары, сиз поповерди орогучтан иштеткиңиз келет <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>

CSS

Өзгөрмөлөр

Bootstrap'тин өнүгүп жаткан CSS өзгөрмөлөрүнүн бир бөлүгү катары, поповерлер азыр .popoverреалдуу убакытта жакшыртылган ыңгайлаштыруу үчүн жергиликтүү CSS өзгөрмөлөрүн колдонушат. 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 версиясында, бардык компоненттер JSON сап катары жөнөкөй компонент конфигурациясын камтый турган эксперименталдык сакталган маалымат атрибутун колдойт. data-bs-configЭлементте 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...
})