Pop-up'lar: Yeniden canlanıyor!

Jhey Tompkins

Açık Kullanıcı Arayüzü Girişimi'nin amacı, geliştiricilerin mükemmel kullanıcı deneyimleri oluşturmasını kolaylaştırmaktır. Bunu yapmak için geliştiricilerin karşılaştığı daha sorunlu kalıpları ele almaya çalışıyoruz. Daha iyi platform yerleşik API'leri ve bileşenleri sağlayarak bunu yapabiliriz.

Bu tür sorunlu alanlardan biri, Open UI'da "Popovers" olarak tanımlanan pop-up'lardır.

Pop-up'lar uzun süredir oldukça tartışmalı bir üne sahip. Bu durum kısmen, hem oluşturulma hem de dağıtılma şekillerinden kaynaklanır. İyi bir şekilde oluşturulması kolay olmasa da kullanıcıları belirli şeylere yönlendirerek veya sitenizdeki içeriklerden haberdar ederek (özellikle zevkli bir şekilde kullanıldığında) çok fazla değer sağlayabilirler.

Pop-up'lar oluşturulurken genellikle iki temel endişe söz konusudur:

• Bu öğenin, içeriğinizin geri kalanının üzerinde uygun bir yere yerleştirilmesini sağlama
• Nasıl erişilebilir hale getirileceği (klavyeyle uyumlu, odaklanılabilir vb.)

Yerleşik Popover API'nin çeşitli hedefleri vardır. Bu hedeflerin tamamı, geliştiricilerin bu kalıbı oluşturmasını kolaylaştırmak gibi ortak bir amaca hizmet eder. Bu hedeflerden bazıları şunlardır:

• Bir öğenin ve alt öğelerinin belgenin geri kalanının üzerinde görüntülenmesini kolaylaştırır.
• Erişilebilir hale getirin.
• En yaygın davranışlar (hafif kapatma, tekil, üst üste yerleştirme vb.) için JavaScript gerektirmez.

Pop-up'larla ilgili tüm özellikleri OpenUI sitesinde inceleyebilirsiniz.

Tarayıcı uyumluluğu

Yerleşik Popover API'yi şu anda nerelerde kullanabilirsiniz? Bu özellik, dokümanın yazıldığı tarih itibarıyla Chrome Canary'de "Deneysel web platformu özellikleri" işaretiyle desteklenmektedir.

Bu flag'i etkinleştirmek için Chrome Canary'yi açıp chrome://flags adresini ziyaret edin. Ardından "Deneysel web platformu özellikleri" işaretini etkinleştirin.

Bu özelliği üretim ortamında test etmek isteyen geliştiriciler için Origin Trial da mevcuttur.

Son olarak, API için geliştirilmekte olan bir polyfill bulunmaktadır. github.com/oddbird/popup-polyfill adresindeki depoya göz atmayı unutmayın.

Aşağıdaki yöntemlerle pop-up desteği olup olmadığını kontrol edebilirsiniz:

const supported = HTMLElement.prototype.hasOwnProperty("popover");

Mevcut çözümler

Şu anda içeriğinizi her şeyin üzerinde tanıtmak için neler yapabilirsiniz? Tarayıcınızda destekleniyorsa HTML Dialog öğesini kullanabilirsiniz. Bu işlevi "Modal" biçiminde kullanmanız gerekir. Bunun için JavaScript'in kullanılması gerekir.

Dialog.showModal();

Erişilebilirlik konusunda dikkat edilmesi gereken bazı noktalar vardır. Örneğin, Safari'nin 15.4 sürümünden önceki sürümlerini kullanan kullanıcılara hizmet veriyorsanız a11y-dialog kullanmanız önerilir.

Ayrıca, popover, uyarı veya ipucu tabanlı birçok kitaplıktan birini de kullanabilirsiniz. Bunların çoğu benzer şekilde çalışır.

