oruga

Oruga UI يشبه اليرقة ، الحد الأدنى والعملي. إنه بين يديك يحولها إلى فراشة

(؟) =>؟

سمات

Oruga هي مكتبة مكونات واجهة المستخدم خفيفة الوزن لـ Vue.js دون أي تبعية. إنه يوفر مجموعة من المكونات القابلة للتخصيص بسهولة ولا يعتمد على أي نمط محدد أو إطار CSS (مثل bootstrap ، bulma ، tailwindcss ، إلخ ...). لذلك ، لا يوفر نظام الشبكة أو أدوات CSS ، ولكن يمكنك دمج أي إطار عمل CSS الذي تريده. يوفر لك Oruga مجموعة من المكونات الوظيفية ، بحيث يمكنك التركيز فقط على جوانب واجهة المستخدم/UX لتطبيقك ويمكن أن تكون مرنة تمامًا للتغييرات المستقبلية دون الحاجة إلى لمس خط JavaScript.

• إطار عمل CSS لاأدري : لا توجد اعتماد على إطار/مكتبة CSS محددة ولكن يمكنك بسهولة دمج المكونات مع واحد منها لأنها قابلة للتخصيص بالكامل بطرق مختلفة
• المكونات ذات المنشطات : معظم المكونات ليست غلافًا بسيطًا للعناصر الأصلية ولكنها تضيف ميزات جديدة ومخصصة
• خفيفة الوزن : لا يوجد أي تبعية داخلية أخرى واستيراد المكونات التي تحتاجها فقط

إذا كنت بحاجة إلى مكتبة مكونة وتريد تطبيق أنماطك المخصصة بسهولة ، فإن Oruga هي المكتبة لك! ؟

بالإضافة إلى ذلك ، إذا كنت لا ترغب في تصميم كل شيء بنفسك ، فقد أنشأنا العديد من الموضوعات لتزويدك بمجموعة متنوعة من الأساليب الجاهزة للاستخدام. ؟

الوثائق

تصفح الوثائق عبر الإنترنت هنا.

؟ لمزيد من المعلومات حول تخصيص المكونات ، اقرأ بعناية قسم "التخصيص" في الوثائق.

؟ لرؤية Oruga في العمل ، انتقل إلى قسم المثال في الوثائق.

ملاحظة: يمكن العثور على الكود المصدري لأمثلة الوثائق في أدلة examples لكل مكون ، وهو بمثابة العرض التوضيحي أيضًا.

بداية سريعة

؟ Oruga متاح لـ Vue.js الإصدار 3.x

إعداد أوروغا

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. يمكن تخصيص كل مكون بشكل فردي وتكوينه عن طريق تحديد فئات محددة باستخدام نهج رسم الفئة. لذلك ، يأتي Oruga دون أي تصميم افتراضيًا. ومع ذلك ، هناك العديد من التكوينات الرسمية المحددة مسبقًا تسمى الموضوعات ، والتي يمكنك تضمينها وتمديدها لإعطاء تطبيقك نظرة فردية. وجاء جميع المكونات مع فصول محددة مسبقا بشكل افتراضي.

يرجى قراءة قسم "التخصيص" في وثائق Oruga.

إذا كنت ترغب في رؤية مثال مع نموذج تسجيل مخصص بالكامل باستخدام Tailwind أو Bulma أو Bootstrap أو Material أو أي إطار عمل CSS آخر ، فالألقي نظرة على مثال Oruga الرسمي Multiframework (رمز المصدر المتاح هنا)

باستخدام oruga مع nuxt

لا يوفر Oruga وحدة Nuxt.js في الوقت الحالي.

يمكنك استخدام نظام Nuxt.js Plugins إضافة ملف (على سبيل المثال 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 Plugin.

ألق نظرة على مثال NuxtJS الرسمي + أوروغا.

المساهمة

يرجى الاطلاع على المبادئ التوجيهية المساهمة.

اتصل بنا ؟

→ انضم إلى خادم Discord Oruga.

الإصدار

يستخدم Oruga الإصدار الدلالي 2.0.0 لإصدارات الحزمة.

بينما لا يزال في الإصدار التجريبي ، ستتبع الإصدارات هذا النمط: v0.yz ، حيث:

• Y : Major (كسر التغييرات)
• ض : قاصر أو تصحيح

فريق أساسي

والتر توماسي

أندريا ستاجي

مارسيل مورافك

المساهمين

شكرا لجميع المشاركين لتحسين هذا المشروع ، يوما بعد يوم

قائمة كاملة.

الاعتمادات

شعار Oruga الذي صممه Matteo Guadagnini

صور Oruga SVG لأصول مربعات الاختيار ومكونات الراديو والأعياد التي أنشأتها Fabrizio Masini

رخصة

رمز صدر تحت رخصة معهد ماساتشوستس للتكنولوجيا.