Kısa süreli bildirimler, geçici durum mesajlarıdır. Menülerin aksine, kullanıcı sayfanın diğer bölümleriyle etkileşimde bulunduğunda kapanmamalıdır. popover="manual" durumu, "hafif kapatma" davranışı olmadığı ve birden fazla bildirimin bir arada bulunmasına izin verdiği için idealdir.
Uygulama Kuralları
- ZORUNLU: Bildirimin açıkça kapatılana veya bir komut dosyası tarafından zaman aşımına uğrayana kadar görünür kalması için popover="manual" kullanın.
- Birden fazla bildirim mesajının üst üste yığılmasını yönetmek için kapsayıcı KULLANIN. Üst katmandaki popover'lar üst öğe z-index'ini yok saydığından bunları tek tek veya ortak bir düzen grubu içinde konumlandırmanız gerekir.
- Yığının altındaki öğelerin görünür olması için bildirimler arasına kenar boşluğu eklemek üzere sibling-index() işlevini KULLANIN.
- DO popovertargetaction= "hide" kullanarak toast içinde açık bir"Kapat" düğmesi sağlayın.
- Otomatik kapatma zamanlayıcıları için JavaScript KULLANIN (ör.3.000 ms sonra hidePopover() işlevini çağırın).
- ÖNERİ: Üst katmana giriş ve çıkış animasyonları eklemek için transition-behavior: allow-discrete özelliğini kullanın.
Yedek Stratejiler
Popover için yedekler ve tarayıcı desteği
Popover API çoğunlukla progresif geliştirme ile ilgilidir ancak tanımlayıcı davranışlarının (üst katman tanıtımı, hafif kapatma ve popovertarget çağrısı) yalnızca CSS'ye dayalı bir eşdeğeri yoktur. Eski tarayıcılar için polyfill veya polyfill kullanmak istemiyorsanız manuel yedek gerekir.
Polyfill: Eski tarayıcılarda popover özelliğini desteklemek için @oddbird/popover-polyfill öğesini koşullu olarak yükleyin. ZORUNLU: HTMLElement.prototype üzerinde popover özelliğini kontrol ederek özelliği tespit edin ve polyfill'i yalnızca yerel destek eksik olduğunda yükleyin. Koşulsuz olarak YÜKLEMEYİN.
Paketleyici veya içe aktarma eşlemesiyle:
// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
import("@oddbird/popover-polyfill");
}
Paketleyici olmadan, <script type="module"> içindeki bir CDN'den içe aktarın:
<script type="module">
if (!("popover" in HTMLElement.prototype)) {
import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
}
</script>
Stil uyarısı: Polyfill, gerçek :popover-open sözde sınıfını tanımlayamadığı için bunun yerine .\:popover-open sınıfını uygular. ZORUNLU: İkisini :is() veya :where() ile birleştirin. Aksi takdirde, :popover-open içermeyen tarayıcılar kuralın tamamını siler:
[popover]:is(:popover-open, .\:popover-open) {
display: block;
}
Alternatif olarak, polyfill içermeyen eski bir yedek için position: fixed kullanın ve koordinatları getBoundingClientRect() aracılığıyla manuel olarak hesaplayın veya kullanım alanına uygunsa inset: auto ile varsayılan konumlandırmayı kullanın.
sibling-index()
- Yol gösterici bilgi: sibling-index() desteklenmiyorsa kenar boşluğunu manuel olarak eklemek için
+operatörünü kullanın. Ör.popover + popover { margin-top: 1rem }
anchor-positioning
- Öneri: CSS Anchor Positioning Polyfill'i kullanın. Polyfill olmayan bir yedek için
@supports not (anchor-name: --foo)kullanarak ipucunu varsayılan olarak görüntü alanının alt kısmında sabit bir konuma ayarlayın.
transition-behavior
- Rehber: transition-behavior desteklenmiyorsa JavaScript kullanarak sınıflar aracılığıyla animasyon ekleyin. Bu animasyon, toast öğesi görünürken ve kaybolurken oynatılır.