• Pop-over'ları göstermek için gövdeye bir kapsayıcı ekleyin.
• Diğer her şeyin üzerinde duracak şekilde stil verin.
• Bir öğe oluşturun ve popover göstermek için kapsayıcıya ekleyin.
• DOM'dan popover öğesini kaldırarak gizleyin.

Bu, geliştiricilerin ek bir bağımlılık ve daha fazla karar vermesini gerektirir. Ayrıca, ihtiyacınız olan her şeyi sunan bir teklif bulmak için araştırma yapmanız gerekir. Popover API, ipuçları da dahil olmak üzere birçok senaryoya hizmet etmeyi amaçlar. Bu sayede, geliştiricilerin deneyimlerini oluşturmaya odaklanabilmesi için tüm bu yaygın senaryoları ele alarak başka bir karar vermelerini engellemeyi amaçlıyoruz.

İlk pop-up'ınız

İhtiyacınız olan tek şey budur.

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>

Peki burada ne oluyor?

• Pop-over öğesini bir kapsayıcıya veya başka bir yere yerleştirmeniz gerekmez. Bu öğe varsayılan olarak gizlidir.
• Görünmesi için JavaScript yazmanız gerekmez. Bu durum, popovertoggletarget özelliğiyle ele alınır.
• Göründüğünde en üst katmana yükseltilir. Bu durumda, görüntü alanındaki document simgesinin üzerinde tanıtılır. z-index öğesini yönetmeniz veya popover'ınızın DOM'da nerede olduğu konusunda endişelenmeniz gerekmez. Bu öğe, DOM'da derinlere yerleştirilmiş ve kırpma üst öğeleri olan bir öğe olabilir. Ayrıca, DevTools aracılığıyla hangi öğelerin şu anda en üst katmanda olduğunu da görebilirsiniz. En üst katman hakkında daha fazla bilgi için bu makaleyi inceleyin.

• Kutu içeriğinde "Light Dismiss" özelliği bulunur. Bununla, popover'ın dışını tıklama, klavyeyle başka bir öğeye gitme veya Esc tuşuna basma gibi bir kapatma sinyaliyle popover'ı kapatabileceğinizi kastediyoruz. Tekrar açıp deneyin.

Pop-up ile başka hangi avantajlardan yararlanabilirsiniz? Örneği biraz daha ayrıntılı inceleyelim. Sayfada içerik bulunan bu demoyu inceleyin.

Bu kayan işlem düğmesi, yüksek bir z-index ile sabit bir konuma sahip.

.fab {
  position: fixed;
  z-index: 99999;
}

Popover içeriği DOM'a yerleştirilir ancak popover'ı açtığınızda bu sabit konumlu öğenin üzerine çıkarılır. Herhangi bir stil ayarlamanız gerekmez.

Ayrıca, popover'ın artık bir ::backdrop sözde öğesi olduğunu da fark edebilirsiniz. Üst katmanda bulunan tüm öğeler, stil verilebilen bir ::backdrop sözde öğesi alır. Bu örnekte, ::backdrop öğesi, alfa arka plan rengi azaltılmış ve alttaki içeriği bulanıklaştıran bir arka plan filtresiyle stillendirilmiştir.

Popover'ı biçimlendirme

Şimdi de popover'ı stilize etmeye odaklanalım. Varsayılan olarak, popover'ın sabit bir konumu ve uygulanan bazı dolguları vardır. Ayrıca display: none. Bir popover göstermek için bu ayarı geçersiz kılabilirsiniz. Ancak bu, öğeyi en üst katmana taşımaz.

[popover] { display: block; }

Pop-up'ınızı nasıl tanıtırsanız tanıtın, üst katmana tanıttıktan sonra yerleştirmeniz veya konumlandırmanız gerekebilir. En üst katmanı hedefleyemez ve

:open {
  display: grid;
  place-items: center;
}

Varsayılan olarak, popover margin: auto kullanılarak görüntü alanının ortasında yerleştirilir. Ancak bazı durumlarda konumlandırma konusunda net olmak isteyebilirsiniz. Örneğin:

