Bu hakkında bir yazı Ayakkabı bağı, bir bileşen kütüphanesi Cory LaViska, ama bir bükülme ile. Tüm standart UX bileşenlerinizi tanımlar: sekmeler, modeller, akordeonlar, otomatik tamamlamalar ve çok çok fazla. Kutudan çıktığı anda güzel görünürler, erişilebilirdirler ve tamamen özelleştirilebilirler. Ancak bu bileşenleri React, Solid veya Svelte vb.'de oluşturmak yerine bunları Web Bileşenleri; bu onları kullanabileceğiniz anlamına gelir herhangi çerçeve.
Bazı ön şeyler
Web Bileşenleri harika, ancak şu anda dikkat edilmesi gereken birkaç küçük aksaklık var.
React
Herhangi bir JavaScript çerçevesinde çalıştıklarını söyledim ama daha önce de yazdığım gibi React'ın Web Bileşenleri desteği şu anda fakir. Bu sorunu çözmek için aslında Shoelace sarmalayıcılar oluşturuldu sadece React için.
Kişisel olarak beğendiğim başka bir seçenek de, bir Web Bileşeninin etiket adını ve onun tüm özniteliklerini ve özelliklerini kabul eden, ardından React'in eksikliklerini gidermek gibi kirli işleri yapan ince bir React bileşeni oluşturmaktır. Bu seçenekten bahsetmiştim önceki bir yayında. Bu çözümü beğendim çünkü silinmek üzere tasarlandı. Web Bileşeni birlikte çalışabilirliği sorunu şu anda React'in deneysel şubesinde giderilmiştir; bu nedenle, gönderildikten sonra, kullandığınız herhangi bir ince Web Bileşeni ile birlikte çalışabilen bileşen aranabilir ve kaldırılabilir, bu da size React sarmalayıcıları olmadan doğrudan Web Bileşeni kullanımlarını sağlar.
Sunucu Tarafı Oluşturma (SSR)
Bu yazının yazıldığı sırada SSR desteği de zayıftı. Teorik olarak şöyle bir şey var: Bildirime Dayalı Gölge DOM (DSD) SSR'yi etkinleştirir. Ancak tarayıcı desteği minimum düzeydedir ve her durumda DSD, aslında sunucu desteği doğru çalışmak, yani Sonraki, Remix, veya sunucuda kullandığınız her şeyin bazı özel işleme yeteneğine sahip olması gerekir.
Bununla birlikte, Web Bileşenlerini almanın başka yolları da vardır. sadece iş
Next gibi bir şeyle SSR'lenmiş bir web uygulamasıyla. Kısa versiyon, Web Bileşenlerinizi kaydeden komut dosyalarının, işaretlemeniz ayrıştırılmadan önce engelleyici bir komut dosyasında çalıştırılması gerektiğidir. Ama bu başka bir yazının konusu.
Elbette, müşteri tarafından oluşturulan herhangi bir SPA oluşturuyorsanız bu sorun değildir. Bu yazıda bunun üzerinde çalışacağız.
Hadi başlayalım
Bu yazının Ayakkabı Bağı ve onun Web Bileşeni doğasına odaklanmasını istediğim için şunu kullanacağım: Svelte herşey için. Ben de bunu kullanacağım Stackblitz projesi gösteri için. Bu demoyu adım adım birlikte oluşturacağız, ancak nihai sonucu görmek için istediğiniz zaman REPL'i açmaktan çekinmeyin.
Size Ayakkabı Bağı'nı nasıl kullanacağınızı ve daha da önemlisi onu nasıl özelleştireceğinizi göstereceğim. hakkında konuşacağız Gölge DOM'lar ve dış dünyadan hangi stilleri engelledikleri (ve hangilerini engellemedikleri). Ayrıca şu konularda da konuşacağız: ::part Sizin için tamamen yeni olabilecek CSS seçici ve hatta Shoelace'nin çeşitli animasyonları geçersiz kılmamıza ve özelleştirmemize nasıl izin verdiğini göreceğiz.
Bu yazıyı okuduktan sonra Shoelace'yi sevdiğinizi düşünüyorsanız ve bir React projesinde denemek istiyorsanız tavsiyem bir sarıcı girişte belirttiğim gibi. Bu, Shoelace'nin herhangi bir bileşenini kullanmanıza izin verecektir ve React, halihazırda sahip olduğu Web Bileşeni düzeltmelerini gönderdiğinde tamamen kaldırılabilir (bunu sürüm 19'da arayın).
Ayakkabı Bağıyla Tanışın
Ayakkabı bağı oldukça detaylı Kurulum Talimatları. En basitinden, boşaltabilirsiniz ve HTML belgenize etiketler, işte bu kadar. Bununla birlikte, herhangi bir üretim uygulaması için muhtemelen yalnızca istediğinizi seçerek içe aktarmak isteyeceksiniz ve bunun için de talimatlar var.
Shoelace yüklendiğinde, bazı içerikleri işlemek için bir Svelte bileşeni oluşturalım ve ardından onu tamamen özelleştirmek için gerekli adımları izleyelim. Oldukça önemsiz olmayan bir şey seçmek için sekmeleri ve iletişim kutusunu (genellikle modal olarak anılır) bileşenlerini kullandım. İşte bazı işaretlemeler büyük ölçüde dokümanlardan alınmıştır:
General
Custom
Advanced
Disabled
This is the general tab panel.
This is the custom tab panel.
This is the advanced tab panel.
This is a disabled tab panel.
Hello World!
Bu, bazı hoş, stil sahibi sekmeler oluşturur. Etkin sekmedeki alt çizgi güzel bir şekilde canlandırılıyor ve bir etkin sekmeden diğerine kayıyor.
Shoelace web sitesinde zaten ayrıntılı bir şekilde belgelenmiş olan API'lerin her santimetresini inceleyerek zamanınızı boşa harcamayacağım. Bunun yerine, bu Web Bileşenleriyle en iyi nasıl etkileşim kurabileceğimize ve bu Web Bileşenlerini tamamen nasıl özelleştirebileceğimize bakalım.
API ile etkileşim kurma: yöntemler ve olaylar
Bir Web Bileşenindeki yöntemleri çağırmak ve etkinliklere abone olmak, normal seçim çerçevenizde alışık olduğunuzdan biraz farklı olabilir, ancak çok karmaşık değildir. Bakalım nasıl olacak.
Sekmeler
Sekmeler bileşeni () bir show yöntem, belirli bir sekmeyi manuel olarak gösterir. Bunu çağırmak için sekmelerimizin temel DOM öğesine erişmemiz gerekiyor. Svelte'de bu, kullanmak anlamına gelir bind:this. React'ta bu bir olurdu ref. Ve benzeri. Svelte kullandığımıza göre, bizim için bir değişken tanımlayalım. tabs örnek:
let tabs;
…ve onu bağlayın:
Artık onu çağırmak için bir düğme ekleyebiliriz:
Olaylar için de aynı fikir. Orada bir sl-tab-show olay yeni bir sekme gösterildiğinde etkinleşir. kullanabiliriz addEventListener üzerinde bizim tabs değişkeni kullanabiliriz veya Svelte'nin on:event-name kısayol.
console.log(e)}>Bu, siz farklı sekmeleri gösterirken çalışır ve olay nesnelerini günlüğe kaydeder.
Genellikle sekmeleri oluştururuz ve kullanıcının aralarında tıklama yapmasına izin veririz, dolayısıyla bu çalışma genellikle gerekli değildir, ancak ihtiyacınız olursa oradadır. Şimdi diyalog bileşenini etkileşimli hale getirelim.
diyalog
Diyalog bileşeni () alır open prop, diyaloğun açık olup olmadığını kontrol eder. Bunu Svelte bileşenimizde ilan edelim:
let tabs;
let open = false;
Ayrıca bir sl-hide iletişim kutusunun gizlendiği durum için olay. hadi geçelim bizim open desteklemek ve bağlamak hide böylece kullanıcı iletişim kutusu içeriğinin dışına tıklayarak kapatmak istediğinde bunu sıfırlayabiliriz. Ve bu kapatma düğmesine bir tıklama işleyicisi ekleyelim. open desteklemek falseBu aynı zamanda diyaloğu da kapatacaktır.
open = false}>
Hello World!
Son olarak açık diyalog düğmemizi bağlayalım:
İşte bu kadar. Bir bileşen kitaplığının API'si ile etkileşim kurmak aşağı yukarı basittir. Eğer bu yazının yaptığı tek şey buysa, oldukça sıkıcı olurdu.
Ancak Web Bileşenleri ile oluşturulan Shoelace bazı şeylerin, özellikle de stillerin alışık olduğumuzdan biraz farklı çalışacağı anlamına geliyor.
Tüm stilleri özelleştirin!
Bu yazının yazıldığı an itibarıyla Shoelace hala beta aşamasındadır ve yaratıcı bazı varsayılan stilleri değiştirmeyi, hatta muhtemelen bazı varsayılanları tamamen kaldırmayı, böylece artık ana uygulamanızın stillerini geçersiz kılmamayı düşünüyor. Ele alacağımız kavramlar her iki durumda da geçerlidir, ancak bahsettiğim Ayakkabı Bağı özelliklerinden bazılarının, onu kullandığınızda farklı olması durumunda şaşırmayın.
Shoelace'nin varsayılan stilleri ne kadar güzel olursa olsun, web uygulamamızda kendi tasarımlarımız olabilir ve UX bileşenlerimizin eşleşmesini isteriz. Web Bileşenleri dünyasında bunu nasıl yapacağımızı görelim.
Aslında denemeyeceğiz iyileştirmek herhangi bir şey. Ayakkabı Bağı yaratıcısı benim olabileceğimden çok daha iyi bir tasarımcı. Bunun yerine, nasıl yapılacağına bakacağız değişiklik böylece kendi web uygulamalarınıza uyum sağlayabilirsiniz.
Shadow DOM'larda hızlı bir tur
DevTools'unuzdaki sekme başlıklarından birine bir göz atın; Bunun gibi bir şeye benzemeli:
Sekme öğemiz bir div olan konteyner .tab ve .tab--active sınıf ve bir tabindex, aynı zamanda o sekme için girdiğimiz metni de görüntüler. Ama bir şeyin içinde oturduğuna dikkat edin. gölge kökü. Bu, Web Bileşeni yazarlarının Web Bileşenine kendi işaretlemelerini eklemelerine olanak tanırken aynı zamanda içerik için de bir yer sağlar we sağlamak. dikkat edin eleman? Bu temel olarak "kullanıcının oluşturduğu içeriği koyun" anlamına gelir arasında Web Bileşeni etiketleri okuyun".
Böylece bileşen bir gölge kökü oluşturur ve güzel bir şekilde tasarlanmış sekme başlığını bir yer tutucuyla birlikte oluşturmak için ona bir miktar içerik ekler () içeriğimizi içeride işliyor.
Kapsüllenmiş stiller
Web geliştirmedeki klasik, daha sinir bozucu sorunlardan biri her zaman stiller olmuştur. Basamaklı istemediğimiz yerlere. Uygulamamızda aşağıdaki gibi bir şeyi belirten herhangi bir stil kuralından endişe duyabilirsiniz: div.tab bu sekmelere müdahale eder. Bunun bir sorun olmadığı ortaya çıktı; gölge kökleri stilleri kapsar. Gölge kökünün dışındaki stiller, gölge kökünün içindekileri etkilemez (hakkında konuşacağımız bazı istisnalar dışında) ve bunun tersi de geçerlidir.
Bunun istisnası kalıtsal tarzlardır. Başvuru yapmanıza gerek yok elbette font-family web uygulamanızdaki her öğe için stil. Bunun yerine, font-family bir kez, üzerinde :root or html ve onun altındaki her yeri miras almasını sağlayın. Bu miras aslında gölge kökünü de delecektir.
CSS özel özellikleri (genellikle "css değişkenleri" olarak adlandırılır) ilgili bir istisnadır. Bir gölge kökü, gölge kökü dışında tanımlanan bir CSS özelliğini kesinlikle okuyabilir; bu birazdan alakalı hale gelecektir.
The ::part selektör
Peki ya şu tarzlar değil mi miras almak. Peki ya şunun gibi bir şeyi özelleştirmek istersek? cursor, gölge kökünün içindeki bir şeyin mirasını almaz. Şansımız mı kalmadı? Öyle olmadığımız ortaya çıktı. Yukarıdaki sekme öğesi görüntüsüne ve onun gölge köküne bir kez daha bakın. dikkat edin part özniteliği div? Bu, o öğeyi gölge kökünün dışından hedeflemenize ve biçimlendirmenize olanak tanır. ::part selektör. Biraz örnek üzerinden yürüyeceğiz.
Geçersiz kılınan Ayakkabı bağı stilleri
Bu yaklaşımların her birini çalışırken görelim. Şimdi olduğu gibi, çok Fontlar da dahil olmak üzere ayakkabı bağı stillerinin çoğu, CSS özel özelliklerinden varsayılan değerleri alır. Bu yazı tiplerini uygulamanızın stilleriyle hizalamak için söz konusu özel donanımları geçersiz kılın. Görmek dokümanlar Shoelace'nin hangi CSS değişkenlerini kullandığı hakkında bilgi için veya DevTools'ta herhangi bir öğedeki stilleri inceleyebilirsiniz.
Stilleri gölge kökü aracılığıyla devralma
Açın app.css içindeki dosyayı src dizini StackBlitz projesi. In :root alt kısımda bir bölüm görmelisiniz letter-spacing: normal; deklarasyon. Beri letter-spacing özellik devralınabilir, örneğin yeni bir değer ayarlamayı deneyin 2px. Kaydetme sırasında, gölge kökünde tanımlanan sekme başlıkları da dahil olmak üzere tüm içerik buna göre ayarlanacaktır.
Ayakkabı Bağı CSS değişkenlerinin üzerine yazma
The bileşen bir okur --indicator-color Etkin sekmenin alt çizgisine ilişkin CSS özel özelliği. Bunu bazı temel CSS'lerle geçersiz kılabiliriz:
sl-tab-group {
--indicator-color: green;
}Ve böylece artık yeşil bir göstergemiz var!
Parçaları sorgulama
Şu anda kullandığım Shoelace sürümünde (2.0.0-beta.83), devre dışı bırakılmayan herhangi bir sekmenin pointer imleç. Bunu aktif (seçili) sekme için varsayılan imleç olarak değiştirelim. zaten gördük ki eleman bir ekler part="base" Sekme başlığının kapsayıcısındaki öznitelik. Ayrıca, halihazırda seçili olan sekme bir active bağlanmak. Etkin sekmeyi hedeflemek ve imleci değiştirmek için bu gerçekleri kullanalım:
sl-tab[active]::part(base) {
cursor: default;
}İşte bu kadar!
Animasyonları özelleştirme
Mecazi pastanın üzerine biraz krema eklemek için, Ayakkabı Bağı'nın animasyonları özelleştirmemize nasıl olanak tanıdığını görelim. Ayakkabı bağı şunları kullanır: Web Animasyonları API'sıve bir şeyi açığa çıkarır setDefaultAnimation Farklı öğelerin çeşitli etkileşimlerini nasıl canlandırdığını kontrol eden API. Ayrıntılar için belgelere bakın, ancak örnek olarak, Shoelace'nin varsayılan diyalog animasyonunu dışa doğru genişlemek ve içe doğru daralmak yerine üstten içe doğru hareket etmek ve gizlenirken aşağı doğru bırakmak için nasıl değiştirebileceğiniz aşağıda açıklanmıştır.
import { setDefaultAnimation } from "@shoelace-style/shoelace/dist/utilities/animation-registry";
setDefaultAnimation("dialog.show", {
keyframes: [
{ opacity: 0, transform: "translate3d(0px, -20px, 0px)" },
{ opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
],
options: { duration: 250, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});
setDefaultAnimation("dialog.hide", {
keyframes: [
{ opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
{ opacity: 0, transform: "translate3d(0px, 20px, 0px)" },
],
options: { duration: 200, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});Bu kod şurada App.svelte dosya. Orijinal, varsayılan animasyonu görmek için yorum yapın.
Tamamlayan
Shoelace, Web Bileşenleri ile oluşturulmuş inanılmaz derecede iddialı bir bileşen kitaplığıdır. Web Bileşenleri çerçeveden bağımsız oldukları için her projede, her çerçeveyle kullanılabilirler. Hem şaşırtıcı performans özelliklerine hem de kullanım kolaylığına sahip yeni çerçevelerin ortaya çıkmaya başlamasıyla, herhangi bir çerçeveye bağlı olmayan kaliteli kullanıcı deneyimi widget'larını kullanma yeteneği hiç bu kadar ilgi çekici olmamıştı.
