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' ) ;
  }
}