Инициализация

Создайте виджет Kanban на странице в три шага:

1. Подключите исходные файлы.
2. Создайте контейнер.
3. Инициализируйте Kanban.

Подключение исходных файлов

Скачайте пакет и распакуйте содержимое в папку вашего проекта.

Подключите следующие исходные файлы на страницу:

• kanban.js
• kanban.css

Укажите правильные относительные пути к обоим файлам:

index.html

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

Создание контейнера

Добавьте контейнер для Kanban и задайте ему идентификатор, например root:

index.html

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

Чтобы создать виджет вместе с Toolbar, добавьте отдельный контейнер для Toolbar:

index.html

<div id="toolbar"></div> // контейнер для Toolbar
<div id="root"></div> // контейнер для Kanban

Инициализация Kanban

Инициализируйте Kanban с помощью конструктора kanban.Kanban. Конструктор принимает два параметра:

• CSS-селектор HTML-контейнера (или сам элемент контейнера)
• объект конфигурации (см. полный список свойств)

Следующий фрагмент кода создаёт экземпляр Kanban:

index.html

// создание Kanban
new kanban.Kanban("#root", {
    // конфигурационные свойства
});

Чтобы создать виджет вместе с Toolbar, инициализируйте Toolbar отдельно с помощью конструктора kanban.Toolbar. Элементы управления Toolbar взаимодействуют с экземпляром Kanban через параметр api. Передайте board.api, чтобы привязать Toolbar к доске:

index.html

// создание Kanban
const board = new kanban.Kanban("#root", {
    // конфигурационные свойства
});

new kanban.Toolbar("#toolbar", {
    api: board.api, // обязательно: связывает элементы управления Toolbar с экземпляром Kanban
    // другие конфигурационные свойства
});

К сведению

Подробнее о настройке Toolbar читайте в разделе Configuration.

Конфигурационные свойства

Полный справочник конфигурации:

• Обзор свойств Kanban — все конфигурационные свойства Kanban
• Обзор свойств Toolbar — все конфигурационные свойства Toolbar

Пример

Следующий пример инициализирует Kanban с тестовыми данными: