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

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

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

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

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

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

Для работы Kanban достаточно добавить на страницу два файла:

  • kanban.js
  • kanban.css

Убедитесь, что пути к этим файлам указаны верно:

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

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

Добавьте элемент-контейнер для Kanban и присвойте ему ID, например, "root":

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

Если вы хотите, чтобы доска Kanban имела 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 можно узнать в разделе Конфигурация.

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

заметка

Полный список опций конфигурации для Kanban доступен здесь.
Полный перечень свойств для Toolbar в Kanban смотрите здесь.

Пример​

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