설치

준비 사항#

Node.js와 npm, 패키지 import 및 CSS import를 처리하는 앱 빌드 도구를 준비하세요. 프로젝트의 package.json이 있는 폴더에서 설치합니다. JavaScript 예제는 앱 진입 파일에 넣고 개발 서버에서 실행하세요.

1. npm 패키지 설치#

Community

npm install @syidax/core@latest

@syidax/core · npm ↗

Pro

npm install @syidax/core-pro@latest

@syidax/core-pro · npm ↗

사용할 에디션 하나를 선택하세요. 두 에디션 모두 공개 npm에서 설치하며, Pro 기능에는 유효한 제품 라이선스가 필요합니다. Pro로 전환하면 CSS, 컴포넌트, 라이선스 import를 모두 같은 Pro 패키지로 맞춥니다.

Core Pro와 Chart/Grid를 함께 사용할 때

npm install @syidax/core@npm:@syidax/core-pro@latest @syidax/advanced-pro@latest

이 조합에서는 Core Pro를 @syidax/core 별칭으로 설치하므로 Core의 CSS·컴포넌트·라이선스 import도 @syidax/core/…를 사용합니다. Chart/Grid는 @syidax/advanced-pro/…를 사용합니다. Chart/Grid Community를 사용하려면 명령의 @syidax/advanced-pro@latest을 @syidax/advanced@latest로 바꾸세요. Chart와 Grid는 같은 패키지에 포함됩니다.

2. JavaScript와 CSS 연결#

앱의 JavaScript 진입 파일에서 CSS를 불러오고 사용할 컴포넌트를 등록하세요.

import '@syidax/core/css/core';
import { defineCustomElement } from '@syidax/core/components/sy-button.js';

defineCustomElement();

앱 HTML에 다음 마크업을 넣습니다. 다크 테마는 sy-theme-dark를 사용하세요.

<div class="sy-theme sy-theme-light">
  <sy-button variant="primary">Save</sy-button>
</div>

3. Pro 라이선스 연결#

Core Pro를 단독 설치했다면 다음 예제를 사용하세요. 라이선스 JSON은 앱에서 접근 가능한 정적 경로에 배치합니다. Core Pro 별칭 설치를 선택했다면 아래 import의 @syidax/core-pro를 @syidax/core로 바꾸세요.

import '@syidax/core-pro/css/core';
import { connectLicense } from '@syidax/core-pro/license';
import { defineCustomElement } from '@syidax/core-pro/components/sy-button.js';

await connectLicense('/syidax-license.json');
defineCustomElement();

앱의 개발 서버를 실행해 Button을 확인하세요. Community에는 Pro 라이선스가 필요하지 않습니다.