Initialization

Here's how to quickly set up Kanban on a page and add all the board features to your app. Just follow these steps to get the component working:

1. Include the Kanban source files on a page.
2. Create a container for Kanban.
3. Initialize Kanban with a constructor.

Including source files

First, download the package and unpack it somewhere in your project folder.

For Kanban to work, just add these two files to your page:

• kanban.js
• kanban.css

Make sure the paths to those files are correct:

index.html

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

Creating container

Add a container element for Kanban and assign it an ID, like "root":

index.html

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

If you want the Kanban board to have a Toolbar, add a separate container for it as well:

index.html

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

Initializing Kanban

Kanban gets initialized using the kanban.Kanban constructor. It expects two arguments:

• an HTML container (the ID of the HTML container)
• an object with configuration properties. See the full list here

index.html

// create Kanban
new kanban.Kanban("#root", {
    // configuration properties
});

If you're adding a Toolbar as well, initialize it separately with the kanban.Toolbar constructor. It also needs two arguments:

• an HTML container (the ID of the HTML container)
• an object with configuration properties

index.html

// create Kanban
const board = new kanban.Kanban("#root", {
    // configuration properties
});

new kanban.Toolbar("#toolbar", {
    // configuration properties
});

info

More details on setting up the Kanban Toolbar can be found in the Configuration section.

Configuration properties

note

A complete list of configuration options for Kanban is available here.
The full list of properties for the Toolbar of Kanban is here.

Example

Here's a snippet that shows Kanban being initialized with some starting data: