oruga

Oruga UI เป็นเหมือนหนอนผีเสื้อน้อยที่สุดและยังใช้งานได้ มันอยู่ในมือของคุณเปลี่ยนเป็นผีเสื้อ

-

คุณสมบัติ

Oruga เป็นไลบรารีส่วนประกอบ UI ที่มีน้ำหนักเบาสำหรับ vue.js โดยไม่ต้องพึ่งพาใด ๆ มันมีชุดของส่วนประกอบที่ปรับแต่งได้ง่ายและไม่ได้ขึ้นอยู่กับสไตล์เฉพาะหรือกรอบ CSS (เช่น bootstrap, bulma, tailwindcss, ฯลฯ ... ) ดังนั้นจึงไม่ได้ให้ระบบกริดหรือยูทิลิตี้ CSS แต่คุณสามารถรวมกรอบ CSS ใด ๆ ที่คุณชอบ Oruga ให้ชุดส่วนประกอบที่ใช้งานได้ดังนั้นคุณสามารถมุ่งเน้นเฉพาะด้าน UI/UX ของแอปพลิเคชันของคุณและสามารถยืดหยุ่นได้ทั้งหมดสำหรับการเปลี่ยนแปลงในอนาคตโดยไม่ต้องสัมผัสกับ JavaScript

• CSS Framework Agnostic : ไม่มีการพึ่งพาเฟรมเวิร์ก/ห้องสมุด CSS เฉพาะ แต่คุณสามารถรวมส่วนประกอบกับหนึ่งในนั้นได้อย่างง่ายดายเพราะสามารถปรับแต่งได้อย่างสมบูรณ์ในรูปแบบที่แตกต่างกัน
• ส่วนประกอบที่มีสเตียรอยด์ : ส่วนประกอบส่วนใหญ่ไม่ใช่องค์ประกอบง่าย ๆ ขององค์ประกอบดั้งเดิม แต่พวกเขาเพิ่มคุณสมบัติใหม่และกำหนดเอง
• น้ำหนักเบา : ไม่มีการพึ่งพาภายในและการนำเข้าอื่น ๆ เท่านั้นที่คุณต้องการ

หากคุณต้องการไลบรารีส่วนประกอบและต้องการใช้สไตล์ที่กำหนดเองของคุณอย่างง่ายดาย Oruga เป็นห้องสมุดสำหรับคุณ! -

นอกจากนี้หากคุณไม่ต้องการจัดสไตล์ทุกอย่างด้วยตัวเองเราได้สร้างธีมหลายชุดเพื่อให้คุณมีสไตล์ที่หลากหลายที่พร้อมใช้งาน -

เอกสาร

เรียกดูเอกสารออนไลน์ที่นี่

- สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่งส่วนประกอบอ่านส่วน "การปรับแต่ง" อย่างละเอียดในเอกสาร

- หากต้องการดูการดำเนินการของ Oruga ให้ไปที่ส่วนตัวอย่างในเอกสาร

หมายเหตุ: ซอร์สโค้ดของตัวอย่างเอกสารสามารถพบได้ในไดเรกทอรี examples สำหรับแต่ละองค์ประกอบมันทำหน้าที่เป็นตัวอย่างเช่นกัน

เริ่มต้นอย่างรวดเร็ว

- Oruga พร้อมใช้งานสำหรับ vue.js เวอร์ชัน 3.x

การตั้งค่า Oruga

1. ติดตั้ง Oruga

npm install @oruga-ui/oruga-next

2. นำเข้าส่วนประกอบ:

• ในการเริ่มต้นอย่างรวดเร็วให้ใช้ Oruga เพื่อลงทะเบียนส่วนประกอบทั้งหมด:

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

• หากต้องการใช้การเขย่าต้นไม้ทั้งส่วนประกอบลงทะเบียนด้วยตนเอง:

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

• หรือนำเข้าใน SFC ของคุณ

การปรับแต่ง

มหาอำนาจของ Oruga คือการกำหนดค่าและวิธีการไม่เชื่อเรื่องพระเจ้า CSS Framework แต่ละองค์ประกอบสามารถปรับแต่งและกำหนดค่าเป็นรายบุคคลโดยกำหนดคลาสเฉพาะโดยใช้วิธีการทำแผนที่คลาส ดังนั้น Oruga จึงมาโดยไม่มีการออกแบบตามค่าเริ่มต้น อย่างไรก็ตามมีการกำหนดค่าที่กำหนดไว้ล่วงหน้าอย่างเป็นทางการหลายอย่างที่เรียกว่าชุดรูปแบบซึ่งคุณสามารถรวมและขยายเพื่อให้แอปพลิเคชันของคุณดูและความรู้สึกเป็นรายบุคคล และส่วนประกอบทั้งหมดมาพร้อมกับคลาสที่กำหนดไว้ล่วงหน้าโดยค่าเริ่มต้น

โปรดอ่านส่วน "การปรับแต่ง" ในเอกสาร Oruga

หากคุณต้องการดูตัวอย่างด้วยแบบฟอร์มการลงทะเบียนที่กำหนดเองอย่างสมบูรณ์โดยใช้ Tailwind , Bulma , Bootstrap , Material หรือกรอบ CSS อื่น ๆ ได้ดูตัวอย่าง Multiframework Oruga อย่างเป็นทางการ (รหัสแหล่งที่มาที่นี่) หรือหากคุณคุ้นเคยกับ Tailwindcs 2

ใช้ oruga กับ nuxt

Oruga ไม่ได้จัดเตรียมโมดูล nuxt.js ในขณะนี้

คุณสามารถใช้ระบบปลั๊กอิน nuxt.js ที่เพิ่มไฟล์ (เช่น oruga.js ) ในโฟลเดอร์ plugins ของคุณที่มี:

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

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

ในการทำให้ปลั๊กอินนี้พร้อมใช้งานในแอปของคุณให้เพิ่มไฟล์นี้ลงในอาร์เรย์ plugins ใน nuxt.config.js ของคุณ

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

เพื่อให้เข้าใจว่าปลั๊กอินทำงานอย่างไรกับ nuxt.js ลองดูที่เอกสารปลั๊กอิน NUXTJS

ดูตัวอย่างอย่างเป็นทางการของ Nuxtjs + Oruga

การบริจาค

โปรดดูแนวทางการสนับสนุน

ติดต่อเรา?

→เข้าร่วมเซิร์ฟเวอร์ Oruga Discord

การกำหนดเวอร์ชัน

Oruga ใช้เวอร์ชันความหมาย 2.0.0 สำหรับเวอร์ชันแพ็คเกจ

ในขณะที่ยังอยู่ในเบต้าเวอร์ชันจะเป็นไปตามรูปแบบนี้: v0.yz ที่ไหน:

• Y : Major (การเปลี่ยนแปลงทำลาย)
• Z : รองหรือแพทช์

ทีมหลัก

Walter Tommasi

Andrea Stagi

Marcel Moravek

ผู้มีส่วนร่วม

ขอบคุณทุกคนที่เกี่ยวข้องกับการปรับปรุงโครงการนี้ทุกวัน

รายการที่สมบูรณ์

การให้เครดิต

โลโก้ Oruga ออกแบบโดย Matteo Guadagnini

Oruga SVG Images สำหรับช่องทำเครื่องหมายและส่วนประกอบวิทยุและสินทรัพย์วันหยุดที่สร้างโดย Fabrizio Masini

ใบอนุญาต

รหัสที่เผยแพร่ภายใต้ใบอนุญาต MIT