Téléchargement Lightning UI Components - Téléchargement du code source Lightning UI Components

Lightning UI Components

Composants tiers

v2.25.1

Télécharger

Ui de la foudre

Cette bibliothèque contient des composants de foudre partagés, vous pouvez voir notre documentation en direct pour en savoir plus sur chaque composant et comment les exploiter dans votre application.

Afin de faciliter le processus de développement de notre architecture de thème, nous avons converti ce projet en monorepo en utilisant des espaces de travail YARN. Cela permet aux ingénieurs de travailler sur plusieurs packages sans avoir besoin de npm link ou yarn link . Cela présente également d'autres avantages, notamment une visibilité facile dans différents packages @ LightningJS / UI, la normalisation et une meilleure gestion des versions.

Trois packages sont actuellement entretenus et libérés de ce projet.

@ LightningJS / UI-Components
@ LightningJS / UI-components-test-utils
@ LightningJS / UI-components-thème-base

Développement local

Pour exécuter le référentiel localement, exécutez:

 yarn install
yarn start

Cela lancera le livre de contes sur http: // localhost: 8000 /.

Dépendances des pairs

@lightningjs/ui-components a une dépendance des pairs sur @lightningjs/core^2.x Si vous êtes coincé à l'aide de l' ancien Lightning , c'est-à-dire wpe-lightning^1.x , vous devrez alias @lightningjs/core dans votre processus de construction. Si vous regroupez votre application à l'aide de WebPack, vous devez l'ajouter à votre configuration:

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

Remarque: Aliasing @lightningjs/core pour pointer vers wpe-lightning n'est pas garanti de travailler avec tout! Envisagez de mettre à jour votre bibliothèque Lightning dès que possible.

Installation

Installer à partir de NPM:

npm install --save @lightningjs/ui-components

@lightningjs/ui-components a une dépendance par les pairs sur le package Lightning

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

Usage

Vous devez importer des composants à l'aide d'Es6 nommés importations, comme ainsi:

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

Vous ne devez pas utiliser les importations de chemin comme celle-ci:

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

Étant donné que les colis sont désormais regroupés avec un rollup, cela permet un comportement de tremblement d'arbre approprié. Pour plus d'informations sur le tremblement d'arbres, la documentation @material/ui a un excellent guide sur la taille du bundle de développement ( Remarque : Ceci est une documentation externe autrement sans rapport avec ce projet!).

Utilisez des composants dans votre application

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