პოპოვერები

მიმოხილვა

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

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

<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

ცვლადები

როგორც Bootstrap-ის განვითარებადი CSS ცვლადების მიდგომის ნაწილი, პოპოვერები ახლა იყენებენ ადგილობრივ CSS ცვლადებს .popoverრეალურ დროში გაუმჯობესებული პერსონალიზაციისთვის. 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, ყველა კომპონენტი მხარს უჭერს ექსპერიმენტულ რეზერვირებული მონაცემთა ატრიბუტს data-bs-config, რომელსაც შეუძლია მარტივი კომპონენტის კონფიგურაცია JSON სტრიქონის სახით. როდესაც ელემენტს აქვს 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...
})