popovers

iOS'ta bulunanlar gibi Bootstrap açılır pencerelerini sitenizdeki herhangi bir öğeye eklemek için belgeler ve örnekler.

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.
• JavaScript'imiziutil.js kaynaktan oluşturuyorsanız, .
• 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-toggleözniteliklerine göre seçmektir:

$(function () {
  $('[data-toggle="popover"]').popover()
})

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

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Örnek

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-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ı.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-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-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  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. <div>Geçici bir çözüm olarak, bir paketleyiciden popover'ı tetiklemek veya devre dışı bırakılmış öğeyi <span>geçersiz kılmak isteyeceksiniz .pointer-events

Devre dışı bırakılmış popover tetikleyicileri için, popover'ın, devre dışı bırakılmış bir öğeye tıklamayıdata-trigger="hover" 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" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

kullanım

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

$('#example').popover(options)

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-animation="".

yöntemler

$().popover(options)

Bir öğe koleksiyonu için açılır pencereleri başlatır.

.popover('show')

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.

$('#element').popover('show')

.popover('hide')

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

$('#element').popover('hide')

.popover('toggle')

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.

$('#element').popover('toggle')

.popover('dispose')

Bir öğenin popover'ını gizler ve yok eder. Temsilci kullanan (seçenek kullanılarak oluşturulan) popover'lar , selectorsoyundan gelen tetikleyici öğelerde tek tek yok edilemez.

$('#element').popover('dispose')

.popover('enable')

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

$('#element').popover('enable')

.popover('disable')

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

$('#element').popover('disable')

.popover('toggleEnabled')

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

$('#element').popover('toggleEnabled')

.popover('update')

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

$('#element').popover('update')

Olaylar

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})