lion
0.17.2
Situs Web · Dasar-dasar · Panduan · Komponen · Blog
Lion adalah seperangkat Komponen Web yang berkinerja tinggi, mudah diakses, dan fleksibel.!
Mereka menyediakan lapisan label putih yang tidak beropini dan dapat diperluas ke lapisan komponen Anda sendiri.
Kinerja Tinggi: Berfokus pada kinerja luar biasa di semua browser yang relevan dengan jumlah ketergantungan minimal.
Aksesibilitas: Ditujukan untuk memenuhi standar WCAG 2.2 AA untuk menciptakan komponen yang dapat diakses oleh semua orang.
Fleksibilitas: Memberikan solusi melalui Komponen Web dan kelas JavaScript yang dapat digunakan, diadopsi, dan diperluas untuk memenuhi semua kebutuhan.
Kode Modern: Lion didistribusikan sebagai modul es murni.
Mengekspos fungsi/kelas dan Komponen Web: Mengirimkan fungsionalitas dalam bentuk yang paling sesuai.
Catatan: Contoh demo kami mungkin terlihat sederhana dan tidak terlalu bergaya. Ini disengaja. Mereka dirancang untuk menjadi dasar sehingga Anda dapat dengan mudah menambahkan gaya Anda sendiri agar sesuai dengan desain yang Anda inginkan, tanpa berurusan dengan gaya yang sudah ada.
Jelajahi Panduan Singa ▶
npm saya @lion/ui
Ini adalah kasus penggunaan utama lion . Untuk mengimpor kelas komponen, dan memperluasnya untuk komponen sistem desain Anda sendiri.
import { css } dari 'lit';import { LionInput } dari '@lion/ui/input.js';class MyInput extends LionInput {
static get style() {return [ super.styles, css` /* gaya Anda di sini */ `,];
}}customElements.define('input-saya',Input Saya); Ada beberapa "sistem" di Lion yang memiliki API JavaScript. Contohnya adalah localize , overlays , ajax , dll.
<skrip tipe="modul">
impor { ajax } dari '@lion/ui/ajax.js';
ajax.fetch('data.json').then(response => respon.json()).then(data => { // melakukan sesuatu dengan data});</script>Anda juga dapat menggunakan elemen singa secara langsung, meskipun hal ini mungkin bukan kasus penggunaan yang umum.
<skrip tipe="modul"> impor '@lion/ui/define/lion-input.js';</script><lion-input name="firstName"></lion-input>
Jika Anda mengalami masalah dengan salah satu paket yang kami tawarkan, silakan buka masalah bug baru. Pastikan untuk menyertakan deskripsi perilaku yang diharapkan dan saat ini - menambahkan reproduksi tambahan selalu membantu.
Jika Anda memiliki ide tentang bagaimana kami dapat meningkatkannya, silakan periksa diskusi kami untuk melihat apakah ada ide atau permintaan fitur serupa. Jika tidak ada, silakan mulai permintaan fitur Anda sebagai topik diskusi baru. Tambahkan judul [Feature Request] My awesome feature dan deskripsi tentang apa yang Anda harapkan dari peningkatan dan kasus penggunaannya.
| Nama | versi | keterangan |
|---|---|---|
| @singa/ui | Seperangkat komponen | |
| @lion/ajax | Pembungkus kecil di sekitar pengambilan | |
| Manajer tunggal | Manajer singleton menyediakan cara untuk memastikan instance singleton yang dimuat dari beberapa lokasi file tetap menjadi singleton. Terutama berguna jika dua versi utama dari sebuah paket dengan singleton digunakan. | |
| Plugin Babel memperluas dokumen | Sebuah plugin yang menulis ulang impor dan templat sesuai dengan konfigurasi. Hal ini memungkinkan penggunaan kembali dokumentasi yang ada dari paket sumber sambil tetap menggunakan kode ekstensi Anda. | |
| Analisis takdir | Providence adalah 'Mata Yang Melihat Semua' yang menghasilkan statistik penggunaan dengan menganalisis kode. Ini mengukur efektivitas dan popularitas perangkat lunak Anda. Hanya dengan beberapa perintah, Anda dapat mengukur dampak (penghentian) perubahan, menjadikan proses rilis Anda lebih stabil dan dapat diprediksi. | |
| Publikasikan dokumen | Alat yang menyalin dan memproses dokumentasi Anda (dalam monorepo) sehingga dapat dipublikasikan/dikirimkan bersama paket Anda. | |
| Catatan diperpanjang | Sebuah plugin untuk komentar untuk memperluas penurunan harga dengan mengimpor dari file sumber. | |
| Prasetel roket memperluas dokumen singa | Saat memelihara lapisan ekstensi singa Anda sendiri, kemungkinan besar Anda ingin menyimpan dokumentasi serupa. Menyalin dan menulis ulang file penurunan harga berfungsi, tetapi setiap kali ada perubahan, Anda perlu menyalin dan menulis ulang lagi. Untuk melakukan ini secara otomatis Anda dapat menggunakan preset ini untuk roket. |
Lion Web Components bertujuan untuk menjadi yang terdepan di masa depan dan menggunakan teknologi yang telah terbukti dan didukung dengan baik. Tumpukan yang kita pilih harus mencerminkan hal ini.
menyala
npm
Buka Komponen Web
Jaringan Modern
Moka
Chai
ESLint
lebih cantik
modul ES
Banyak sekali ujian
Kita tahu dari pengalaman bahwa membuat komponen UI berkualitas tinggi dan mudah diakses itu sulit dan memakan waktu: dibutuhkan banyak iterasi, banyak waktu pengembangan, dan banyak pengujian untuk mendapatkan komponen generik yang berfungsi di setiap konteks, mendukung banyak kasus edge, dan dapat diakses di semua pembaca layar yang relevan.
Lion bertujuan untuk melakukan pekerjaan berat untuk Anda. Ini berarti Anda hanya perlu menerapkan Sistem Desain Anda sendiri: dengan memberikan gaya, mengonfigurasi komponen, dan menambahkan serangkaian logika khusus minimal di atasnya.
Lihat pedoman pengkodean kami untuk informasi lebih rinci.
Harap diperhatikan: Proyek ini menggunakan Npm Workspaces. Jika Anda ingin menjalankan semua demo secara lokal, Anda harus mendapatkan setidaknya npm 7+ dan menginstal semua dependensi dengan menjalankan npm install .
Lion Web Components akan bagus jika kontribusinya. Baca panduan kontribusi kami dan jangan ragu untuk meningkatkan/meningkatkan Lion. Kami menutup permintaan fitur saat kami tidak mengerjakannya.
Jangan ragu untuk membuat masalah github untuk masukan atau pertanyaan apa pun yang mungkin Anda miliki.