[popover] {
  top: 50%;
  left: 50%;
  translate: -50%;
}

CSS grid veya flexbox kullanarak popover'ınızdaki içeriği düzenlemek istiyorsanız bu içeriği bir öğeye sarmak iyi bir fikir olabilir. Aksi takdirde, popover üst katmanda olduğunda display değerini değiştiren ayrı bir kural tanımlamanız gerekir. Varsayılan olarak ayarladığınızda display: none geçersiz kılınır ve varsayılan olarak gösterilir.

[popover]:open {
 display: flex;
}

Bu demoyu denediyseniz pop-over'ın artık giriş ve çıkış geçişi yaptığını fark edeceksiniz. :open sözde seçicisini kullanarak popover'ları içeri ve dışarı geçirebilirsiniz. :open sözde seçicisi, gösterilen (ve dolayısıyla en üst katmanda bulunan) pop-over'larla eşleşir.

Bu örnekte, geçişi sağlamak için özel bir nitelik kullanılmaktadır. Ayrıca popover'ın ::backdrop öğesine de geçiş uygulayabilirsiniz.

[popover] {
  --hide: 1;
  transition: transform 0.2s;
  transform: translateY(calc(var(--hide) * -100vh))
            scale(calc(1 - var(--hide)));
}

[popover]::backdrop {
  transition: opacity 0.2s;
  opacity: calc(1 - var(--hide, 1));
}


[popover]:open::backdrop  {
  --hide: 0;
}

Burada bir ipucu olarak, geçişleri ve animasyonları hareket için bir medya sorgusu altında gruplandırabilirsiniz. Bu, zamanlamalarınızı korumanıza da yardımcı olabilir. Bunun nedeni, özel özellik aracılığıyla popover ve ::backdrop arasında değer paylaşamamanızdır.

@media(prefers-reduced-motion: no-preference) {
  [popover] { transition: transform 0.2s; }
  [popover]::backdrop { transition: opacity 0.2s; }
}

Şu ana kadar, popover göstermek için popovertoggletarget kullanımını gördünüz. Bu uyarıyı kapatmak için "Light dismiss" (Kapat) seçeneğini kullanıyoruz. Ancak, kullanabileceğiniz popovershowtarget ve popoverhidetarget özellikleri de sunulur. Popover'a, popover'ı gizleyen bir düğme ekleyelim ve açma/kapatma düğmesini popovershowtarget kullanacak şekilde değiştirelim.

<div id="code-popover" popover>
  <button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>

Daha önce de belirtildiği gibi, Popover API yalnızca geçmişteki pop-up kavramımızı kapsamaz. Bildirimler, menüler, ipuçları vb. gibi her türlü senaryo için geliştirebilirsiniz.

Bu senaryolardan bazıları farklı etkileşim kalıpları gerektirir. Fareyle üzerine gelme gibi etkileşimler. popoverhovertarget özelliğiyle ilgili deneme yapıldı ancak bu özellik şu anda uygulanmıyor.

<div popoverhovertarget="hover-popover">Hover for Code</div>

Buradaki fikir, hedefi göstermek için bir öğenin üzerine gelmenizdir. Bu davranış, CSS özellikleri aracılığıyla yapılandırılabilir. Bu CSS özellikleri, popover'ın tepki verdiği bir öğenin üzerine gelme ve öğeden ayrılma zaman aralığını tanımlar. Denemede kullanılan varsayılan davranışta, 0.5s :hover olduktan sonra bir popover gösteriliyordu. Ardından, kapatmak için hafifçe kapatma veya başka bir popover'ın açılması gerekir (Bu konuyla ilgili daha fazla bilgiye ilerleyen bölümlerde yer verilecektir). Bunun nedeni, pop-up'ın gizlenme süresinin Infinity olarak ayarlanmış olmasıdır.

