Lightning UI Components
v2.25.1
이 라이브러리에는 공유 번개 구성 요소가 포함되어 있으며 라이브 스토리 북 문서를보고 각 구성 요소에 대한 자세한 내용과 응용 프로그램에서이를 활용하는 방법에 대해 자세히 알아볼 수 있습니다.
테마 아키텍처의 개발 프로세스를 용이하게하기 위해이 프로젝트를 원사 작업 공간을 사용하여 모노레 포로 변환했습니다. 이를 통해 엔지니어는 npm link 또는 yarn link 없이 여러 패키지에서 작업 할 수 있습니다. 여기에는 다른 @lightningjs/ui 패키지, 표준화 및 더 나은 릴리스 관리에 대한 쉬운 가시성을 포함하여 다른 이점이 있습니다.
현재이 프로젝트에서 3 개의 패키지가 유지되고 출시되고 있습니다.
로컬로 저장소를 실행하려면 실행하십시오.
yarn install
yarn start
이것은 http : // localhost : 8000/에서 스토리 북을 시작합니다.
@lightningjs/ui-components @lightningjs/core^2.x 에 동료 의존성을 가지고 있습니다. 오래된 번개 , 즉 wpe-lightning^1.x 사용하는 경우 빌드 프로세스에서 Alias @lightningjs/core 필요합니다. WebPack을 사용하여 앱을 번들링하는 경우 구성에 추가해야합니다.
// in webpack.config.js
module . exports = {
resolve : {
alias : {
'@lightningjs/core' : path . resolve ( __dirname , 'node_modules/wpe-lightning' )
}
}
} ;참고 :
wpe-lightning가리키기 위해@lightningjs/corealiasing @lightning을 가리키는 것은 아닙니다 ! 가능한 한 빨리 번개 라이브러리를 업데이트하는 것을 고려하십시오.
NPM에서 설치 :
npm install --save @lightningjs/ui-components @lightningjs/ui-components Lightning 패키지에 대한 동료 의존성을 가지고 있습니다
npm install -S @lightningjs/ui @lightningjs/core다음과 같이 다음과 같은 ES6이라는 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' ) ;
}
} Github 문제를 제출하거나 Slack에 참여하십시오!
