تنزيل Lightning UI Components - تنزيل رمز المصدر Lightning UI Components

Lightning UI Components

مكونات الطرف الثالث

v2.25.1

تنزيل

Lightning UI

تحتوي هذه المكتبة على مكونات البرق المشتركة ، يمكنك عرض وثائق القصة الحية لدينا لمعرفة المزيد عن كل مكون وكيفية الاستفادة منها في التطبيق الخاص بك.

من أجل تسهيل عملية التطوير لهندسة النقل الخاصة بنا ، قمنا بتحويل هذا المشروع إلى monorepo باستخدام مساحات عمل الغزل. يتيح ذلك للمهندسين العمل عبر حزم متعددة دون الحاجة إلى npm link أو yarn link . يحتوي هذا أيضًا على بعض الفوائد الأخرى بما في ذلك سهولة الرؤية عبر حزم @LightningJS/UI مختلفة ، والتوحيد ، وإدارة الإصدار الأفضل.

يتم الحفاظ على ثلاث حزم حاليًا من هذا المشروع.

@LightningJS/UI-Components
@lightningjs/ui-components-test-utils
@LightningJS/UI-Components-theme-base

التنمية المحلية

لتشغيل المستودع محليًا ، قم بتشغيل:

 yarn install
yarn start

سيؤدي ذلك إلى إطلاق Storybook على http: // localhost: 8000/.

تبعيات الأقران

@lightningjs/ui-components لها اعتماد نظير على @lightningjs/core^2.x . إذا كنت عالقًا باستخدام البرق القديم ، أي wpe-lightning^1.x ، فستحتاج إلى الاسم المستعار @lightningjs/core في عملية الإنشاء الخاصة بك. إذا كنت تقوم بتجميع تطبيقك باستخدام WebPack ، فيجب عليك إضافة ذلك إلى التكوين الخاص بك:

 // in webpack.config.js
module . exports = {
  resolve : {
    alias : {
      '@lightningjs/core' : path . resolve ( __dirname , 'node_modules/wpe-lightning' )
    }
  }
} ;

ملاحظة: الاسم المستعار @lightningjs/core للإشارة إلى wpe-lightning غير مضمون للعمل مع كل شيء! فكر في تحديث مكتبة البرق في أقرب وقت ممكن.

تثبيت

التثبيت من NPM:

npm install --save @lightningjs/ui-components

@lightningjs/ui-components لديها اعتماد نظير على حزمة البرق

npm install -S @lightningjs/ui @lightningjs/core

الاستخدام

يجب عليك استيراد المكونات باستخدام ES6 المسمى الواردات ، مثل ذلك:

 // App.js
import lng from '@lightningjs/core' ;
import { Button } from '@lightningjs/ui-components' ;

يجب ألا تستخدم واردات المسار مثل هذا:

 // Do not use
import Button from '@lightningjs/ui-components/components/Button' ;

نظرًا لأن الحزم يتم تجميعها الآن مع Rollup ، فهذا يتيح سلوكًا مناسبًا لتهز الشجرة. لمزيد من المعلومات حول تهز الشجرة ، فإن وثائق @material/ui لها دليل رائع على حجم حزمة التطوير ( ملاحظة : هذه الوثائق الخارجية غير ذات صلة بهذا المشروع!).

استخدم المكونات في التطبيق الخاص بك

 import { FocusManager } from '@lightningjs/ui-components' ;

class MyComponent extends lng . Component {
  static _template ( ) {
    return {
      FocusManager : {
        type : FocusManager ,
        direction : 'row' ,
        children : [ ]
      }
    } ;
  }
  _getFocused ( ) {
    return this . tag ( 'FocusManager' ) ;
  }
}