popovers

genel bakış

Popover eklentisini kullanırken bilmeniz gerekenler:

• Popover'lar, konumlandırma için üçüncü taraf kitaplığı Popper'a güvenir . popper.min.js'yi önce eklemeli bootstrap.jsveya bootstrap.bundle.min.jsPopper içeren birini kullanmalısınız.
• Popover'lar, bağımlılık olarak popover eklentisini gerektirir .
• Popover'lar performans nedenleriyle etkinleştirilir, bu nedenle bunları kendiniz başlatmanız gerekir .
• Sıfır uzunluk titleve contentdeğerler hiçbir zaman bir popover göstermez.
• container: 'body'Daha karmaşık bileşenlerde (giriş gruplarımız, düğme gruplarımız vb.) oluşturma sorunlarını önlemek için belirtin .
• Gizli öğelerde popover'ları tetiklemek işe yaramaz.
• .disabledveya öğeleri için disabledaçılır öğeler, bir sarmalayıcı öğede tetiklenmelidir.
• Birden çok çizgiyi saran bağlantılardan tetiklendiğinde, açılır öğeler bağlantıların toplam genişliği arasında ortalanır. Bu davranıştan kaçınmak .text-nowrapiçin s üzerinde kullanın .<a>
• Popover'lar, karşılık gelen öğeleri DOM'dan kaldırılmadan önce gizlenmelidir.
• Bir gölge DOM içindeki bir öğe sayesinde popover'lar tetiklenebilir.

Popover'ların bazı örneklerle nasıl çalıştığını görmek için okumaya devam edin.

Örnekler

Popover'ları etkinleştir

Yukarıda belirtildiği gibi, kullanılmadan önce popover'ları başlatmanız gerekir. Bir sayfadaki tüm açılır pencereleri başlatmanın bir yolu, onları şu şekilde data-bs-toggleözniteliklerine göre seçmektir:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Canlı demo

Aşağıdaki canlı popover'ı oluşturmak için yukarıdaki snippet'e benzer JavaScript kullanıyoruz. Başlıklar aracılığıyla belirlenir data-bs-titleve gövde içeriği aracılığıyla ayarlanır 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>

dört yön

Dört seçenek mevcuttur: üst, sağ, alt ve sol. RTL'de Bootstrap kullanılırken yönergeler yansıtılır. data-bs-placementYönü değiştirmek için ayarlayın .

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

Gelenekcontainer

Bir üst öğede, bir açılır öğeye müdahale eden bazı stilleriniz olduğunda, containeraçılır öğenin HTML'sinin bunun yerine o öğenin içinde görünmesi için bir özel belirtmek isteyeceksiniz. Bu, duyarlı tablolarda, girdi gruplarında ve benzerlerinde yaygındır.

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

Açık bir özel ayarlamak isteyeceğiniz başka bir durum , containerpopover'ın kendisinin kipine eklendiğinden emin olmak için kalıcı bir iletişim kutusundaki açılır pencerelerdir. Bu, özellikle etkileşimli öğeler içeren açılır pencereler için önemlidir - kalıcı iletişim kutuları odağı yakalar, bu nedenle açılır pencere modun bir alt öğesi olmadıkça, kullanıcılar bu etkileşimli öğelere odaklanamaz veya etkinleştiremez.

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

Özel açılır pencereler

CSS değişkenlerini kullanarak açılır pencerelerin görünümünü özelleştirebilirsiniz . data-bs-custom-class="custom-popover"Özel görünümümüzü kapsamak ve bazı yerel CSS değişkenlerini geçersiz kılmak için kullanmak için özel bir sınıf belirledik .

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

Sonraki tıklamada kapat

focusKullanıcının geçiş öğesinden farklı bir öğeyi bir sonraki tıklamasında açılır pencereleri kapatmak için tetikleyiciyi kullanın .

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

Devre dışı bırakılmış öğeler

Özniteliğe sahip öğeler disabledetkileşimli değildir, yani kullanıcılar bir açılır pencereyi (veya araç ipucunu) tetiklemek için üzerine gelemez veya tıklayamaz. Geçici bir çözüm olarak, açılır pencereyi bir sarmalayıcıdan tetiklemek isteyeceksiniz <div>veya <span>, ideal olarak tabindex="0".

Devre dışı bırakılmış popover tetikleyicileri için, popover'ın, devre dışı bırakılmış bir öğeye tıklamayıdata-bs-trigger="hover focus" beklemeyebilecekleri için kullanıcılarınıza anında görsel geri bildirim olarak görünmesini de tercih edebilirsiniz .

<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

Değişkenler

Bootstrap'in gelişen CSS değişkenleri yaklaşımının bir parçası olarak, popover'lar artık .popovergelişmiş gerçek zamanlı özelleştirme için yerel CSS değişkenlerini kullanıyor. CSS değişkenlerinin değerleri Sass aracılığıyla ayarlanır, bu nedenle Sass özelleştirmesi de desteklenmeye devam eder.

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

Sas değişkenleri

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

kullanım

JavaScript aracılığıyla açılır pencereleri etkinleştirin:

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

Seçenekler

Seçenekler veri öznitelikleri veya JavaScript aracılığıyla iletilebildiğinden data-bs-, örneğinde olduğu gibi öğesine bir seçenek adı ekleyebilirsiniz data-bs-animation="{value}". Seçenekleri veri öznitelikleri üzerinden geçirirken , seçenek adının “ camelCase ” yerine “ kebab-case ” olarak değiştirildiğinden emin olun. Örneğin, data-bs-custom-class="beautifier"yerine kullanın data-bs-customClass="beautifier".

Bootstrap 5.2.0'dan itibaren, tüm bileşenler , bir JSON dizesi olarak basit bileşen yapılandırmasını barındırabilen deneysel bir ayrılmış veri özniteliğini destekler. data-bs-configBir öğe data-bs-config='{"delay":0, "title":123}'ve data-bs-title="456"özniteliklere sahip olduğunda, nihai titledeğer olacak 456ve ayrı veri öznitelikleri üzerinde verilen değerleri geçersiz kılacaktır data-bs-config. Ek olarak, mevcut veri öznitelikleri, gibi JSON değerlerini barındırabilir data-bs-delay='{"show":0,"hide":150}'.

ile işlevi kullanmapopperConfig

const popover = new bootstrap.Popover(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

yöntemler

// 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'
})

Olaylar

const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})