weightless
1.0.0
Proyek ini telah mencapai akhir pengembangannya. Jangan ragu untuk menelusuri kode.
Komponen web berkualitas tinggi dengan jejak kecil
Terima kasih banyak telah menunjukkan minat pada proyek ini! Jika Anda ingin membantu kami memberi makan octocat kami, Anda pasti harus menjadi bintang. Komponen web ini dibangun untuk digunakan. Mereka ringan, memiliki API sederhana dan mudah diperluas dan ditulis. Buka di sini untuk melihat demo https://weightless.dev/elements.
Buka di sini untuk mencoba demo.
$ npm i weightless
Jika Anda ingin memulai dengan sangat cepat, Anda dapat menggunakan CLI.
$ npm init web-config new my-project --lit
Jika Anda lebih suka menggunakan bundel umd , Anda dapat mengimpor https://unpkg.com/weightless/umd/weightless.min.js . Perlu diingat bahwa ini mengimpor semua elemen, sehingga Anda disarankan hanya menggunakannya untuk tujuan pengujian.
< script src =" https://unpkg.com/weightless/umd/weightless.min.js " > </ script > | Nama | Menandai | Keterangan | Dokumentasi | Demo |
|---|---|---|---|---|
| Latar belakang | wl-backdrop | Lapisan gelap untuk digunakan di balik elemen overlay. | Dokumentasi | Demo |
| Spanduk | wl-banner | Tampilkan pesan non-intruptive dan tindakan opsional terkait. | Dokumentasi | Demo |
| Tombol | wl-button | Izinkan pengguna untuk mengambil tindakan, dan membuat pilihan, dengan satu keran. | Dokumentasi | Demo |
| Kartu | wl-card | Konten dan tindakan terkait grup. | Dokumentasi | Demo |
| Kotak centang | wl-checkbox | Menghidupkan atau mematikan opsi. | Dokumentasi | Demo |
| Dialog | wl-dialog | Pesan yang sangat interupsi. | Dokumentasi | Demo |
| Pembagi | wl-divider | Garis tipis yang mengelompokkan konten dalam daftar dan tata letak. | Dokumentasi | Demo |
| Ekspansi | wl-expansion | Berikan tampilan ringkasan yang dapat diperluas. | Dokumentasi | Demo |
| Ikon | wl-icon | Simbol untuk tindakan dan item umum. | Dokumentasi | Demo |
| Label | wl-label | Membuat elemen formulir lebih mudah diakses. | Dokumentasi | Demo |
| Daftar item | wl-list-item | Tampilkan item dalam daftar. | Dokumentasi | Demo |
| Nav | wl-nav | Berikan akses ke tujuan di aplikasi Anda. | Dokumentasi | Demo |
| Popover | wl-popover | Elemen berlabuh kontekstual | Dokumentasi | Demo |
| Kartu Popover | wl-popover-card | Beri Popovers bakat kontekstual. | Dokumentasi | Demo |
| Bilah kemajuan | wl-progress-bar | Mengisi bar dari 0% hingga 100%. | Dokumentasi | Demo |
| Pemintal Kemajuan | wl-progress-spinner | Mengisi lingkaran dari 0% hingga 100%. | Dokumentasi | Demo |
| Radio | wl-radio | Pilih satu opsi dari satu set. | Dokumentasi | Demo |
| Riak | wl-ripple | Menunjukkan tindakan sentuh. | Dokumentasi | Demo |
| Memilih | wl-select | Pilih satu atau lebih nilai dari satu set opsi. | Dokumentasi | Demo |
| Slider | wl-slider | Membuat pilihan dari berbagai nilai. | Dokumentasi | Demo |
| Snackbar | wl-snackbar | Berikan pesan singkat di bagian bawah layar. | Dokumentasi | Demo |
| Mengalihkan | wl-switch | Menghidupkan atau mematikan opsi. | Dokumentasi | Demo |
| Tab | wl-tab | Mengatur navigasi antar kelompok konten. | Dokumentasi | Demo |
| Grup tab | wl-tab-group | Mengatur navigasi antar kelompok konten. | Dokumentasi | Demo |
| Teks | wl-text | Mengelompokkan teks ke dalam paragraf. | Dokumentasi | Demo |
| TexTarea | wl-textarea | Bidang teks multilin. | Dokumentasi | Demo |
| Textfield | wl-textfield | Bidang teks tunggal. | Dokumentasi | Demo |
| Judul | wl-title | Tunjukkan awal bagian baru. | Dokumentasi | Demo |
| Tooltip | wl-tooltip | Teks terkait konteks informatif. | Dokumentasi | Demo |
Ada banyak hal menarik di peta jalan. Sampai v1.0.0 Anda dapat mengharapkan API menjadi cukup stabil tetapi refactoring mungkin masih terjadi dan mematahkan kompatibilitas ke belakang. Anda sangat dipersilakan untuk menggunakan perpustakaan, membuat permintaan tarik atau menambahkan masalah.
Anda dipersilakan untuk berkontribusi pada repositori ini! Di bawah ini adalah beberapa instruksi tentang cara mengatur proyek untuk pengembangan.
git clone https://github.com/andreasbm/weightless.git .npm i untuk menginstal semua dependensi.npm run s . Browser harus secara otomatis dibuka di URL yang benar. Jika tidak, Anda dapat membuka browser Anda dan pergi ke http://localhost:1350 .npm run test .npm run lint .npm run docs .Elemen -elemen tersebut ditulis dalam TypeScript dan stylesheet ditulis dalam sass. Semua komponen web menggunakan elemen-lit.
Jika Anda ingin tahu lebih banyak tentang bagaimana Anda dapat membantu, Anda harus memeriksa file yang berkontribusi.md. Semua kontributor akan ditambahkan ke bagian kontributor di bawah ini.
| Andreas Mehlsen | Anda? |
Berlisensi di bawah MIT.
