초기화

페이지에 Kanban 위젯을 세 단계로 생성합니다.

1. 소스 파일 포함하기
2. 컨테이너 생성하기
3. Kanban 초기화하기

Include source files

패키지 다운로드 후 프로젝트의 폴더에 압축을 해제합니다.

다음 소스 파일을 페이지에 포함하세요.

• kanban.js
• kanban.css

두 파일의 상대 경로가 올바른지 확인하세요.

index.html

<script type="text/javascript" src="./dist/kanban.js"></script>  
<link rel="stylesheet" href="./dist/kanban.css">

Create a container

Kanban을 위한 컨테이너를 추가하고, 예를 들어 root와 같은 ID를 지정하세요.

index.html

<div id="root"></div>

Toolbar와 함께 위젯을 생성하려면, Toolbar를 위한 별도의 컨테이너도 추가하세요.

index.html

<div id="toolbar"></div> // container for Toolbar
<div id="root"></div> // container for Kanban

Initialize Kanban

kanban.Kanban 생성자를 사용해 Kanban을 초기화합니다. 생성자는 두 개의 파라미터를 받습니다.

• HTML 컨테이너의 CSS 선택자 (또는 컨테이너 요소 자체)
• 설정 객체 (전체 속성 목록 참고)

다음 코드 스니펫은 Kanban 인스턴스를 생성합니다.

index.html

// Kanban 생성
new kanban.Kanban("#root", {
    // 설정 속성
});

Toolbar와 함께 위젯을 생성하려면, kanban.Toolbar 생성자를 사용해 Toolbar를 별도로 초기화하세요. Toolbar 컨트롤은 api 파라미터를 통해 Kanban 인스턴스와 연동됩니다. board.api를 전달하여 Toolbar를 보드에 연결하세요.

index.html

// Kanban 생성
const board = new kanban.Kanban("#root", {
    // 설정 속성
});

new kanban.Toolbar("#toolbar", {
    api: board.api, // required: links Toolbar controls to the Kanban instance
    // other configuration properties
});

정보

Toolbar 구성에 대한 자세한 내용은 Configuration 섹션을 참고하세요.

Configuration properties

전체 설정 레퍼런스는 다음을 참고하세요.

• Kanban properties overview — 전체 Kanban 설정 속성
• Toolbar properties overview — 전체 Toolbar 설정 속성

예제

다음 스니펫은 샘플 데이터와 함께 Kanban을 초기화합니다.