Поповерлер

Шолу

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

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

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

Ашық теңшелімді орнатқыңыз келетін тағы бір жағдай - қалқымалы терезенің модальға қосылғанына көз жеткізу үшін модальды диалогтыңcontainer ішіндегі қалқымалы терезелер. Бұл әсіресе интерактивті элементтері бар қалқымалы терезелер үшін маңызды – модальды диалогтар фокусты ұстайды, сондықтан қалқымалы модуль модальдың еншілес элементі болмаса, пайдаланушылар осы интерактивті элементтерді фокустай немесе белсендіре алмайды.

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

Өшірілген қалқымалы триггерлер үшін қалқымалы триггерлер пайдаланушыларыңызға дереу көрнекі кері байланыс ретінде пайда болуын қалауыңыз мүмкін, себебі олар өшірілген элементті басуды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

Айнымалылар

.popoverBootstrap-тың дамып келе жатқан CSS айнымалылары тәсілінің бір бөлігі ретінде поповерлер нақты уақытта жақсартылған теңшеу үшін енді жергілікті 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 арқылы popovers қосыңыз:

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

Опциялар

data-bs-Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болатындықтан , параметр атауын сияқты қосуға болады 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...
})