Uygulamalı Eylemler: clickOutside tooltip autofocus
Yaygın kullanıcı arayüzü desenleri için gerçek dünyada kullanılabilir yeniden kullanılabilir eylemler oluşturun.
Uygulamalı Eylemler: clickOutside tooltip autofocus, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.
clickOutside eylemi
Menüleri ve açılır listeleri kapatmak için bir öğenin dışına yapılan tıklamaları algılayın.
function clickOutside(node, cb) {
function handler(e) { if (!node.contains(e.target)) cb(); }
document.addEventListener("click", handler, true);
return { destroy() { document.removeEventListener("click", handler, true); } };
}clickOutside kullanımı
Kullanıcı dışarı tıkladığında çalışacak bir geri çağırma işlevi gönderin.
<div use:clickOutside={() => open = false}>Otomatik odaklama eylemi
Bir öğe bağlandığında ona odaklanın; bu yöntem, bind:this ile onMount kullanmaktan daha temizdir.
function autofocus(node) { node.focus(); }Otomatik odaklama kullanımı
Bunu giriş alanlarına veya odaklanılabilen herhangi bir öğeye uygulayabilirsiniz.
<input use:autofocus />Araç ipucu eylemi
Üzerine gelindiğinde bir araç ipucu gösterin. Dinleyicileri ve DOM oluşturmayı tek bir eylem içinde kapsülleyin.
lazyLoad eylemi
Görselleri geç yüklemek için IntersectionObserver ile use: yönergesini birlikte kullanın.
clickConfirm eylemi
Yıkıcı işlemleri onaylamak için belirli bir zaman aralığında iki tıklama gerektirin.
Bileşenler arasında yeniden kullanma
Bir eylem yazıldıktan sonra uyumlu her öğede çalışır. Eylemleri $lib/actions içinde saklayın.
Eylem kitaplıkları
svelte-use gibi paketler, önceden oluşturulmuş onlarca eylem sunar.
Eylemleri birleştirme
Tek bir öğeye birden fazla eylem uygulayın: use:autofocus use:clickOutside={close}.
En iyi uygulama
Eylemleri tek bir davranışa odaklı tutun. Daha zengin etkiler için eylemleri birleştirin.
Hızlı kontrol
Bir clickOutside eyleminin neye ihtiyacı vardır?
Özet
clickOutside, otomatik odaklama ve araç ipucu gibi pratik eylemler, yeniden kullanılabilir DOM davranışlarının nasıl kapsülleneceğini gösterir.
Sıkça Sorulan Sorular
“Uygulamalı Eylemler: clickOutside tooltip autofocus” dersi ücretsiz mi?
Evet — “Uygulamalı Eylemler: clickOutside tooltip autofocus” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.
“Uygulamalı Eylemler: clickOutside tooltip autofocus” dersinde ne öğreneceğim?
Yaygın kullanıcı arayüzü desenleri için gerçek dünyada kullanılabilir yeniden kullanılabilir eylemler oluşturun. Sveltejs Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Sveltejs Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Uygulamalı Eylemler: clickOutside tooltip autofocus” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Sveltejs Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- use: Yönergesi Söz Dizimi
- Eylem Parametreleri ve Güncellemeler
- destroy() Temizleme İşlevi
- Uygulamalı Eylemler: clickOutside tooltip autofocus