Popovers

ພາບລວມ

ສິ່ງທີ່ຄວນຮູ້ເມື່ອໃຊ້ປລັກອິນ popover:

• Popovers ອີງໃສ່ຫ້ອງສະຫມຸດພາກສ່ວນທີສາມ Popper ສໍາລັບການຈັດຕໍາແຫນ່ງ. ທ່ານຕ້ອງປະກອບ popper.min.js ກ່ອນ bootstrap.js ຫຼືໃຊ້ bootstrap.bundle.min.js/ bootstrap.bundle.jsທີ່ມີ Popper ເພື່ອໃຫ້ popovers ເຮັດວຽກ!
• Popovers ຕ້ອງການ plugintip ເຄື່ອງມືເປັນການເພິ່ງພາອາໄສ.
• Popovers ແມ່ນເລືອກເຂົ້າຮ່ວມສໍາລັບເຫດຜົນການປະຕິບັດ, ດັ່ງນັ້ນ ທ່ານຕ້ອງເລີ່ມຕົ້ນດ້ວຍຕົນເອງ .
• ຄວາມຍາວສູນ titleແລະ contentຄ່າຈະບໍ່ສະແດງເປັນ popover.
• ລະບຸ container: 'body'ເພື່ອຫຼີກເວັ້ນການສະແດງບັນຫາໃນອົງປະກອບທີ່ສັບສົນຫຼາຍ (ເຊັ່ນ: ກຸ່ມການປ້ອນຂໍ້ມູນຂອງພວກເຮົາ, ກຸ່ມປຸ່ມ, ແລະອື່ນໆ).
• ການກະຕຸ້ນ popovers ໃນອົງປະກອບທີ່ເຊື່ອງໄວ້ຈະບໍ່ເຮັດວຽກ.
• Popovers .disabledຫຼື disabledອົງປະກອບຕ້ອງໄດ້ຮັບການກະຕຸ້ນຢູ່ໃນອົງປະກອບ wrapper.
• ເມື່ອຖືກກະຕຸ້ນຈາກສະມໍທີ່ຫໍ່ຜ່ານຫຼາຍເສັ້ນ, popovers ຈະຖືກຈຸດສູນກາງລະຫວ່າງຄວາມກວ້າງລວມຂອງສະມໍ. ໃຊ້ .text-nowrapໃນ <a>s ຂອງທ່��ນເພື່ອຫຼີກເວັ້ນການພຶດຕິກໍານີ້.
• Popovers ຕ້ອງຖືກເຊື່ອງໄວ້ກ່ອນທີ່ອົງປະກອບທີ່ສອດຄ້ອງກັນຂອງພວກມັນຖືກໂຍກຍ້າຍອອກຈາກ DOM.
• Popovers ສາມາດກະຕຸ້ນໄດ້ຍ້ອນອົງປະກອບພາຍໃນເງົາ DOM.

ສືບຕໍ່ອ່ານເພື່ອເບິ່ງວ່າ popovers ເຮັດວຽກແນວໃດກັບບາງຕົວຢ່າງ.

ຕົວຢ່າງ: ເປີດໃຊ້ popovers ຢູ່ທົ່ວທຸກແຫ່ງ

ວິທີຫນຶ່ງເພື່ອເລີ່ມຕົ້ນ popovers ທັງຫມົດໃນຫນ້າຫນຶ່ງແມ່ນຈະເລືອກເອົາພວກເຂົາໂດຍ 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ທາງເລືອກ

ເມື່ອທ່ານມີຄໍເຕົ້າໄຂ່ທີ່ບາງອັນຢູ່ໃນອົງປະກອບຫຼັກທີ່ແຊກແຊງກັບ popover, ທ່ານຈະຕ້ອງການກໍານົດ custom 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ກະຕຸ້ນເພື່ອປິດ popovers ໃນການຄລິກຕໍ່ໄປຂອງຜູ້ໃຊ້ຂອງອົງປະກອບທີ່ແຕກຕ່າງຈາກອົງປະກອບສະຫຼັບ.

<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ຄຸນລັກສະນະບໍ່ແມ່ນການໂຕ້ຕອບ, ຊຶ່ງຫມາຍຄວາມວ່າຜູ້ໃຊ້ບໍ່ສາມາດເລື່ອນຫຼືຄລິກພວກມັນເພື່ອກະຕຸ້ນການ popover (ຫຼືຄໍາແນະນໍາເຄື່ອງມື). ໃນຖານະເປັນວິທີການແກ້ໄຂ, ທ່ານຕ້ອງການກະຕຸ້ນ popover ຈາກ wrapper <div>ຫຼື <span>, ໂດຍສະເພາະແມ່ນເຮັດໃຫ້ແປ້ນພິມສຸມໃສ່ການນໍາໃຊ້ tabindex="0".

