초기화

이 가이드는 Kanban 보드의 기능으로 애플리케이션을 확장할 수 있도록 페이지에 Kanban을 생성하는 방법을 단계별로 안내합니다. 아래 단계를 따라 사용 준비가 완료된 컴포넌트를 만들 수 있습니다.

소스 파일 포함하기

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

Kanban을 생성하려면 두 개의 소스 파일을 페이지에 포함해야 합니다.

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

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

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

index.html
<div id="root"></div>

Toolbar와 함께 위젯을 생성하려면, 별도의 컨테이너도 추가해야 합니다.

index.html
<div id="toolbar"></div> // Toolbar용 컨테이너
<div id="root"></div> // Kanban용 컨테이너

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

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

Toolbar와 함께 위젯을 생성하려면, kanban.Toolbar 생성자를 별도로 사용해 초기화해야 합니다. 이 생성자도 두 개의 파라미터를 받습니다.

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

new kanban.Toolbar("#toolbar", {
    // 설정 속성
});

정보

Kanban의 Toolbar 구성에 대해 더 자세히 알고 싶다면 Configuration 섹션을 참고하세요.

노트

Kanban의 전체 설정 속성 목록은 여기에서 확인할 수 있습니다.
Kanban의 Toolbar 설정 속성 전체 목록은 여기에서 확인할 수 있습니다.

아래 코드 스니펫에서는 초기 데이터와 함께 Kanban을 초기화하는 방법을 확인할 수 있습니다.