Ignite UI for Web Components 패키지 개요
Ignite UI for Web Components는 UI 위젯, 구성 요소, 디자인 도구용 UI 키트 및 Web Components 용 지원 서비스의 완전한 세트입니다. 개발자가 최신 데스크톱 브라우저, 모바일 경험 및 브라우저 웹 구성 요소 API를 대상으로 하는 프로그레시브 웹 앱(PWA)을 위한 최신 고성능 HTML5 및 JavaScript 앱을 빌드할 수 있도록 설계되었습니다.
Charts & Graphs
Ignite UI for Web Components 에는 다음의 라이브러리가 포함되어 있습니다. 차트 & 그래프 이를 통해 65+ 유형의 차트 시리즈 및 조합을 통해 모든 유형의 데이터를 놀라운 대화형 차트 및 대시보드로 시각화할 수 있습니다. 빠르고 아름다운 디자인을 위해 제작되었으며, 모든 최신 브라우저에서 작동하도록 설계되었으며, 완벽한 터치와 상호 작용을 통해 모든 장치에서 반응형 비주얼을 빠르게 구축할 수 있습니다.
게이지
Ignite UI for Web Components는 제공합니다 방사형 게이지, 선형 계기 그리고 불릿 그래프 쉽고 직관적인 방식으로 데이터를 설명하는 데 사용되는 구성 요소입니다. 이 방사형 게이지 에는 사전 정의된 모양과 축척을 만들기 위한 다양한 사용자 정의 옵션이 있습니다. 이 선형 계기 척도 및 하나 이상의 범위와 비교된 값의 간단한 보기를 제공합니다. 하나의 눈금, 한 세트의 눈금 표시 및 한 세트의 레이블을 지원합니다. 이 불릿 그래프 데이터 시각화를 만들어 대시보드에서 사용되는 미터 및 게이지를 간단한 막대 차트로 바꿀 수 있는 구성 요소입니다.
지도
Ignite UI for Web Components 지리지도 응용 프로그램에서 지리적 데이터를 시각화할 수 있는 기능을 제공합니다. 많은 지리적 위치로 구성된 데이터 세트를 마커, 선, 다각형 또는 대화형 비트맵의 모양으로 렌더링할 수 있습니다. 이를 통해 여러 지도 계층을 지리적 데이터와 오버레이하고, 특정 지리적 위치를 표시하고, 사용자 지정 마커와 색상을 사용하여 정보를 표시할 수 있습니다.
Grids & Inputs
Ignite UI for Web Components는 여러 가지를 제공합니다. 격자 구성이 거의 없는 데이터를 바인딩하고 표시할 수 있는 구성 요소 데이터 그리드, 목록, 나무, 심지어 스프레드시트. 또한 필터링, 정렬, 그룹화, 고정 등과 같은 기능을 제공합니다.
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 설치합니다. 이 예에서는 Map 웹 구성 요소를 설치합니다.
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로 이동합니다. 최종 결과에는 대화형 세계 지도가 표시되어야 합니다.