bxuip-angular.js-ui

bxuip-angular.js-ui 는 화면 개발에 도움을 주는 JQuery 기반의 UI 라이브러리입니다.

목차

• 설치하기
• 가져오기
• 사용 예제

설치하기

npm 을 통해, 패키지를 설치합니다.

npm i bxuip-angular.js-ui

가져오기

bxuip-angular.js-ui 모듈 가져오기

import 된 모듈을 app 모듈에 주입합니다.

import {module} from 'angular';
import bxuipAngularJS from 'bxuip-angular.js-ui';

// app module
const App = module('app', [
    bxuipAngularJS // bx-ui
]);

export default App;

Asset 파일(css, img...) 가져오기

프로젝트 빌드 설정인 copy 를 통해, Asset 파일들을 build 디렉토리로 복사합니다.

copy: [
    {
        context: path.join(contextPath, 'node_modules'),
        from: 'bxuip-angular.js-ui/dist/assets/**/*',
        to: path.join(contextPath, 'build/assets'),
    }
]

복사된 *.css 파일들을 src/index.html 파일에 포함합니다.

<!-- 메인 css 파일 -->
<link rel="stylesheet" href="assets/bxuip-angular.js-ui/dist/assets/css/bx-ui.min.css" />
<!-- 테마 css 파일 -->
<link rel="stylesheet" href="assets/bxuip-angular.js-ui/dist/assets/theme/bx-theme-blackdiamond.css" />

사용 예제

*.html 파일에, 아래처럼 코드를 작성하면 bx-input 컴포넌트 화면에 그려집니다.

<bx-input type="text" label="로그인"></bx-input>

*.js 파일에, 아래처럼 코드를 작성하면 BxPaper 컴포넌트 화면에 그려집니다.

$().BxPaper({
    width: 500,
    height: 500,
    title:'templateUrl 예제 #1',
    titleAlign: 'center',
    template: '페이퍼'
}).render();

API 문서

http://bxuip.bwg.co.kr/#/uiComponents/