პოპოვერები

მიმოხილვა

რა უნდა იცოდეთ popover მოდულის გამოყენებისას:

• პოპოვერები პოზიციონირებისთვის ეყრდნობიან მესამე მხარის ბიბლიოთეკას Popper- ს. თქვენ უნდა შეიყვანოთ popper.min.js bootstrap.js-მდე ან გამოიყენოთ bootstrap.bundle.min.js/ bootstrap.bundle.jsრომელიც შეიცავს პოპერს, რათა პოპოვერებმა იმუშაონ!
• პოპოვერები საჭიროებენ ინსტრუმენტთა მითითების დანამატს , როგორც დამოკიდებულებას.
• Popover-ები დაშვებულია შესრულების მიზეზების გამო, ასე რომ თქვენ თავად უნდა მოაწყოთ ისინი .
• ნულოვანი სიგრძე titleდა contentმნიშვნელობები არასოდეს აჩვენებს პოპოვერს.
• მიუთითეთ container: 'body', რათა თავიდან აიცილოთ პრობლემები უფრო რთულ კომპონენტებში (როგორიცაა ჩვენი შეყვანის ჯგუფები, ღილაკების ჯგუფები და ა.შ.).
• დამალულ ელემენტებზე პოპოვერების გააქტიურება არ იმუშავებს.
• პოპოვერები .disabledან disabledელემენტები უნდა იყოს ჩართული შეფუთვის ელემენტზე.
• როდესაც ამოქმედდება წამყვანებიდან, რომლებიც ხვდება რამდენიმე ხაზს, პოვერები ორიენტირებული იქნება წამყვანების საერთო სიგანეს შორის. გამოიყენეთ .text-nowrapთქვენი <a>s, რათა თავიდან აიცილოთ ეს ქცევა.
• პოპოვერები უნდა იყოს დამალული, სანამ მათი შესაბამისი ელემენტები DOM-დან წაიშლება.
• პოპოვერების გააქტიურება შესაძლებელია ჩრდილოვანი DOM-ის შიგნით არსებული ელემენტის წყალობით.

განაგრძეთ კითხვა, რომ ნახოთ როგორ მუშაობს პოპოვერები რამდენიმე მაგალითით.

მაგალითი: ჩართეთ პოპოვერები ყველგან

გვერდზე ყველა პოპოვერის ინიციალიზაციის ერთ-ერთი გზა იქნება მათი 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ოფციის გამოყენება

როდესაც თქვენ გაქვთ რამდენიმე სტილი მშობელ ელემენტზე, რომელიც ხელს უშლის პოპოვერს, თქვენ გსურთ მიუთითოთ ჩვეულება containerისე, რომ ამ ელემენტის ნაცვლად გამოჩნდეს პოპოვერის HTML.

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>

ოთხი მიმართულება

ოთხი ვარიანტია ხელმისაწვდომი: ზემოთ, მარჯვნივ, ქვედა და მარცხნივ გასწორებული. RTL-ში Bootstrap-ის გამოყენებისას მიმართულებები ასახულია.

<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არ არის ინტერაქტიული, რაც იმას ნიშნავს, რომ მომხმარებლებს არ შეუძლიათ მაუსის გადატანა ან დააწკაპუნონ მათზე პოპოვერის (ან ხელსაწყოს მინიშნების) გასააქტიურებლად. გამოსავლის გამოსავალად, თქვენ მოგინდებათ ჩართოთ პოპოვერი შეფუთვით <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>

სას

ცვლადები

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

გამოყენება

ჩართეთ პოპოვერები 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
  }
})

მეთოდები

შოუ

ავლენს ელემენტის პოპოვერს. უბრუნდება აბონენტს პოპოვერის რეალურად ჩვენებამდე (ანუ shown.bs.popoverმოვლენის დადგომამდე). ეს განიხილება პოპოვერის „სახელმძღვანელო“ გამომწვევად. პოპოვერები, რომელთა სათაურიც და შინაარსიც ნულოვანი სიგრძისაა, არასოდეს გამოჩნდება.

myPopover.show()

დამალვა

მალავს ელემენტის პოპოვერს. უბრუნდება აბონენტს პოპოვერის რეალურად დამალვამდე (ანუ hidden.bs.popoverმოვლენის დადგომამდე). ეს განიხილება პოპოვერის „სახელმძღვანელო“ გამომწვევად.

myPopover.hide()

გადართვა

ცვლის ელემენტის პოპოვერს. უბრუნდება აბონენტს პოპოვერის რეალურად ჩვენებამდე ან დამალვამდე (ანუ, სანამ shown.bs.popoverან hidden.bs.popoverმოვლენა მოხდება). ეს განიხილება პოპოვერის „სახელმძღვანელო“ გამომწვევად.

myPopover.toggle()

განკარგავს

მალავს და ანადგურებს ელემენტის პოპოვერს (შლის DOM ელემენტზე შენახულ მონაცემებს). პოპოვერები, რომლებიც იყენებენ დელეგირებას (რომლებიც იქმნება ოფციის გამოყენებით ) selectorარ შეიძლება ინდივიდუალურად განადგურდეს შთამომავლობის ტრიგერების ელემენტებზე.

myPopover.dispose()

ჩართვა

აძლევს ელემენტის პოპოვერს ჩვენების უნარს. ნაგულისხმევად ჩართულია პოპოვერები.

myPopover.enable()

გამორთვა

შლის ელემენტის პოპოვერის ჩვენების შესაძლებლობას. პოპოვერის ჩვენება მხოლოდ ხელახლა ჩართვის შემთხვევაში იქნება შესაძლებელი.

myPopover.disable()

გადართვა ჩართულია

ცვლის ელემენტის popover-ის ჩვენების ან დამალვის შესაძლებლობას.

myPopover.toggleEnabled()

განახლება

განაახლებს ელემენტის პოპოვერის პოზიციას.

myPopover.update()

getInstance

სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ პოპოვერის ინსტანცია ასოცირებული DOM ელემენტთან

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

getOrCreateInstance

სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ პოპოვერის ინსტანცია ასოცირებული 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...
})