Поповерууд

Тойм

Popover залгаасыг ашиглахдаа анхаарах зүйлс:

• Поповерууд байрлал тогтоохдоо гуравдагч этгээдийн Поппер номын санд тулгуурладаг . Та өмнө нь popper.min.js оруулах эсвэл Поппер агуулсан bootstrap.jsнэгийг ашиглах ёстой.bootstrap.bundle.min.js
• Popover нь popover залгаасыг хамаарал болгон шаарддаг .
• Поповерууд нь гүйцэтгэлийн шалтгаанаар сонгогддог тул та өөрөө эхлүүлэх хэрэгтэй .
• Тэг урт titleба contentутгууд нь поповыг хэзээ ч харуулахгүй.
• container: 'body'Илүү төвөгтэй бүрэлдэхүүн хэсгүүдэд (манай оролтын бүлгүүд, товчлуурын бүлгүүд гэх мэт) асуудал гаргахгүйн тулд зааж өгнө үү .
• Нууцлагдмал элементүүд дээр поповеруудыг өдөөх нь ажиллахгүй.
• Поповер .disabledэсвэл disabledэлементүүдийг боодлын элемент дээр өдөөх ёстой.
• Олон мөрөнд ороосон зангуунаас өдөөх үед поповерууд зангууны нийт өргөний хооронд төвлөрөх болно. Энэ зан үйлээс зайлсхийхийн тулд .text-nowrapөөрийн s дээр ашиглаарай .<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>

Дөрвөн чиглэл

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

Хувьсагч

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...
})