oruga

Oruga UI seperti ulat, minimal dan fungsional. Ada di tangan Anda mengubahnya menjadi kupu -kupu

(?) =>?

Fitur

Oruga adalah pustaka komponen UI ringan untuk vue.js tanpa ketergantungan. Ini menawarkan satu set komponen yang mudah disesuaikan dan tidak bergantung pada gaya tertentu atau kerangka kerja CSS (seperti bootstrap, bulma, tailwindcss, dll ...). Oleh karena itu, itu tidak menyediakan sistem grid atau utilitas CSS, tetapi Anda dapat mengintegrasikan kerangka kerja CSS yang Anda sukai. Oruga memberi Anda serangkaian komponen fungsional, sehingga Anda hanya dapat fokus pada aspek UI/UX dari aplikasi Anda dan dapat sepenuhnya fleksibel untuk perubahan di masa depan tanpa harus menyentuh garis javascript.

• Kerangka kerja CSS Agnostik : Tidak ada ketergantungan pada kerangka/perpustakaan CSS tertentu tetapi Anda dapat dengan mudah mengintegrasikan komponen dengan salah satunya karena mereka sepenuhnya dapat disesuaikan dengan cara yang berbeda
• Komponen dengan steroid : Sebagian besar komponen bukan pembungkus sederhana dari elemen asli tetapi mereka menambahkan fitur baru dan khusus
• Ringan : Tidak ada ketergantungan internal lainnya dan hanya mengimpor komponen yang Anda butuhkan

Jika Anda memerlukan perpustakaan komponen dan ingin dengan mudah menerapkan gaya khusus Anda, Oruga adalah perpustakaan untuk Anda! ?

Selain itu, jika Anda tidak ingin menata semuanya sendiri, kami telah membuat beberapa tema untuk memberi Anda berbagai gaya siap pakai. ?

Dokumentasi

Jelajahi dokumentasi online di sini.

? Untuk info lebih lanjut tentang kustomisasi komponen, baca dengan cermat bagian "kustomisasi" dalam dokumentasi.

? Untuk melihat Oruga beraksi, buka bagian contoh dalam dokumentasi.

CATATAN: Kode sumber dari contoh dokumentasi dapat ditemukan di direktori examples untuk setiap komponen, berfungsi sebagai demo juga.

Awal yang cepat

? Oruga tersedia untuk Vue.js Versi 3.x

Siapkan Oruga

1. Instal Oruga.

npm install @oruga-ui/oruga-next

2. Impor komponen:

• Untuk memulai dengan cepat, gunakan Oruga untuk mendaftarkan semua komponen:

   import { createApp } from 'vue'
  import Oruga from '@oruga-ui/oruga-next' ;
  
  createApp ( ... ) . use ( Oruga ) ;

• Untuk menggunakan pengocok pohon, baik mendaftar komponen secara manual:

   import { createApp } from 'vue'
  import { OField , OInput } from '@oruga-ui/oruga'
  
  createApp ( ... )
    . use ( OField )
    . use ( OInput )

• atau impor di SFC Anda.

Kustomisasi

Negara adidaya Oruga adalah konfigurasi dan pendekatan agnostik kerangka kerja CSS -nya. Setiap komponen dapat disesuaikan dan dikonfigurasi secara individual dengan mendefinisikan kelas-kelas tertentu menggunakan pendekatan pemetaan kelas. Oleh karena itu, Oruga datang tanpa gaya apa pun secara default. Namun, ada beberapa konfigurasi resmi yang telah ditentukan sebelumnya yang disebut tema, yang dapat Anda sertakan dan memperluas untuk memberikan aplikasi Anda tampilan dan nuansa individu. Dan semua komponen datang dengan kelas yang telah ditentukan secara default.

Harap baca bagian "Kustomisasi" dalam dokumentasi Oruga.

Jika Anda ingin melihat contoh dengan formulir pendaftaran yang sepenuhnya disesuaikan menggunakan Tailwind , Bulma , Bootstrap , Material atau Kerangka Kerja CSS lainnya, lihat contoh resmi Oruga Multiframework (kode sumber yang tersedia di sini) atau jika Anda lebih terbiasa dengan TailWindCSs 2 memberikan demo TailWindCS resmi kami (Kode Sumber di sini)

Menggunakan oruga dengan nuxt

Oruga tidak menyediakan modul Nuxt.js saat ini.

Anda dapat menggunakan sistem plugin nuxt.js menambahkan file (misalnya oruga.js ) di folder plugins Anda yang berisi:

 import Oruga from '@oruga-ui/oruga-next' ;

export default defineNuxtPlugin ( ( nuxtApp ) => {
  nuxtApp . vueApp . use ( Oruga ) ;
} ) ;

Untuk membuat plugin ini tersedia di aplikasi Anda, tambahkan file ini ke array plugins di nuxt.config.js Anda

plugins: [ { src : '~plugins/oruga.js' } ]

Untuk memahami bagaimana plugin bekerja dengan nuxt.js, lihat dokumentasi plugin Nuxtjs.

Lihatlah contoh resmi Nuxtjs + Oruga.

Berkontribusi

Silakan lihat pedoman yang berkontribusi.

Hubungi kami ?

→ Bergabunglah dengan Oruga Discord Server.

Versi

Oruga menggunakan Semantic Versioning 2.0.0 untuk versi paket.

Meskipun masih dalam beta, versi akan mengikuti pola ini: v0.yz , di mana:

• Y : Mayor (Perubahan Breaking)
• Z : minor atau tambalan

Tim inti

Walter Tommasi

Andrea Stagi

Marcel Moravek

Kontributor

Terima kasih kepada semua orang yang terlibat untuk meningkatkan proyek ini, hari demi hari

Daftar Lengkap.

Kredit

Logo Oruga Dirancang oleh Matteo Guadagnini

Gambar Oruga SVG untuk kotak centang dan komponen radio dan aset hari libur yang dibuat oleh Fabrizio Masini

Lisensi

Kode yang dirilis di bawah lisensi MIT.