Перейти к основному содержимому

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

В этом руководстве вы найдете подробные инструкции по созданию Kanban на странице для расширения вашего приложения возможностями Kanban-доски. Выполните следующие шаги, чтобы получить готовый к использованию компонент:

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

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

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

Для создания Kanban необходимо подключить 2 исходных файла на страницу:

  • 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, необходимо добавить для него отдельный контейнер:

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

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

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

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

Если вы хотите создать виджет вместе с Toolbar, его необходимо инициализировать отдельно с помощью конструктора kanban.Toolbar. Он также принимает два параметра:

  • HTML-контейнер (ID HTML-контейнера)
  • объект с конфигурационными свойствами
index.html
// создание Kanban
const board = new kanban.Kanban("#root", {
    // конфигурационные свойства
});

new kanban.Toolbar("#toolbar", {
    // конфигурационные свойства
});
информация

Чтобы узнать больше о настройке Toolbar для Kanban, прочитайте раздел Configuration

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

заметка

Полный список свойств для настройки Kanban можно найти здесь.
Полный список свойств для настройки Toolbar для Kanban можно найти здесь.

Пример​

В этом примере показано, как инициализировать Kanban с начальными данными: