Memperkenalkan Shoelace, perpustakaan UX berasaskan komponen bebas kerangka

Artikel ini memperkenalkan Shoelace, perpustakaan komponen yang dicipta oleh Cory Laviska, tetapi ia unik. Ia mentakrifkan semua komponen UX standard: tag, kotak modal, akordion, autocomplete, dan banyak lagi. Komponen ini keluar dari kotak, cantik, mudah digunakan, dan sepenuhnya disesuaikan. Tetapi ia tidak membuat komponen ini menggunakan rangka kerja seperti React, Solid, atau Svelte, tetapi menggunakan komponen web;

Penyediaan

Komponen web hebat, tetapi masih terdapat beberapa isu kecil untuk memberi perhatian pada masa ini.

React

Saya telah berkata sebelum ini bahawa mereka boleh digunakan dalam mana -mana rangka kerja JavaScript, tetapi saya juga menulis sebelum sokongan React untuk komponen web kini miskin. Untuk menyelesaikan masalah ini, Shoelace mencipta pembalut khusus untuk React.

Satu lagi pilihan yang saya suka secara peribadi adalah untuk membuat komponen React Lightweight yang menerima nama tag komponen web dan semua sifatnya, dan kemudian berurusan dengan kekurangan React. Saya membincangkan pilihan ini dalam jawatan terdahulu. Saya suka skim ini kerana ia direka untuk dikeluarkan. Cawangan eksperimen React telah menyelesaikan masalah interoperabilitas komponen web sehingga setelah diterbitkan, mana -mana komponen interoperabilitas komponen web ringan yang digunakan dapat dicari dan dikeluarkan, meninggalkan penggunaan komponen web langsung tanpa sebarang pembalut React.

Rendering Server-Side (SSR)

Sehingga penulisan ini, sokongan untuk SSR juga miskin. Secara teori, terdapat teknik yang dipanggil Declarative Shadow Dom (DSD) yang boleh melaksanakan SSR. Tetapi sokongan penyemak imbas adalah terhad, dan DSD sebenarnya memerlukan

sokongan pelayan untuk berfungsi dengan betul, bermakna seterusnya, remix, atau mana -mana alat lain yang anda gunakan pada pelayan akan memerlukan beberapa kuasa pemprosesan khas.

iaitu, ada cara lain untuk membuat komponen web "berfungsi dengan betul" dengan aplikasi web yang menggunakan alat seperti seterusnya untuk SSR. Singkatnya, skrip yang mendaftarkan komponen web perlu dijalankan dalam skrip menyekat sebelum menguraikan tag. Tetapi ini akan menjadi subjek jawatan lain. Sudah tentu, jika anda membina apa -apa jenis spa yang diberikan pelanggan, ini bukan masalah. Inilah yang akan kita gunakan dalam siaran ini.

Mula

Oleh kerana saya mahu siaran ini memberi tumpuan kepada Shoelace dan ciri -ciri komponen webnya, saya akan menggunakan Svelte untuk segala -galanya. Saya juga akan menggunakan projek StackBlitz ini untuk demonstrasi. Kami akan membina langkah demo ini dengan langkah bersama, tetapi anda boleh membuka REPT pada bila -bila masa untuk melihat hasil akhir.

Saya akan menunjukkan kepada anda cara menggunakan Shoelace dan, lebih penting lagi, bagaimana untuk menyesuaikannya. Kami akan membincangkan Shadow Dom dan gaya luaran yang mereka blok (dan gaya yang tidak disekat). Kami juga akan membincangkan pemilih CSS

- yang mungkin baru kepada anda - kami juga akan melihat bagaimana Shoelace membolehkan kami menimpa dan menyesuaikan pelbagai animasinya.

Jika anda mendapati diri anda menikmati kasut selepas membaca artikel ini dan ingin mencubanya dalam projek React anda, cadangan saya adalah menggunakan pembungkus yang disebutkan dalam pengenalan saya. Ini akan membolehkan anda menggunakan mana -mana komponen kasut dan anda boleh mengeluarkannya sepenuhnya apabila React melepaskan komponen web yang sudah ada (cari dalam versi 19).

Pengenalan Shoelace

Shoelace mempunyai arahan pemasangan yang terperinci. Cara paling mudah ialah menambah tag <script></script> dan <link> ke dokumen HTML anda, dan itu sahaja. Walau bagaimanapun, untuk sebarang aplikasi pengeluaran, anda mungkin hanya mahu mengimport apa yang anda mahukan, dan terdapat juga arahan yang sewajarnya.

Selepas memasang Shoelace, mari buat komponen svelte untuk menjadikan beberapa kandungan, dan kemudian pergi melalui langkah -langkah menyesuaikan sepenuhnya. Untuk memilih beberapa kandungan yang lebih kompleks, saya menggunakan tag dan dialog (sering dipanggil kotak modal) komponen. Berikut adalah beberapa tag yang kebanyakannya berasal dari dokumentasi:

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

Ini akan membentangkan beberapa label yang cantik dan bergaya. Tanda -tag aktiviti yang menggariskan dengan baik dan slaid dari satu tag aktiviti ke seterusnya.

Saya tidak akan membuang masa anda memperincikan setiap API yang telah didokumenkan secara terperinci di laman web Shoelace. Sebaliknya, mari kita lihat cara terbaik untuk berinteraksi dan menyesuaikan sepenuhnya komponen web ini.

Berinteraksi dengan API: Kaedah dan Peristiwa

Kaedah panggilan dan peristiwa langganan pada komponen web mungkin sedikit berbeza dari kerangka biasa yang anda gunakan, tetapi ini tidak terlalu rumit. Mari lihat bagaimana melakukannya.

tags

Komponen tag

(<sl-tab-group></sl-tab-group>) mempunyai kaedah show yang memaparkan tag tertentu secara manual. Untuk memanggilnya, kita perlu mengakses elemen DOM yang mendasari tag. Dalam Svelte, ini bermakna menggunakan bind:this. Dalam React, ia akan menjadi ref. dll. Oleh kerana kita menggunakan Svelte, mari kita mengisytiharkan pemboleh ubah contoh tag:

let tabs;

... dan mengikatnya:

<sl-tab-group bind:this="{tabs}"></sl-tab-group>

sekarang kita boleh menambah butang untuk memanggilnya:

<button on:click="{()"> tabs.show("custom")}>Show custom</button>

Begitu juga dengan peristiwa

. Apabila tag baru dipaparkan, acara sl-tab-show dicetuskan. Kita boleh menggunakan tabs untuk pembolehubah addEventListener kita, atau kita boleh menggunakan pintasan Svelte on:event-name.

<sl-tab-group bind:this="{tabs}" on:sl-tab-show="{e"> console.log(e)}></sl-tab-group>

ini berfungsi dan log objek acara apabila tag yang berbeza dipaparkan.

Biasanya kami memberikan tag dan biarkan pengguna mengklik di antara mereka, jadi kerja ini biasanya tidak diperlukan, tetapi jika anda memerlukannya, ada di sana. Sekarang mari kita buat komponen dialog interaktif.

Dialog

Komponen dialog

(<sl-dialog></sl-dialog>) menerima atribut open yang mengawal sama ada kotak dialog ... dibuka. Mari kita nyatakan dalam komponen svelte kita:

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

Ia juga mempunyai acara sl-hide untuk menyembunyikan kotak dialog. Mari lulus harta open kami dan mengikat ke acara tersembunyi supaya apabila pengguna mengklik untuk menutupnya di luar kandungan dialog, kami boleh menetapkannya semula. Mari tambahkan pengendali klik ke butang Tutup untuk menetapkan harta open kami kepada FALSE, yang juga akan menutup dialog.

let tabs;

Akhirnya, mari kita sambungkan butang dialog terbuka kami:

<sl-tab-group bind:this="{tabs}"></sl-tab-group>

itu sahaja. Interaksi dengan API perpustakaan komponen lebih kurang langsung. Jika artikel ini hanya melakukan ini, ia akan menjadi agak membosankan.

Tetapi Shoelace - dibina dengan komponen web - bermakna sesuatu, terutama gaya, berfungsi sedikit berbeza daripada apa yang kita gunakan.

Sesuaikan semua gaya!

Pada masa penulisan, Shoelace masih dalam beta, dan pencipta sedang mempertimbangkan untuk mengubah beberapa gaya lalai, dan mungkin juga mengeluarkan beberapa gaya lalai sama sekali supaya mereka tidak menulis semula gaya aplikasi tuan rumah lagi. Konsep -konsep yang akan kami perkenalkan adalah relevan, tetapi jangan terkejut jika beberapa butiran kasut yang saya nyatakan berbeza apabila anda menggunakannya.

Gaya lalai Shoelace adalah baik, tetapi aplikasi web kami juga mungkin mempunyai reka bentuk sendiri dan berharap komponen UX kami sepadan dengannya. Mari lihat bagaimana untuk melakukan ini di dunia komponen web.

Kami tidak cuba untuk memperbaiki apa -apa. Pencipta Shoelace lebih baik pada reka bentuk daripada saya. Sebaliknya, kami hanya melihat cara menukar barangan supaya anda boleh menyesuaikan diri dengan aplikasi web anda sendiri. paparan cepat bayangan dom

Lihat salah satu tajuk tag di devtools anda;

elemen tag kami mencipta bekas div dengan

dan

kelas dan A

, sementara juga memaparkan teks yang kami masukkan untuk tag itu. Tetapi sila ambil perhatian bahawa ia terletak di dalam

Shadow Root .tab. Ini membolehkan penulis komponen web menambah tag mereka sendiri ke komponen web, sementara juga menyediakan tempat untuk meletakkan apa yang kami sediakan. Perhatikan unsur -unsur .tab--active? Ini pada dasarnya bermaksud "meletakkan apa sahaja yang digunakan oleh pengguna antara tag komponen web di tabindex di sini ". <slot></slot> jadi komponen mencipta akar bayangan, menambah sesuatu kepadanya untuk menjadikan tajuk label gaya yang bagus serta pemegang tempat () di mana ia menjadikan kandungan kami.

