ดาวน์โหลด Lightning UI Components - Lightning UI Components Source Source Download

Lightning UI Components

ส่วนประกอบของบุคคลที่สาม

v2.25.1

ดาวน์โหลด

สายฟ้า 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

สิ่งนี้จะเปิดตัวหนังสือนิทานที่ 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 ไม่ รับประกันว่าจะทำงานกับทุกสิ่ง! พิจารณาอัปเดตไลบรารี Lightning ของคุณโดยเร็วที่สุด

การติดตั้ง

ติดตั้งจาก NPM:

npm install --save @lightningjs/ui-components

@lightningjs/ui-components มีการพึ่งพาเพียร์ในแพ็คเกจ Lightning

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

การใช้งาน

คุณควรนำเข้าส่วนประกอบโดยใช้การนำเข้า ES6 เช่น So:

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

คุณไม่ควรใช้การนำเข้าเส้นทางเช่นนี้:

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

เนื่องจากแพ็คเกจได้รับการรวมเข้ากับการโรลอัพจึงทำให้พฤติกรรมการสั่นของต้นไม้ที่เหมาะสม สำหรับข้อมูลเพิ่มเติมเกี่ยวกับต้นไม้ที่เขย่าเอกสาร @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' ) ;
  }
}