Uyarlanabilir ve erişilebilir durum mesajı bileşeninin nasıl oluşturulacağına dair temel bir genel bakış.
Bu gönderide, bir durum mesajı bileşeni oluşturma ile ilgili düşüncenizi paylaşmak istiyorum. Şunu deneyin: demo.
Video kullanmayı tercih ederseniz bu gönderinin YouTube versiyonunu kullanabilirsiniz:
Genel Bakış
Kısa iletiler, kullanıcılara yönelik etkileşimsiz, pasif ve eşzamansız kısa mesajlardır. Bunlar genellikle kullanıcıyı bilgilendirmek için bir arayüz geri bildirim kalıbı olarak kullanılır bir eylemin sonuçları hakkında.
Etkileşimler
Kısa iletiler bildirimlerden farklıdır. uyarılar ve istemler çünkü etkileşimli değildir; kapatılmak veya ısrar etmek amaçlanmamıştır. Bildirimler daha önemli bilgiler sağlar, eşzamanlı mesajlaşmayı kullanarak etkileşim veya sistem düzeyinde mesajlar (sayfa düzeyi yerine) gerektirir. Kısa mesajlar diğer bildirim stratejilerinden daha pasiftir.
Brüt kar
İlgili içeriği oluşturmak için kullanılan
<output>
öğesi, tost için iyi bir seçimdir çünkü
okuyucular. Doğru HTML, JavaScript ile geliştirmemiz için güvenli bir temel sağlar ve
ve çok sayıda JavaScript bulunacak.
Kadeh kaldırın
<output class="gui-toast">Item added to cart</output>
Daha fazla
dahil
role="status"
ekleyerek. Bu, kullanıcılara
tarayıcı <output>
öğelerine dolaylı
rol
bakın.
<output role="status" class="gui-toast">Item added to cart</output>
Tost kutusu
Aynı anda birden fazla durum mesajı gösterilebilir. Birden fazla öğeyi aynı anda bir kap kullanılır. Bu kapsayıcı, aynı zamanda kısa kadeh kaldırın.
<section class="gui-toast-group">
<output role="status">Wizard Rose added to cart</output>
<output role="status">Self Watering Pot added to cart</output>
</section>
Düzenler
Tostları
inset-block-end
eklenir ve daha fazla kısa mesaj eklenirse, bunlar ekran kenarından üst üste yığılır.
GUI kapsayıcısı
Kısa ileti kapsayıcısı, kısa mesajları sunmak için gereken tüm düzen çalışmalarını yapar. İnsanların
fixed
öğesini görüntü alanına ekler ve mantıksal özelliği kullanır
inset
ile
sabitlenecek kenarlara ek olarak aynı block-end
kenarından biraz padding
ekleyin.
.gui-toast-group {
position: fixed;
z-index: 1;
inset-block-end: 0;
inset-inline: 0;
padding-block-end: 5vh;
}
Bildirim kapsayıcısı, kendisini görüntü alanının içinde konumlandırmanın yanı sıra,
tostları hizalayıp dağıtabilen ızgara kapsayıcısı. Öğeler aşağıdaki gibi ortalanır:
justify-content
içeren ve justify-items
ile ayrı ayrı ortalanmış.
Kadehlerin dokunmaması için biraz gap
atın.
.gui-toast-group {
display: grid;
justify-items: center;
justify-content: center;
gap: 1vh;
}
GUI Kısaltması
Bir tostun biraz padding
, bazı köşeleri daha yumuşak
border-radius
,
ve bir min()
fonksiyonu
yardımcı olabilir. Aşağıdaki CSS'deki duyarlı boyut
kısa mesaj ek açıklamalarının görüntü alanının% 90'ından fazlasını
25ch
.
.gui-toast {
max-inline-size: min(25ch, 90vw);
padding-block: .5ch;
padding-inline: 1ch;
border-radius: 3px;
font-size: 1rem;
}
Stiller
Düzen ve konumlandırma ayarlandığında kullanıcıya uyum sağlamanıza yardımcı olacak CSS'yi ekleyin Ayarlar ve etkileşimler.
Tost kabı
Kısa mesajlar etkileşimli değildir, bunlara dokunmak veya hızlıca kaydırmak bir şey yapmaz, ancak kullanıcılar işaretçi etkinliklerini kullanır. Tostların çalmasını önleyin aşağıdaki CSS ile yapılan tıklama sayısı.
.gui-toast-group {
pointer-events: none;
}
GUI Kısaltması
Kısa açıklamalar özel özellikler, HSL ve tercih edilen medya sorgusudur.
.gui-toast {
--_bg-lightness: 90%;
color: black;
background: hsl(0 0% var(--_bg-lightness) / 90%);
}
@media (prefers-color-scheme: dark) {
.gui-toast {
color: white;
--_bg-lightness: 20%;
}
}
Animasyon
Yeni bir kısa mesaj, ekrana girerken animasyonla görünmelidir.
translate
değerlerinin 0
değerine ayarlanmasıyla azalan hareketi karşılamaya olanak tanır.
varsayılan olarak ancak bir hareket tercihi medyasında hareket değerinin bir uzunluğa güncellenmesi
sorgu . Animasyonlar herkes tarafından görüntüleniyor, ancak bazı kullanıcılarda
hesaplayabilirsiniz.
Burada, durum mesajı animasyonu için kullanılan animasyon kareleri gösterilmektedir. CSS, kontrol panelinde giriş, bekleme ve kısa mesaj çıkışını tek bir animasyonda bulabilirsiniz.
@keyframes fade-in {
from { opacity: 0 }
}
@keyframes fade-out {
to { opacity: 0 }
}
@keyframes slide-in {
from { transform: translateY(var(--_travel-distance, 10px)) }
}
Ardından, durum mesajı öğesi değişkenleri ayarlar ve animasyon karelerini düzenler.
.gui-toast {
--_duration: 3s;
--_travel-distance: 0;
will-change: transform;
animation:
fade-in .3s ease,
slide-in .3s ease,
fade-out .3s ease var(--_duration);
}
@media (prefers-reduced-motion: no-preference) {
.gui-toast {
--_travel-distance: 5vh;
}
}
JavaScript
Stiller ve ekran okuyucu tarafından erişilebilir HTML hazır olduğunda, kullanıcıya bağlı olarak tostların oluşturulmasını, eklenmesini ve imha edilmesini düzenler etkinlikler. Durum mesajı bileşeninin geliştirici deneyimi minimum düzeyde olmalıdır ve aşağıdaki gibi kolayca başlayabilirsiniz:
import Toast from './toast.js'
Toast('My first toast')
Kısa mesaj grubu ve kısa iletiler oluşturuluyor
Toast modülü JavaScript'ten yüklendiğinde bir durum mesajı kapsayıcısı oluşturmalıdır
ve sayfaya ekleyin. Öğeyi body
tarihinden önce eklemeyi seçtim. Bu işlem
Kapsayıcı şu kadar süre boyunca kapsayıcının üzerinde olduğundan, z-index
yığma sorunu olması pek olası değil
tüm gövde öğeleri.
const init = () => {
const node = document.createElement('section')
node.classList.add('gui-toast-group')
document.firstElementChild.insertBefore(node, document.body)
return node
}
init()
işlevi, modülün içinde çağrılmakta ve öğe depolanmaktadır.
Toaster
olarak:
const Toaster = init()
Toast HTML öğesi oluşturma işlemi createToast()
işleviyle yapılır. İlgili içeriği oluşturmak için kullanılan
işlevi, durum mesajı için bazı metin gerektirir, bir <output>
öğesi oluşturur ve
metni bazı sınıflar ve özelliklerle ekler, metni ayarlar ve düğümü döndürür.
const createToast = text => {
const node = document.createElement('output')
node.innerText = text
node.classList.add('gui-toast')
node.setAttribute('role', 'status')
return node
}
Bir veya daha fazla ileti dizisini yönetmek
JavaScript artık dokümana tostlar içeren bir kapsayıcı ekler ve
hazır tostlar eklenmeye hazır. addToast()
işlevi, birini işlemeyi düzenler
kadeh kaldırın. Önce kadeh kaldırma sayısını ve hareketin uygun olup olmadığını kontrol edin
bu bilgileri kullanarak kadeh kaldırın
Böylece diğer kısa mesajlar "yer aç"mış gibi görünür. yeni kadeh kaldırın.
const addToast = toast => {
const { matches:motionOK } = window.matchMedia(
'(prefers-reduced-motion: no-preference)'
)
Toaster.children.length && motionOK
? flipToast(toast)
: Toaster.appendChild(toast)
}
İlk kızarmış ekstreyi eklerken Toaster.appendChild(toast)
,
CSS animasyonlarını tetikleyen sayfa: animasyon ekle, 3s
bekle, canlandır.
flipToast()
, bir teknik kullanılarak mevcut durum iletileri olduğunda çağrılır
adı FLIP - Paul
Lewis'a dokunun. Buradaki fikir, aradaki farkın
yeni durum mesajı eklenmeden önce ve eklendikten sonra yer alır.
Bunu, ekmek kızartma makinesinin şu anda nerede olduğunu ve nereye gideceğini işaretlemek gibi düşünün.
animasyon oluşturma çabasıdır.
const flipToast = toast => {
// FIRST
const first = Toaster.offsetHeight
// add new child to change container size
Toaster.appendChild(toast)
// LAST
const last = Toaster.offsetHeight
// INVERT
const invert = last - first
// PLAY
const animation = Toaster.animate([
{ transform: `translateY(${invert}px)` },
{ transform: 'translateY(0)' }
], {
duration: 150,
easing: 'ease-out',
})
}
Düzeni kaldırma işlemini CSS ızgarası yapar. Yeni bir tost eklendiğinde, ızgara tarafından konur en başa ekleyin ve diğerleriyle boşluklar belirleyin. Aynı zamanda, web'de animasyon kapsayıcıya eski konumdan animasyon eklemek için kullanılır.
Tüm JavaScript kodlarını bir araya getirme
Toast('my first toast')
çağrıldığında bir durum mesajı oluşturulur ve sayfaya eklenir
(belki de kapsayıcı yeni kadrajı yansıtacak şekilde canlandırılıyor olabilir),
vadet
döndürülür ve oluşturulan kısa mesaj
izlendi:
Söz konusu çözünürlük için CSS animasyon tamamlama (üç animasyon karesi animasyonu).
const Toast = text => {
let toast = createToast(text)
addToast(toast)
return new Promise(async (resolve, reject) => {
await Promise.allSettled(
toast.getAnimations().map(animation =>
animation.finished
)
)
Toaster.removeChild(toast)
resolve()
})
}
Bu kodun kafa karıştırıcı kısmının Promise.allSettled()
işlevinde olduğunu hissettim
ve toast.getAnimations()
eşleme. Birden fazla animasyon karesi animasyonu kullandığımdan
kadeh kaldırma için, hepsinin bittiğini emin olmak için, her birinin
JavaScript'ten istendiğinde
finished
vaatleri yerine getirmek için
kullanılır.
allSettled
ve tüm vaatlerinden sonra kendini tamamlanmış olarak çözüme kavuşturmak bizim için işe yarıyor mu?
karşılandı. await Promise.allSettled()
kullanılması,
kod, öğeyi güvenli bir şekilde kaldırabilir ve kısa iletinin
yaşam döngüsü boyunca geçerlidir. Son olarak, resolve()
işlevinin çağrılması üst düzey Toast vaadini yerine getirir.
geliştiriciler, durum mesajı gösterildikten sonra temizlik yapabilir veya başka işlemler yapabilir.
export default Toast
Son olarak, Toast
işlevi modülden dışa aktarılır.
içe aktarmanızı sağlar.
Toast bileşenini kullanma
Toast veya kısa ileti'nin geliştirici deneyimi,
Toast
işlevini kullanıp bir mesaj dizesiyle çağırabilirsiniz.
import Toast from './toast.js'
Toast('Wizard Rose added to cart')
Geliştirici, işi temizlemek gibi bir şey isterse, eş zamansız ve bekleyin.
import Toast from './toast.js'
async function example() {
await Toast('Wizard Rose added to cart')
console.log('toast finished')
}
Sonuç
Şimdi bunu nasıl yaptığımı öğrendiğinize göre siz nasıl ‽ 🙂
Gelin, yaklaşımlarımızı çeşitlendirelim ve web'de içerik geliştirmenin tüm yollarını öğrenelim. Bir demo oluşturup beni tweet'le bağlantıları eklerim aşağıdaki topluluk remiksleri bölümüne gidin!
Topluluk remiksleri
- HTML/CSS/JS ile @_developit: demo & kod
- HTML/CSS/JS ile Joost van der Schee: demo ve kod