Lightning UI Components Download - Lightning UI Components Sumber Code Download

Lightning UI Components

Komponen pihak ketiga

v2.25.1

Unduh

Petir UI

Perpustakaan ini berisi komponen petir bersama, Anda dapat melihat dokumentasi buku cerita langsung kami untuk mempelajari lebih lanjut tentang setiap komponen dan cara memanfaatkannya dalam aplikasi Anda.

Untuk memfasilitasi proses pengembangan untuk arsitektur tema kami, kami telah mengubah proyek ini menjadi monorepo menggunakan ruang kerja benang. Ini memungkinkan para insinyur untuk bekerja di beberapa paket tanpa perlu npm link atau yarn link . Ini juga memiliki beberapa manfaat lain termasuk visibilitas mudah di berbagai paket @LightningJS/UI, standardisasi, dan manajemen rilis yang lebih baik.

Tiga paket saat ini dipelihara dan dirilis dari proyek ini.

@Lightningjs/UI-komponen
@lightningjs/ui-components-test-utils
@lightningjs/ui-komponen-tema-basis

Pengembangan Lokal

Untuk menjalankan repositori secara lokal, jalankan:

 yarn install
yarn start

Ini akan meluncurkan buku cerita di http: // localhost: 8000/.

Ketergantungan sebaya

@lightningjs/ui-components memiliki ketergantungan rekan pada @lightningjs/core^2.x . Jika Anda terjebak menggunakan Lightning lama , IE wpe-lightning^1.x , Anda harus alias @lightningjs/core dalam proses pembuatan Anda. Jika Anda menggabungkan aplikasi Anda menggunakan webpack, Anda harus menambahkan ini ke konfigurasi Anda:

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

Catatan: aliasing @lightningjs/core untuk menunjuk ke wpe-lightning tidak dijamin bekerja dengan semuanya! Pertimbangkan untuk memperbarui perpustakaan Lightning Anda sesegera mungkin.

Instalasi

Instal dari NPM:

npm install --save @lightningjs/ui-components

@lightningjs/ui-components memiliki ketergantungan rekan pada paket petir

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

Penggunaan

Anda harus mengimpor komponen menggunakan ES6 bernama impor, seperti itu:

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

Anda tidak boleh menggunakan impor jalur seperti ini:

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

Karena paket sekarang dibundel dengan rollup, ini memungkinkan perilaku pengocok pohon yang tepat. Untuk informasi lebih lanjut tentang pengocok pohon @material/ui dokumentasi memiliki panduan hebat tentang ukuran bundel pengembangan ( Catatan : Ini adalah dokumentasi eksternal jika tidak terkait dengan proyek ini!).

Gunakan komponen di aplikasi Anda

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