Lightning UI Components

Blitz UI

Diese Bibliothek enthält gemeinsame Blitzkomponenten. Sie können unsere Live -Storybook -Dokumentation anzeigen, um mehr über jede Komponente zu erfahren und wie Sie sie in Ihrer Anwendung nutzen.

Um den Entwicklungsprozess für unsere Theming -Architektur zu erleichtern, haben wir dieses Projekt mit Garn -Arbeitsbereichen in ein Monorepo umgewandelt. Auf diese Weise können Ingenieure über mehrere Pakete hinweg arbeiten, ohne dass npm link oder yarn link erforderlich ist. Dies hat auch einige andere Vorteile, darunter eine einfache Sichtbarkeit in verschiedenen @lightningJs/UI -Paketen, Standardisierung und besseres Release -Management.

Derzeit werden drei Pakete aus diesem Projekt gewartet und freigegeben.

• @lightningjs/UI-Komponenten
• @Lightningjs/UI-Komponenten-Test-Utils
• @lightningjs/UI-Komponenten-Themen-Base

Lokale Entwicklung

Um das Repository lokal auszuführen, laufen Sie:

 yarn install
yarn start

Dadurch wird ein Storybook unter http: // localhost: 8000/gestartet.

Peer -Abhängigkeiten

@lightningjs/ui-components haben eine Peer-Abhängigkeit von @lightningjs/core^2.x . Wenn Sie mit dem alten Lightning , dh wpe-lightning^1.x , festsitzen, müssen Sie in Ihrem Build-Prozess alias @lightningjs/core alias müssen. Wenn Sie Ihre App mit WebPack bündeln, sollten Sie diese zu Ihrer Konfiguration hinzufügen:

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

Hinweis: Aliasing @lightningjs/core , um auf wpe-lightning hinzuweisen, funktioniert nicht garantiert mit allem! Erwägen Sie, Ihre Blitzbibliothek so schnell wie möglich zu aktualisieren.

Installation

Installieren Sie von NPM:

npm install --save @lightningjs/ui-components

@lightningjs/ui-components hat eine Peer-Abhängigkeit vom Lightning-Paket

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

Verwendung

Sie sollten Komponenten mit den mit ES6 bezeichneten Importen wie SO importieren:

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

Sie sollten keine solchen Pfadimporte verwenden:

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

Da Pakete jetzt mit Rollup gebündelt sind, ermöglicht dies ein ordnungsgemäßes Baumschüttelverhalten. Für weitere Informationen zum Schütteln der @material/ui -Dokumentation enthält eine großartige Anleitung zur Größe der Entwicklungsbündel ( Hinweis : Dies ist eine externe Dokumentation, die ansonsten nichts mit diesem Projekt zu tun hat!).

Verwenden Sie Komponenten in Ihrer Anwendung

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

Fragen ???

Senden Sie ein Github -Problem oder schließen Sie sich uns auf Slack an!