Gaya Pembungkusan <sl-tab></sl-tab> <slot></slot> Masalah klasik dan lebih mengecewakan dalam pembangunan web selalu menjadi gaya yang meleleh di mana kita tidak mahu mereka muncul. Anda mungkin bimbang bahawa sebarang peraturan gaya dalam aplikasi yang menentukan sesuatu seperti

akan mengganggu tag ini. Ternyata ini bukan masalah; Gaya di luar akar bayangan tidak menjejaskan apa yang ada di dalam akar bayang -bayang (dengan beberapa pengecualian, yang akan kita bincangkan kemudian), dan sebaliknya.

Pengecualian ini adalah gaya yang diwarisi. Sudah tentu, anda tidak perlu memohon gaya font-family untuk setiap elemen dalam aplikasi web anda. Sebaliknya, anda boleh menentukan :root atau html terakhir kali dan biarkan ia mewarisi segala -galanya di bawahnya. Warisan ini sebenarnya akan menembusi akar bayangan. font-family

sifat adat CSS (biasanya dipanggil "pembolehubah CSS") adalah pengecualian yang berkaitan. Root Shadow pasti boleh membaca sifat CSS yang ditakrifkan di luar Shadow Root;

pemilih ::part

bagaimana dengan gaya yang tidak diwarisi? Jika kita mahu menyesuaikan sesuatu di dalam akar bayangan (seperti

yang tidak mewarisi), adakah kita tidak bernasib baik? Ternyata kita tidak. Semak imej elemen label di atas dan akar bayangannya sekali lagi. Perhatikan atribut pada div? Ini membolehkan anda mencari dan gaya elemen dari luar akar bayangan menggunakan pemilih . Kami akan memperkenalkan contoh langkah demi langkah. cursor part Mengatasi Gaya Shoelace ::part

mari kita lihat aplikasi praktikal kaedah ini. Setakat ini, banyak gaya kasut (termasuk fon) menerima nilai lalai dari CSS Custom Properties. Untuk menyelaraskan fon ini dengan gaya aplikasi, mengatasi sifat tersuai yang berkaitan. Lihat dokumentasi yang menggunakan Shoelace pembolehubah CSS, atau anda hanya boleh menyemak gaya dalam mana -mana elemen yang diberikan dalam DevTools.

mewarisi gaya melalui bayang -bayang akar

Buka fail app.css dalam direktori SRC projek Stackblitz. Dalam bahagian di bahagian bawah, anda harus melihat pernyataan

. Oleh kerana atribut

diwarisi, cuba tetapkan nilai baru, seperti

. Selepas menyimpan, semua kandungan (termasuk tajuk tag yang ditakrifkan dalam Shadow Root) akan diselaraskan dengan sewajarnya.

:root Overwrite Shoelace CSS Variables letter-spacing: normal; Komponen letter-spacing 2px membaca

CSS Custom Property untuk garis bawah tag aktif. Kita boleh menggunakan beberapa CSS asas untuk mengatasinya:

itu sahaja, kita kini mempunyai penunjuk hijau! <sl-tab-group></sl-tab-group> --indicator-color bahagian pertanyaan

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

Dalam versi kasut yang saya gunakan sekarang (2.0.0-beta.83), mana-mana tag tidak diselaraskan mempunyai kursor penunjuk. Mari kita ubah ke kursor lalai untuk tag aktif (dipilih). Kami telah melihat elemen

tambah atribut

pada bekas tajuk tag. Di samping itu, tag yang dipilih sekarang menerima atribut

. Mari gunakan fakta ini untuk mencari tag aktif dan tukar kursor:

<sl-tab></sl-tab> itu sahaja! part="base"

Animasi Custom

Untuk menambah icing pada kek, mari kita lihat bagaimana Shoelace membolehkan kita menyesuaikan animasi. Shoelace menggunakan API Animasi Web dan mendedahkan API setDefaultAnimation untuk mengawal bagaimana unsur -unsur yang berbeza menghidupkan pelbagai interaksi mereka. Lihat dokumentasi untuk maklumat lanjut, tetapi sebagai contoh, inilah cara menukar animasi dialog lalai Shoelace dari mengembangkan dan mengecut ke dalam untuk memasuki dari animasi teratas dan bergerak ke bawah apabila tersembunyi.

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

Kod ini terletak dalam fail app.svelte. Komennya untuk melihat animasi lalai asal.

Ringkasan

Shoelace adalah perpustakaan komponen yang sangat bercita -cita yang dibina menggunakan komponen web. Oleh kerana komponen web bebas kerangka, mereka boleh digunakan dengan rangka kerja untuk sebarang projek. Oleh kerana rangka kerja baru mula menunjukkan ciri -ciri prestasi yang menakjubkan dan kemudahan penggunaan, dapat menggunakan komponen pengalaman pengguna yang berkualiti yang tidak terikat dengan kerangka kerja sama ada lebih menarik dari sebelumnya.

Atas ialah kandungan terperinci Memperkenalkan Shoelace, perpustakaan UX berasaskan komponen bebas kerangka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!