ສໍາລັບຕົວກະຕຸ້ນ popover ທີ່ຖືກປິດການໃຊ້ງານ, ທ່ານອາດຈະຕ້ອງການ 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>

ຊາສ

ຕົວແປ

$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);

ການ​ນໍາ​ໃຊ້

ເປີດໃຊ້ popovers ຜ່ານ 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
  }
})

ວິທີການ

ສະແດງໃຫ້ເຫັນ

ເປີດເຜີຍການປະກົດຕົວຂອງອົງປະກອບ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ popover ໄດ້ສະແດງໃຫ້ເຫັນຕົວຈິງແລ້ວ (ie ກ່ອນທີ່ shown.bs.popoverເຫດການຈະເກີດຂຶ້ນ). ນີ້ຖືວ່າເປັນ "ຄູ່ມື" ການກະຕຸ້ນຂອງ popover. Popovers ທີ່ມີຊື່ ແລະເນື້ອຫາມີຄວາມຍາວສູນແມ່ນບໍ່ເຄີຍສະແດງ.

myPopover.show()

ເຊື່ອງ

ເຊື່ອງ popover ຂອງອົງປະກອບ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ popover ຕົວຈິງແລ້ວໄດ້ຖືກເຊື່ອງໄວ້ (ie ກ່ອນທີ່ hidden.bs.popoverເຫດການຈະເກີດຂຶ້ນ). ນີ້ຖືວ່າເປັນ "ຄູ່ມື" ການກະຕຸ້ນຂອງ popover.

myPopover.hide()

ສະຫຼັບ

ສະຫຼັບການປະກົດຕົວຂອງອົງປະກອບໃດໜຶ່ງ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ popover ຕົວຈິງແລ້ວໄດ້ຖືກສະແດງໃຫ້ເຫັນຫຼືເຊື່ອງໄວ້ (ເຊັ່ນ: ກ່ອນທີ່ shown.bs.popoverຫຼື hidden.bs.popoverເຫດການຈະເກີດຂື້ນ). ນີ້ຖືວ່າເປັນ "ຄູ່ມື" ການກະຕຸ້ນຂອງ popover.

myPopover.toggle()

ຖິ້ມ

ເຊື່ອງ ແລະທໍາລາຍ popover ຂອງອົງປະກອບ (ລຶບຂໍ້ມູນທີ່ເກັບໄວ້ໃນອົງປະກອບ DOM). Popovers ທີ່ໃຊ້ delegation (ເຊິ່ງຖືກສ້າງຂື້ນໂດຍໃຊ້ ຕົວ selectorເລືອກ ) ບໍ່ສາມາດຖືກທໍາລາຍເປັນສ່ວນບຸກຄົນໃນອົງປະກອບ trigger ທີ່ສືບທອດ.

myPopover.dispose()

ເປີດໃຊ້

ໃຫ້ຄວາມສາມາດສະແດງໃຫ້ເຫັນເຖິງ popover ຂອງອົງປະກອບ. Popovers ຖືກເປີດໃຊ້ໂດຍຄ່າເລີ່ມຕົ້ນ.

myPopover.enable()

ປິດການໃຊ້ງານ

ເອົາຄວາມສາມາດຂອງ popover ຂອງອົງປະກອບທີ່ຈະສະແດງໃຫ້ເຫັນ. Popover ຈະສາມາດສະແດງໄດ້ພຽງແຕ່ຖ້າມັນຖືກເປີດໃຊ້ໃຫມ່.

myPopover.disable()

ສະຫຼັບເປີດ

ສະຫຼັບຄວາມສາມາດຂອງ popover ຂອງອົງປະກອບທີ່ຈະສະແດງ ຫຼືເຊື່ອງໄວ້.

myPopover.toggleEnabled()

ອັບເດດ

ອັບເດດຕຳແໜ່ງຂອງ popover ຂອງອົງປະກອບໃດໜຶ່ງ.

myPopover.update()

getInstance

ວິທີການ ຄົງ ທີ່ທີ່ອະນຸຍາດໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງ popover ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

ວິທີການ ຄົງ ທີ່ທີ່ອະນຸຍາດໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງ popover ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ 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...
})