Lightning UI Components下載 - Lightning UI Components源代碼下載

Lightning UI Components

三方組件

v2.25.1

下載

閃電UI

該庫包含共享的閃電組件，您可以查看我們的實時故事書文檔，以了解有關每個組件以及如何在應用程序中利用它們的更多信息。

為了促進我們的主題體系結構的開發過程，我們已使用紗線工作區將該項目轉換為MonorePo。這使工程師可以在多個軟件包上工作，而無需npm link或yarn link 。這還具有其他一些好處，包括在不同的 @Lightningjs/UI軟件包上輕鬆的可見性，標準化和更好的發布管理。

目前，該項目已維護和釋放三個包裹。

@lightningjs/ui-components
@lightningjs/ui-components-test-utils
@lightningjs/ui-component-theme-base

地方發展

要在本地運行存儲庫，請運行：

 yarn install
yarn start

這將在http：// localhost：8000/。

同行依賴

@lightningjs/ui-components具有@lightningjs/core^2.x的同行依賴性。如果您使用舊的閃電（即wpe-lightning^1.x ，則需要在構建過程中對@lightningjs/core slias。如果您使用WebPack捆綁了應用程序，則應將其添加到您的配置中：

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

注意： Aliasing @lightningjs/core指向wpe-lightning不能保證與所有事物一起使用！考慮盡快更新您的閃電庫。

安裝

從NPM安裝：

npm install --save @lightningjs/ui-components

@lightningjs/ui-components對閃電包的同行依賴

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

用法

您應該使用名為Imports的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' ;

由於現在包裹捆綁在一起，因此可以適當的樹木搖動行為。有關樹的更多信息，請播放@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' ) ;
  }
}