Bu arada, bu işlevselliği doldurmak için JavaScript kullanabilirsiniz.

let hoverTimer;
const HOVER_TRIGGERS = document.querySelectorAll("[popoverhovertarget]");
const tearDown = () => {
  if (hoverTimer) clearTimeout(hoverTimer);
};
HOVER_TRIGGERS.forEach((trigger) => {
  const popover = document.querySelector(
    `#${trigger.getAttribute("popoverhovertarget")}`
  );
  trigger.addEventListener("pointerenter", () => {
    hoverTimer = setTimeout(() => {
      if (!popover.matches(":open")) popover.showPopover();
    }, 500);
    trigger.addEventListener("pointerleave", tearDown);
  });
});

Bir öğeyi açıkça fareyle üzerine gelme penceresi olarak ayarlamanın avantajı, kullanıcının işleminin kasıtlı olmasını sağlamasıdır (örneğin, kullanıcı işaretçisini bir hedefin üzerine getirir). Kullanıcılar istemediği sürece pop-up'ı göstermek istemiyoruz.

Hedefin üzerine 0.5s olarak ayarlanmış pencereyle gelebileceğiniz bu demoyu deneyin.

Yaygın kullanım alanlarına ve örneklere geçmeden önce birkaç noktayı inceleyelim.

Pop-over türleri

JavaScript dışı etkileşim davranışını ele aldık. Peki, popover davranışının tamamı hakkında ne düşünüyorsunuz? “Hafifçe kapatma” özelliğini kullanmak istemiyorsanız ne yapmalısınız? Yoksa popover'larınıza singleton kalıbı mı uygulamak istiyorsunuz?

Popover API, davranış açısından farklılık gösteren üç tür popover belirtmenize olanak tanır.

[popover=auto]/[popover]:

• İç içe yerleştirme desteği. Bu, yalnızca DOM'da iç içe yerleştirilmiş olması anlamına gelmez. Üst öğe pop-over'ı şu şekilde tanımlanır:
  • DOM konumuna (alt) göre ilişkilendirilir.
  • popovertoggletarget, popovershowtarget gibi alt öğelerdeki tetikleyici özelliklerle ilişkilendirilir.
  • anchor özelliğiyle ilişkilendirilir (CSS Anchoring API geliştirme aşamasındadır).
• Hafifçe kaydırarak kapatma
• Açıldığında üst öğe popover'ları olmayan diğer popover'lar kapatılır. Aşağıdaki demoyu kullanarak, üst öğe pop-over'larıyla iç içe yerleştirmenin nasıl çalıştığını deneyin. popoverhidetarget/popovershowtarget örneklerinden bazılarını popovertoggletarget olarak değiştirmenin durumu nasıl etkilediğini görün.
• Bir hafif uyarıyı kapatmak tüm hafif uyarıları kapatır. Ancak gruptaki bir uyarıyı kapatmak yalnızca grupta bunun üstünde yer alan uyarıları kapatır.

[popover=manual]:

• Diğer popover'ları kapatmaz.
• Işıkla kapatma özelliği yok.
• Tetikleyici öğe veya JavaScript aracılığıyla açıkça kapatılması gerekir.

JavaScript API

Pop-over'larınız üzerinde daha fazla kontrole ihtiyaç duyduğunuzda JavaScript ile yaklaşabilirsiniz. Hem showPopover hem de hidePopover yöntemini kullanabilirsiniz. Ayrıca, dinlenecek popovershow ve popoverhide etkinlikleri de vardır:

Pop-up gösterme js popoverElement.showPopover() Pop-up gizleme:

popoverElement.hidePopover()

Gösterilen pop-up'ı dinleme:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

Gösterilen bir popover'ı dinleme ve gösterilmesini iptal etme:

popoverElement.addEventListener('popovershow',event => {
  event.preventDefault();
  console.warn(‘We blocked a popover from being shown’);
})

Bir popover'ın gizlenmesini dinleyin:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

