Ignite UI for Web Components 개요
Ignite UI for Web Components Web Components 용 디자인 도구 및 지원 서비스를 위한 UI 위젯, 구성 요소, UI 키트의 완전한 세트입니다. 개발자가 브라우저 웹 구성 요소 API를 대상으로 하는 최신 데스크톱 브라우저, 모바일 경험 및 프로그레시브 웹 앱(PWA)을 위한 가장 현대적인 고성능 HTML5 및 JavaScript 앱을 구축할 수 있도록 설계되었습니다.
Charts & Graphs
Ignite UI for Web Components 에는 65+ 유형의 차트 시리즈 및 조합을 통해 모든 유형의 데이터를 멋진 대화형 차트 및 대시보드로 시각화할 수 있는 차트 및 그래프 라이브러리가 포함되어 있습니다. 속도와 아름다움을 위해 제작되었으며 모든 최신 브라우저에서 작동하도록 설계되었으며 완벽한 터치와 상호 작용을 통해 모든 장치에서 반응형 비주얼을 빠르게 구축할 수 있습니다.
게이지
Ignite UI for Web Components는 쉽고 직관적인 방식으로 데이터를 설명하는 데 사용되는 방사형 게이지, 선형 계기 및 Bullet Graph 구성 요소를 제공합니다. 방사형 게이지 에는 미리 정의된 모양과 축척을 만들기 위한 다양한 사용자 지정 옵션이 있습니다. 선형 계기는 척도 및 하나 이상의 범위와 비교한 값의 간단한 보기를 제공합니다. 하나의 눈금, 하나의 눈금 표시 세트 및 하나의 레이블 세트를 지원합니다. 데이터 시각화를 만들 수 있는 불릿 그래프 구성 요소로, 대시보드에서 사용되는 미터와 게이지를 간단한 막대 차트로 대체합니다.
지도
Ignite UI for Web Components Geographic Maps는 응용 프로그램에서 지리 데이터를 시각화하는 기능을 제공합니다. 여러 지리적 위치로 구성된 데이터 세트를 마커, 선, 다각형 또는 대화형 비트맵 모양으로 렌더링할 수 있습니다. 이를 통해 여러 지도 계층을 지리 데이터와 중첩하고, 특정 지리적 위치를 표시하고, 사용자 지정 마커와 색상을 사용하여 정보를 표시할 수 있습니다.
Grids & Inputs
Ignite UI for Web Components 는 Data Grid, List, Tree 및 Spreadsheet의 형태로 약간의 구성으로 데이터를 바인딩하고 표시할 수 있는 여러 그리드 구성 요소를 제공합니다. 또한 필터링, 정렬, 그룹화, 고정 등과 같은 기능을 제공합니다.
Buttons, Inputs, Layouts & Menus
Ignite UI for Web Components는 다양한 유형의 버튼, 입력, 메뉴 및 레이아웃을 제공하여 종속성 없는 접근 방식으로 캡슐화 및 재사용 가능한 구성 요소의 개념을 사용하여 최신 웹 애플리케이션을 빌드할 수 있는 기능을 제공합니다. 여기에서 동화책을 참조하십시오. 이러한 구성 요소는 Indigo Design System 기반으로 하며, App Builder에서 완벽하게 지원되며 Sketch, Adobe XD 및 Figma에서 바로 사용할 수 있는 UI 키트를 지원합니다.
Ignite UI for Web Components 시작하기
이 섹션에서는 Ignite UI for Web Components 사용하여 Web Components 응용 프로그램을 만들기 위한 단계별 지침을 제공합니다.
Install IgniteUI CLI
처음부터 애플리케이션을 생성하고 Ignite UI Web Components 사용하도록 구성하려면 Ignite UI CLI를 사용할 수 있습니다. 첫 번째 단계는 다음과 같이 해당 패키지를 전역적으로 설치하는 것입니다.
npm install -g igniteui-cli
사용 가능한 옵션을 통해 안내 경험을 얻으려면 새 애플리케이션을 생성하고 설정하는 데 도움이 되는 단계별 모드를 초기화할 수 있습니다. 가이드를 시작하려면 ig 명령을 실행하면 됩니다.
ig
그런 다음 Web Components 프레임워크로 선택하고 Base 프로젝트 템플릿을 선택하고 특정 구성 요소/보기를 추가하거나 Complete & Run 선택합니다. 또한 여기에서 Ignite UI CLI에 대한 자세한 내용을 읽을 수 있습니다.
Install Polyfills
웹 구성 요소 폴리필을 설치하려면 다음 명령을 실행하세요.
그런 다음 웹 구성 요소 폴리필을 index.js로 가져옵니다.
import '@webcomponents/custom-elements/custom-elements.min';
import '@webcomponents/custom-elements/src/native-shim.js';
Install Ignite UI for Web Components
응용 프로그램에서 Ignite UI Web Components 사용하려면 igniteui-webcomponents 패키지를 설치해야 합니다.
npm install igniteui-webcomponents
다음으로 index.ts 파일에서 사용하려는 구성 요소를 가져와야 합니다. 다음과 같이 defineComponents 함수를 사용하여 하나 이상의 구성 요소를 가져올 수 있습니다.
import { defineComponents, IgcAvatarComponent, IgcBadgeComponent } from 'igniteui-webcomponents';
defineComponents(IgcAvatarComponent, IgcBadgeComponent);
defineAllComponents 함수를 사용하여 모든 구성 요소를 가져올 수도 있습니다.
import { defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
[!Note] Importing all of the components will increase the bundle size of your application. That's why we recommend you to import only the components that you are actually using.
마지막 단계는 구성 요소에 필요한 CSS를 가져와서 적절하게 스타일이 지정되도록 하는 것입니다.
import 'igniteui-webcomponents/themes/light/bootstrap.css';
구성 요소를 가져온 후 HTML에서 사용할 수 있습니다.
<igc-avatar initials="AZ"></igc-avatar>
<igc-badge></igc-badge>
Install Charts and Map Packages
Step 1 - Create the Web Component Project
1 - 명령줄을 열고 wc-html 이라는 디렉터리를 만듭니다.
mkdir wc-html
2 - 새로 생성된 디렉터리로 명령줄 경로를 변경합니다.
cd wc-html
3 - 디렉토리에서 npm 초기화
npm init -y
4 -webpack 번들러와 webpack cli를 개발자 종속성으로 설치합니다.
npm install webpack webpack-cli --save-dev
[!Note] Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
5 -VS Code에서 프로젝트 열기
code .
6 - 다음 코드를 사용하여 index.html 이라는 새 파일을 만듭니다.
7 -src 라는 새 폴더를 만들고 해당 폴더 내에 index.js 라는 새 파일을 만듭니다. 프로젝트 구조는 다음과 같아야 합니다.
8 -webpack을 사용하여 빌드 스크립트를 포함하도록 package.json 파일을 업데이트합니다.
"scripts": {
"build": "webpack ./src/index.js -o ./dist/ --output-filename index.bundle.js"
},
[!Note] This script will use webpack to bundle the index.js file into another file called index.bundle.js and place it into a folder named dist.
If a javaScript heap out of memory issue occurs while building you can increase the heap size by using this build command instead:
"scripts": {
"build": "node --max_old_space_size=8192 node_modules/webpack/bin/webpack src/index.js -o dist/index.bundle.js"
},
Step 2 - Install Polyfills
1 -VS Code에서 터미널 열기(보기-> 터미널 메뉴 또는 CTRL + ` 키 누르기)
2 - 웹 구성 요소 폴리필을 설치하려면 다음 명령을 입력합니다.
npm install @webcomponents/custom-elements
3 - 웹 구성 요소 폴리필을 index.js로 가져옵니다.
import '@webcomponents/custom-elements/custom-elements.min';
import '@webcomponents/custom-elements/src/native-shim.js';
Step 3 - Install Ignite UI for Web Components and lit-html
1 -npm을 사용하여 웹 구성 요소용 Ignite UI 설치합니다. 이 예에서는 지도 웹 구성 요소를 설치합니다.
npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-charts
npm install --save igniteui-webcomponents-maps
npm install lit-html
2 -index.js 파일에서 지리적 지도 모듈과 ModuleManager를 가져옵니다.
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
// module manager for registering the modules
import { ModuleManager } from 'igniteui-webcomponents-core';
3 -ModuleManager를 사용하여 지리적 지도 모듈 등록
ModuleManager.register(
IgcGeographicMapModule,
IgcDataChartInteractivityModule
);
4 -index.html 파일의 본문에 지리적 지도 웹 구성 요소를 추가합니다.
<body>
<igc-geographic-map id="map" height="500px" width="100%">
</igc-geographic-map>
</body>
Step 4 - Build and Run the Web Component Project
1 -VS Code에서 터미널을 열고 빌드 스크립트를 실행합니다.
npm run build
[!Note] This command will run the build script we created earlier. The build script will generate a file named index.bundle.js in a folder named dist
2 -index.html 파일의 본문 요소 끝에 index.bundle.js 스크립트를 추가합니다.
<body>
<igc-geographic-map id="map" height="500px" width="100%">
</igc-geographic-map>
<script src="dist/index.bundle.js"></script>
</body>
3 - 프로젝트를 실행하려면 로컬 개발 서버를 시작합니다. 이 예에서는 Live Server를 사용하고 있습니다. index.html 편집기 내에서 마우스 오른쪽 버튼을 클릭하고 Live Server로 열기를 선택하세요.
[!Note] Live Server is an extension to Visual Studio Code that allows you to launch a local development server with live reload feature for static & dynamic pages. This extension can be installed via the Visual Studio Code Extensions tab, or by downloading it from the Visual Studio Marketplace.
4 - 로컬 서버의 웹 브라우저를 사용하여 index.html로 이동합니다. 최종 결과에는 대화형 세계 지도가 표시되어야 합니다.