popovers

genel bakış

Popover eklentisini kullanırken bilmeniz gerekenler:

• Popover'lar, konumlandırma için 3. taraf kitaplığı Popper'a güvenir . Popper'ların çalışması için popper.min.js'yi bootstrap.js'den önce eklemeli veya Popper içeren bootstrap.bundle.min.js/ kullanmalısınız!bootstrap.bundle.js
• Popover'lar, araç ipucu eklentisini bir bağımlılık olarak 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.

Örnek: Her yerde açılır pencereleri etkinleştir

Bir sayfadaki tüm açılır pencereleri başlatmanın bir yolu, onları data-bs-toggleözniteliklerine göre seçmektir:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Örnek: containerSeçeneği kullanma

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.

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

Örnek

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

dört yön

Dört seçenek mevcuttur: üst, sağ, alt ve sola hizalı. RTL'de Bootstrap kullanılırken yönergeler yansıtılır.

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

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

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>

küstah

Değişkenler

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

kullanım

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

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

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-bs-gibi ekleyin data-bs-animation="". Seçenekleri veri öznitelikleri aracılığıyla geçirirken, seçenek adının case tipini camelCase'den kebab-case olarak değiştirdiğinizden emin olun. Örneğin, data-bs-customClass="beautifier"kullanmak yerine data-bs-custom-class="beautifier".

ile işlevi kullanmapopperConfig

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

yöntemler

göstermek

Bir öğenin popover'ını ortaya çıkarır. Popover fiilen gösterilmeden önce (yani shown.bs.popoverolay meydana gelmeden önce) arayana geri döner. Bu, popover'ın "manuel" tetiklenmesi olarak kabul edilir. Başlığı ve içeriği sıfır uzunlukta olan popover'lar hiçbir zaman görüntülenmez.

myPopover.show()

saklamak

Bir öğenin açılır penceresini gizler. Popover fiilen gizlenmeden (yani hidden.bs.popoverolay meydana gelmeden önce) arayana geri döner. Bu, popover'ın "manuel" tetiklenmesi olarak kabul edilir.

myPopover.hide()

geçiş

Bir öğenin açılır penceresini değiştirir. Popover fiilen gösterilmeden veya gizlenmeden (yani shown.bs.popoverveya hidden.bs.popoverolayı gerçekleşmeden önce) arayana geri döner. Bu, popover'ın "manuel" tetiklenmesi olarak kabul edilir.

myPopover.toggle()

elden çıkarmak

Bir öğenin açılır penceresini gizler ve yok eder (DOM öğesinde depolanan verileri kaldırır). Temsilci kullanan (seçenek kullanılarak oluşturulan) popover'lar, alttan gelen selectortetikleyici öğelerde tek tek yok edilemez.

myPopover.dispose()

etkinleştirme

Bir öğenin popover'ına gösterilme yeteneği verir. Popover'lar varsayılan olarak etkindir.

myPopover.enable()

devre dışı bırakmak

Bir öğenin popover'ının gösterilmesi yeteneğini kaldırır. Popover yalnızca yeniden etkinleştirildiğinde gösterilebilir.

myPopover.disable()

toggleEnabled

Bir öğenin açılır penceresinin gösterilme veya gizlenme özelliğini değiştirir.

myPopover.toggleEnabled()

Güncelleme

Bir öğenin açılır penceresinin konumunu günceller.

myPopover.update()

getInstance

Bir DOM öğesiyle ilişkili popover örneğini almanızı sağlayan statik yöntem

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

getOrCreateInstance

Bir DOM öğesiyle ilişkili popover örneğini almanıza veya başlatılmamış olması durumunda yeni bir tane oluşturmanıza izin veren statik yöntem

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

Olaylar

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