Gizlenen bir popover'ı iptal edemezsiniz:

popoverElement.addEventListener('popoverhide',event => {
  event.preventDefault();
  console.warn("You aren't allowed to cancel the hiding of a popover");
})

Bir popover'ın en üst katmanda olup olmadığını kontrol edin:

popoverElement.matches(':open')

Bu, daha az yaygın olan bazı senaryolarda ekstra güç sağlar. Örneğin, bir süre etkinlik olmadıktan sonra pop-up gösterin.

Bu demoda, duyulabilir patlama sesleri içeren pop-up'lar var. Bu nedenle, sesi çalmak için JavaScript'e ihtiyacımız olacak. Tıklandığında popover'ı gizliyor, sesi çalıyor ve ardından tekrar gösteriyoruz.

Erişilebilirlik

Popover API'de erişilebilirlik ön plandadır. Erişilebilirlik eşlemeleri, gerektiğinde popover'ı tetikleyici öğesiyle ilişkilendirir. Bu nedenle, popovertoggletarget gibi tetikleyici özelliklerden birini kullandığınız varsayıldığında aria-haspopup gibi aria-* özelliklerini bildirmeniz gerekmez.

Odak yönetimi için, odağı bir popover içindeki öğeye taşımak üzere otomatik odaklanma özelliğini kullanabilirsiniz. Bu, iletişim kutusunda olduğu gibidir ancak odak döndürülürken farklılık oluşur. Bunun nedeni, hafif kapatma özelliğidir. Çoğu durumda, bir popover'ı kapatmak odağı daha önce odaklanılan öğeye döndürür. Ancak odak, kapatma işlemi sırasında tıklanan öğeye taşınır (odaklanılabiliyorsa). Açıklayıcıdaki odak yönetimi bölümüne göz atın.

Bu demoyu çalışırken görmek için "tam ekran sürümünü" açmanız gerekir.

Bu demoda, odaklanılan öğe yeşil bir dış çizgiyle gösterilir. Klavyenizle arayüzde gezinmeyi deneyin. Bir popover kapatıldığında odağın nereye döndüğünü not edin. Ayrıca, sekmeler arasında geçiş yaptığınızda popover'ın kapandığını da fark edebilirsiniz. Bu durum tasarım gereğidir. Pop-over'larda odak yönetimi olsa da odak yakalanmaz. Klavye ile gezinme, odak popover'ın dışına çıktığında kapatma sinyalini tanımlar.

Sabitleme (geliştirme aşamasında)

Pop-over'lar söz konusu olduğunda, öğeyi tetikleyicisine sabitlemek zorlu bir kalıptır. Örneğin, bir ipucu tetikleyicisinin üzerinde gösterilecek şekilde ayarlanmışsa ancak doküman kaydırılırsa. Bu ipucu, görünüm penceresi tarafından kesilebilir. Bu durumla başa çıkmak için "Floating UI" gibi mevcut JavaScript teklifleri vardır. Bu durumun yaşanmasını önlemek ve istenen konum sırasını kullanmak için ipucu yeniden konumlandırılır.

Ancak bunu stillerinizle tanımlayabilmenizi istiyoruz. Bunu ele almak için Popover API ile birlikte geliştirilen bir eşlik eden API vardır. "CSS Anchor Positioning" API, öğeleri diğer öğelere bağlamanıza olanak tanır. Bunu da öğeleri, görüntü alanı tarafından kesilmeyecek şekilde yeniden konumlandırarak yapar.

Bu demoda, Anchoring API'nin mevcut durumu kullanılmaktadır. Teknenin konumu, görüntü alanındaki çapanın konumuna göre değişir.

Bu demoyu çalıştıran CSS'nin bir snippet'ini aşağıda bulabilirsiniz. JavaScript gerekmez.

