Ini adalah postingan tentang Tali sepatu, perpustakaan komponen oleh Cory La Viska, tapi dengan twist. Ini mendefinisikan semua komponen UX standar Anda: tab, modals, akordeon, pelengkapan otomatis, dan banyak, lebih banyak lagi. Mereka terlihat cantik di luar kotak, dapat diakses, dan sepenuhnya dapat disesuaikan. Tapi daripada membuat komponen ini di React, atau Solid, atau Svelte, dll., itu membuatnya dengan Komponen Web; ini berarti Anda dapat menggunakannya dengan Apa pun kerangka.
Beberapa hal pendahuluan
Komponen Web sangat bagus, tetapi saat ini ada beberapa halangan kecil yang harus diperhatikan.
Bereaksi
Saya mengatakan mereka bekerja dalam kerangka JavaScript apa pun, tetapi seperti yang telah saya tulis sebelumnya, dukungan React untuk Komponen Web adalah saat ini miskin. Untuk mengatasi ini, Tali Sepatu sebenarnya pembungkus yang dibuat hanya untuk Bereaksi.
Pilihan lain, yang saya pribadi suka, adalah membuat komponen React tipis yang menerima nama tag dari Komponen Web dan semua atribut dan propertinya, kemudian melakukan pekerjaan kotor menangani kekurangan React. Saya berbicara tentang opsi ini di posting sebelumnya. Saya suka solusi ini karena dirancang untuk dihapus. Masalah interoperabilitas Komponen Web saat ini telah diperbaiki di cabang eksperimental React, jadi setelah dikirimkan, komponen tipis apa pun yang dapat dioperasikan Komponen Web yang Anda gunakan dapat dicari, dan dihapus, meninggalkan Anda dengan penggunaan Komponen Web langsung, tanpa pembungkus React apa pun.
Rendering Sisi Server (SSR)
Dukungan untuk RSK juga buruk pada saat penulisan ini. Secara teori, ada sesuatu yang disebut DOM Bayangan Deklaratif (DSD) yang akan mengaktifkan SSR. Tetapi dukungan browser sangat minim, dan bagaimanapun, DSD sebenarnya membutuhkan dukungan server untuk bekerja dengan benar, yang berarti Selanjutnya, Remix, atau apa pun yang Anda gunakan di server harus mampu menangani beberapa penanganan khusus.
Yang mengatakan, ada cara lain untuk mendapatkan Komponen Web untuk bekerja saja
dengan aplikasi web yang SSR dengan sesuatu seperti Berikutnya. Versi singkatnya adalah skrip yang mendaftarkan Komponen Web Anda harus dijalankan dalam skrip pemblokiran sebelum markup Anda diuraikan. Tapi itu topik untuk posting lain.
Tentu saja, jika Anda membangun segala jenis SPA yang diberikan klien, ini bukan masalah. Inilah yang akan kami kerjakan dalam posting ini.
Ayo mulai
Karena saya ingin posting ini fokus pada Tali Sepatu dan sifat Komponen Web-nya, saya akan menggunakan Langsing untuk semuanya. Saya juga akan menggunakan ini Proyek Stackblitz untuk demonstrasi. Kami akan membuat demo ini bersama-sama, langkah demi langkah, tetapi jangan ragu untuk membuka REPL kapan saja untuk melihat hasil akhirnya.
Saya akan menunjukkan cara menggunakan Tali Sepatu, dan yang lebih penting, cara menyesuaikannya. Kita akan berbicara tentang DOM bayangan dan gaya mana yang mereka blokir dari dunia luar (serta gaya mana yang tidak). Kami juga akan berbicara tentang ::part Pemilih CSS — yang mungkin sama sekali baru bagi Anda — dan kita bahkan akan melihat bagaimana Tali Sepatu memungkinkan kita untuk mengganti dan menyesuaikan berbagai animasinya.
Jika Anda menyukai Tali Sepatu setelah membaca posting ini dan ingin mencobanya dalam proyek React, saran saya adalah gunakan pembungkus seperti yang saya sebutkan di pendahuluan. Ini akan memungkinkan Anda untuk menggunakan salah satu komponen Shoelace, dan itu dapat dihapus sama sekali setelah React mengirimkan perbaikan Komponen Web yang sudah mereka miliki (cari di versi 19).
Memperkenalkan Tali Sepatu
Tali sepatu memiliki detail yang cukup instruksi instalasi. Paling sederhana, Anda bisa membuang dan tag ke dalam dokumen HTML Anda, dan hanya itu. Namun, untuk aplikasi produksi apa pun, Anda mungkin ingin mengimpor secara selektif hanya apa yang Anda inginkan, dan ada juga petunjuk untuk itu.
Dengan Shoelace terinstal, mari buat komponen Svelte untuk merender beberapa konten, lalu ikuti langkah-langkah untuk menyesuaikannya sepenuhnya. Untuk memilih sesuatu yang cukup non-sepele, saya menggunakan komponen tab dan dialog (biasanya disebut sebagai modal). Berikut beberapa markup sebagian besar diambil dari dokumen:
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!
Ini membuat beberapa tab yang bagus dan bergaya. Garis bawah pada tab aktif bahkan dianimasikan dengan baik, dan meluncur dari satu tab aktif ke tab berikutnya.
Saya tidak akan membuang waktu Anda untuk menelusuri setiap inci API yang sudah didokumentasikan dengan baik di situs web Shoelace. Sebagai gantinya, mari kita lihat cara terbaik untuk berinteraksi, dan sepenuhnya menyesuaikan Komponen Web ini.
Berinteraksi dengan API: metode dan peristiwa
Memanggil metode dan berlangganan acara di Komponen Web mungkin sedikit berbeda dari yang biasa Anda gunakan dengan kerangka pilihan normal Anda, tetapi itu tidak terlalu rumit. Mari kita lihat bagaimana.
Tabs
Komponen tab () mempunyai sebuah show metode, yang secara manual menampilkan tab tertentu. Untuk memanggil ini, kita perlu mendapatkan akses ke elemen DOM yang mendasari tab kita. Di Svelte, itu berarti menggunakan bind:this. Di React, itu akan menjadi ref. Dan seterusnya. Karena kita menggunakan Svelte, mari kita mendeklarasikan variabel untuk tabs contoh:
let tabs;
…dan mengikatnya:
Sekarang kita dapat menambahkan tombol untuk menyebutnya:
Ini adalah ide yang sama untuk acara. Ada sl-tab-show peristiwa yang menyala saat tab baru ditampilkan. Kita bisa menggunakan addEventListener pada kami tabs variabel, atau kita bisa menggunakan Svelte's on:event-name jalan pintas.
console.log(e)}>Itu berfungsi dan mencatat objek acara saat Anda menampilkan tab yang berbeda.
Biasanya kami merender tab dan membiarkan pengguna mengklik di antara mereka, jadi pekerjaan ini biasanya bahkan tidak diperlukan, tetapi ada di sana jika Anda membutuhkannya. Sekarang mari kita buat komponen dialog interaktif.
Dialog
Komponen dialog () mengambil open prop yang mengontrol apakah dialog tersebut… terbuka. Mari kita deklarasikan di komponen Svelte kita:
let tabs;
let open = false;
Ini juga memiliki sl-hide acara ketika dialog disembunyikan. Mari kita lewati open menopang dan mengikat ke hide acara sehingga kami dapat mengatur ulang ketika pengguna mengklik di luar konten dialog untuk menutupnya. Dan mari tambahkan pengendali klik ke tombol tutup itu untuk mengatur open mendukung false, yang juga akan menutup dialog.
open = false}>
Hello World!
Terakhir, mari kita pasang tombol dialog terbuka kita:
Dan itu. Berinteraksi dengan API library komponen kurang lebih mudah. Jika hanya itu yang dilakukan posting ini, itu akan sangat membosankan.
Tapi Tali Sepatu — dibangun dengan Komponen Web — berarti bahwa beberapa hal, terutama gaya, akan bekerja sedikit berbeda dari biasanya.
Sesuaikan semua gaya!
Pada tulisan ini, Shoelace masih dalam versi beta dan pembuatnya sedang mempertimbangkan untuk mengubah beberapa gaya default, bahkan mungkin menghapus beberapa default sama sekali sehingga tidak lagi menimpa gaya aplikasi host Anda. Konsep yang akan kita bahas juga relevan, tetapi jangan kaget jika beberapa spesifikasi Tali Sepatu yang saya sebutkan berbeda saat Anda menggunakannya.
Sebagus gaya default Tali Sepatu, kami mungkin memiliki desain kami sendiri di aplikasi web kami, dan kami ingin komponen UX kami cocok. Mari kita lihat bagaimana kita melakukannya di dunia Komponen Web.
Kami tidak akan mencoba untuk benar-benar memperbaiki apa pun. Pencipta Tali Sepatu adalah desainer yang jauh lebih baik daripada saya. Sebagai gantinya, kita akan melihat bagaimana caranya perubahan berbagai hal, sehingga Anda dapat beradaptasi dengan aplikasi web Anda sendiri.
Tur singkat ke Shadow DOM
Intip salah satu header tab tersebut di DevTools Anda; seharusnya terlihat seperti ini:
Elemen tab kami telah membuat div wadah dengan .tab dan .tab--active kelas, dan tabindex, sambil juga menampilkan teks yang kita masukkan untuk tab itu. Tapi perhatikan bahwa itu duduk di dalam akar bayangan. Ini memungkinkan penulis Komponen Web untuk menambahkan markup mereka sendiri ke Komponen Web sambil juga menyediakan tempat untuk konten we menyediakan. Perhatikan elemen? Itu pada dasarnya berarti “meletakkan konten apa pun yang diberikan pengguna antara tag Komponen Web di sini. "
Sehingga component membuat root bayangan, menambahkan beberapa konten ke dalamnya untuk merender tajuk tab yang ditata dengan baik bersama dengan placeholder () yang membuat konten kita di dalam.
Gaya yang dienkapsulasi
Salah satu masalah klasik yang lebih membuat frustrasi dalam pengembangan web adalah gaya Cascading ke tempat-tempat di mana kita tidak menginginkannya. Anda mungkin khawatir bahwa aturan gaya apa pun di aplikasi kami yang menentukan sesuatu seperti div.tab akan mengganggu tab ini. Ternyata ini bukan masalah; akar bayangan merangkum gaya. Gaya dari luar akar bayangan tidak mempengaruhi apa yang ada di dalam akar bayangan (dengan beberapa pengecualian yang akan kita bicarakan), dan sebaliknya.
Pengecualian untuk ini adalah gaya yang dapat diwariskan. Anda, tentu saja, tidak perlu mendaftar font-family gaya untuk setiap elemen di aplikasi web Anda. Sebagai gantinya, Anda dapat menentukan font-family sekali, pada :root or html dan mewarisinya di mana-mana di bawahnya. Warisan ini sebenarnya akan menembus akar bayangan juga.
Properti khusus CSS (sering disebut "variabel css") adalah pengecualian terkait. Akar bayangan benar-benar dapat membaca properti CSS yang ditentukan di luar akar bayangan; ini akan menjadi relevan dalam beberapa saat.
Grafik ::part pemilih
Bagaimana dengan gaya itu? tidak mewarisi. Bagaimana jika kita ingin menyesuaikan sesuatu seperti cursor, yang tidak mewarisi, pada sesuatu di dalam akar bayangan. Apakah kita kurang beruntung? Ternyata kita tidak. Perhatikan lagi gambar elemen tab di atas dan akar bayangannya. Perhatikan part atribut pada div? Itu memungkinkan Anda untuk menargetkan dan menata elemen itu dari luar akar bayangan menggunakan ::part pemilih. Kami akan berjalan melalui contoh sedikit.
Mengganti gaya Tali Sepatu
Mari kita lihat masing-masing pendekatan ini dalam tindakan. Seperti yang sekarang, banyak gaya Tali Sepatu, termasuk font, menerima nilai default dari properti kustom CSS. Untuk menyelaraskan font-font tersebut dengan gaya aplikasi Anda, timpa properti khusus yang dimaksud. Melihat dokumen untuk info tentang variabel CSS yang digunakan Shoelace, atau Anda cukup memeriksa gaya di elemen tertentu di DevTools.
Mewarisi gaya melalui akar bayangan
Buka app.css file di src direktori dari Proyek StackBlitz. di :root bagian di bagian bawah, Anda akan melihat letter-spacing: normal; pernyataan. Sejak letter-spacing properti dapat diwariskan, coba atur nilai baru, seperti 2px. Saat disimpan, semua konten, termasuk tajuk tab yang ditentukan di root bayangan, akan disesuaikan.
Menimpa variabel CSS Tali Sepatu
Grafik komponen membaca --indicator-color Properti kustom CSS untuk garis bawah tab aktif. Kita dapat menimpa ini dengan beberapa CSS dasar:
sl-tab-group {
--indicator-color: green;
}Dan begitu saja, kami sekarang memiliki indikator hijau!
Menanyakan bagian
Dalam versi Tali Sepatu yang saya gunakan sekarang (2.0.0-beta.83), semua tab yang tidak dinonaktifkan memiliki pointer kursor. Mari kita ubah itu menjadi kursor default untuk tab aktif (dipilih). Kami sudah melihat bahwa elemen menambahkan a part="base" atribut pada wadah untuk tajuk tab. Juga, tab yang dipilih saat ini menerima active atribut. Mari gunakan fakta ini untuk menargetkan tab aktif, dan ubah kursor:
sl-tab[active]::part(base) {
cursor: default;
}Dan itu!
Menyesuaikan animasi
Untuk beberapa lapisan gula pada kue metaforis, mari kita lihat bagaimana Tali Sepatu memungkinkan kita untuk menyesuaikan animasi. Tali sepatu menggunakan API Animasi Web, dan mengekspos a setDefaultAnimation API untuk mengontrol bagaimana elemen yang berbeda menganimasikan berbagai interaksinya. Lihat dokumen untuk spesifiknya, tetapi sebagai contoh, inilah cara Anda dapat mengubah animasi dialog default Shoelace dari meluas ke luar, dan menyusut ke dalam, menjadi bernyawa dari atas, dan turun ke bawah saat bersembunyi.
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)" },
});Kode itu ada di App.svelte mengajukan. Beri komentar untuk melihat animasi default asli.
Membungkus
Shoelace adalah pustaka komponen yang sangat ambisius yang dibuat dengan Komponen Web. Karena Komponen Web tidak bergantung pada kerangka kerja, mereka dapat digunakan dalam proyek apa pun, dengan kerangka kerja apa pun. Dengan kerangka kerja baru yang mulai keluar dengan karakteristik kinerja yang luar biasa, dan juga kemudahan penggunaan, kemampuan untuk menggunakan widget pengalaman pengguna berkualitas yang tidak terikat pada satu kerangka kerja tidak pernah lebih menarik.