.anchor {
  --anchor-name: --anchor;
}
.anchored {
  position: absolute;
  position-fallback: --compass;
}
@position-fallback --compass {
  @try {
    bottom: anchor(--anchor top);
    left: anchor(--anchor right);
  }
  @try {
    top: anchor(--anchor bottom);
    left: anchor(--anchor right);
  }
}

Özellikleri buradan inceleyebilirsiniz. Bu API için bir polyfill de olacaktır.

Örnekler

Artık popover'ın neler sunduğunu ve nasıl çalıştığını bildiğinize göre bazı örnekleri inceleyebiliriz.

Bildirimler

Bu demoda "Panoya kopyalandı" bildirimi gösterilmektedir.

• [popover=manual] kullanılır.
• İşlem yapıldığında showPopover ile pop-up göster.
• 2000ms zaman aşımından sonra hidePopover ile gizleyin.

Toasts

Bu demoda, kısa ileti tarzı bildirimleri göstermek için en üst katman kullanılır.

• manual türünde bir popover, kapsayıcı görevi görür.
• Yeni bildirimler popover'a eklenir ve popover gösterilir.
• Tıklama işleminde Web Animations API ile kaldırılır ve DOM'dan silinir.
• Gösterilecek bildirim yoksa popover gizlenir.

İç içe menü

Bu demo, iç içe yerleştirilmiş bir gezinme menüsünün nasıl çalışabileceğini gösterir.

• İç içe yerleştirilmiş popover'lara izin verdiği için [popover=auto] kullanın.
• Klavye ile gezinmek için her açılır listedeki ilk bağlantıda autofocus tuşunu kullanın.
• Bu, CSS Anchoring API için mükemmel bir adaydır. Ancak bu demo için özel özellikleri kullanarak konumları güncellemek üzere az miktarda JavaScript kullanabilirsiniz.

const ANCHOR = (anchor, anchored) => () => {
  const { top, bottom, left, right } = anchor.getBoundingClientRect();
  anchored.style.setProperty("--top", top);
  anchored.style.setProperty("--right", right);
  anchored.style.setProperty("--bottom", bottom);
  anchored.style.setProperty("--left", left);
};

PRODUCTS_MENU.addEventListener("popovershow", ANCHOR(PRODUCT_TARGET, PRODUCTS_MENU));

Bu demoda autofocus kullanıldığından klavye ile gezinmek için "tam ekran görünümünde" açılması gerektiğini unutmayın.

Medya pop-up'ı

Bu demoda, medyayı nasıl öne çıkarabileceğiniz gösterilmektedir.

• Hafif kapatma için [popover=auto] kullanılır.
• JavaScript, videonun play etkinliğini dinler ve videoyu açar.
• Pop-up'lar popoverhide etkinliği videoyu duraklatır.

Wiki tarzı pop-up'lar

Bu demoda, medya içeren satır içi içerik ipuçlarını nasıl oluşturabileceğiniz gösterilmektedir.

• [popover=auto] kullanılır. Atasal olmadıkları için birini göstermek diğerlerini gizler.
• JavaScript ile pointerenter üzerinde gösterilir.
• CSS Anchoring API için bir başka mükemmel aday.

Gezinme Çekmecesi

Bu demo, popover kullanarak gezinme çekmecesi oluşturur.

• Hafif kapatma için [popover=auto] kullanılır.
• İlk gezinme öğesine odaklanmak için autofocus kullanılır.

Arka planları yönetme

Bu demoda, yalnızca bir ::backdrop öğesinin görünür olmasını istediğiniz birden fazla popover için arka planları nasıl yönetebileceğiniz gösterilmektedir.

• Görünür olan pop-over'ların listesini tutmak için JavaScript kullanın.
• Üst katmandaki en alttaki popover'a sınıf adı uygulayın.

Özel imleç pop-over'ı

Bu demoda, popover kullanarak canvas öğesini en üst katmana yükseltmenin ve özel bir imleç göstermek için kullanmanın yolu gösterilmektedir.

• showPopover ve [popover=manual] ile canvas'yı en üst katmana taşıyın.
• Diğer popover'lar açıldığında, canvas popover'ın en üstte olduğundan emin olmak için onu gizleyin ve gösterin.

İşlem sayfası pop-up'ı

Bu demoda, popover'ı nasıl işlem sayfası olarak kullanabileceğiniz gösterilmektedir.

• display ayarını geçersiz kılarak pop-up'ın varsayılan olarak gösterilmesini sağlayın.
• İşlem sayfası, popover tetikleyiciyle açılır.
• Popover gösterildiğinde en üst katmana yükseltilir ve görünüm haline çevrilir.
• Geri dönmek için hafifçe kapatma özelliğini kullanabilirsiniz.

Klavye etkinleştirildiğinde açılan pop-over

Bu demoda, komut paleti tarzı kullanıcı arayüzü için popover'ı nasıl kullanabileceğiniz gösterilmektedir.

• Pop-over'ı göstermek için cmd + j kısayolunu kullanın.
• input, autofocus ile odaklanmış.
• Birleşik kutu, ana girişin altında konumlandırılmış ikinci bir popover öğesidir.
• Açılır liste yoksa hafifçe kapatma işlemi paleti kapatır.
• Anchoring API için başka bir aday

Zamanlı pop-up

Bu demoda, dört saniye boyunca işlem yapılmadığında bir pop-up gösteriliyor. Kullanıcı hakkında güvenli bilgiler içeren uygulamalarda oturumu kapatma kalıcı öğesini göstermek için sıklıkla kullanılan bir kullanıcı arayüzü kalıbı.

• Bir süre işlem yapılmadığında popover'ı göstermek için JavaScript kullanın.
• Pop-up gösterildiğinde zamanlayıcıyı sıfırlayın.

Ekr.Koruyucu

Önceki demoya benzer şekilde, sitenize eğlenceli bir dokunuş katmak için ekran koruyucu ekleyebilirsiniz.

• Bir süre işlem yapılmadığında popover'ı göstermek için JavaScript kullanın.
• Zamanlayıcıyı gizlemek ve sıfırlamak için hafifçe kapatın.

İmleç takibi

Bu demoda, popover'ın giriş imlecini nasıl takip edebileceği gösterilmektedir.

• Seçime, önemli etkinliğe veya özel karakter girişine göre pop-over'ı gösterin.
• Kapsamlı özel özelliklerle popover konumunu güncellemek için JavaScript kullanın.
• Bu kalıbın, gösterilen içerik ve erişilebilirlik açısından dikkatli bir şekilde düşünülerek oluşturulması gerekir.
• Genellikle metin düzenleme kullanıcı arayüzünde ve etiketleme yapabileceğiniz uygulamalarda görülür.

Kayan işlem düğmesi menüsü

Bu demoda, JavaScript olmadan kayan işlem düğmesi menüsü uygulamak için popover'ı nasıl kullanabileceğiniz gösterilmektedir.

• showPopover yöntemiyle manual türünde bir pop-up tanıtın. Bu, ana düğmedir.
• Menü, ana düğmenin hedefi olan başka bir popover'dır.
• Menü, popovertoggletarget ile açılır.
• Gösterilen ilk menü öğesine odaklanmak için autofocus tuşunu kullanın.
• Menü, hafifçe kaydırarak kapatılır.
• Simge bükme işlemi :has() kullanıyor. :has() hakkında daha fazla bilgiyi bu makalede bulabilirsiniz.

İşte bu kadar.

Bu nedenle, Open UI girişimi kapsamında ileride kullanıma sunulacak olan popover'a giriş yapıyoruz. Akıllıca kullanıldığında web platformuna harika bir katkı sağlayacaktır.

Open UI'ya göz atmayı unutmayın. Açıklama pop-up'ı, API geliştikçe güncel tutulur. Tüm demoların yer aldığı koleksiyonu da burada bulabilirsiniz.

Ziyaretiniz için teşekkür ederiz.