SwimlaneModel

Represents a single swimlane on a TaskBoard.

When creating a TaskBoard, you can optionally supply an initial set of swimlanes. These are either defined as plain strings, SwimlaneModel data objects or SwimlaneModel records (or a mix thereof). When using strings, the string will be used as is as the swimlane's id and capitalized as its text.

const highPrio = new SwimlaneModel({
    id   : 'high',
    text : 'High prio'
});

const taskBoard = new TaskBoard({
    swimlanes : [
        // String, equal to passing { id : 'low', text : 'Low' }
        'low',
        // Data object, in this case with a fixed height and not collapsible from the UI
        { id : 'medium', text : 'Medium', height : 200, collapsible : false }
        // Record, not commonly used since it is easier to supply the data object directly
        highPrio
    ]
});

No results

Fields

Fields belong to a Model class and define the Model data structure

collapsed : Boolean

READONLY

Collapsed (true) or expanded (False).

To expand or collapse, use TaskBoards expand and collapse functions.
collapsible : Boolean

Allow collapsing this swimlane
color : 'red'/'pink'/'magenta'/'purple'/'violet'+ 17 more
Color, named colors are applied as a b-color-{color} (for example b-color-red) CSS class to the swimlane. Colors specified as hex, rgb() etc. are also accepted.

By default it does not visually affect the UI, but it applies a primary color (sets the --b-primary CSS variable) to the swimlane that applications can leverage to style it in the desired way.

Using named colors:
```
const taskBoard = new TaskBoard({
    swimlanes : [
        { id : 'high', text : 'High', color : 'red' }
    ]
});
```
Will result in:
```
<div class="b-task-board-swimlane b-color-red">
```
Which can the be used for example like:
```
.b-task-board-swimlane-header {
    border-left : 5px solid var(--b-primary);
}
```
Using non-named colors:
```
const taskBoard = new TaskBoard({
    swimlanes : [
        { id : 'high', text : 'High', color : 'hsl(229deg 66% 42%)' }
    ]
});
```
Will result in:
```
<div class="b-task-board-swimlane" style="--b-primary: hsl(229deg 66% 42%)">
```
Predefined named colors:

red

pink

magenta

purple

violet

deep-purple

indigo

blue

light-blue

cyan

teal

green

light-green

lime

yellow

orange

amber

deep-orange

light-gray

gray
flex : Number

Swimlane flex, affects height.
height : Number

Swimlane height in px.
hidden : Boolean

Set to true to hide the swimlane, false to show it again.
id : String/Number

The swimlane's unique id, used to match a task to a swimlane (which field on a task to match is specified using then swimlaneField config on TaskBoard).
tasksPerRow : Number

Number of tasks per row to display in this swimlane. Leave blank to use the setting from the tasksPerRow config on TaskBoard.
text : String

Text displayed in the swimlane header.

Properties

Properties are getters/setters or publicly accessible variables on this class

isSwimlaneModel : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of SwimlaneModel class, or subclass thereof.

tasks : TaskModel[]

READONLY

Get tasks in this swimlane.
isSwimlaneModel : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of SwimlaneModel class, or subclass thereof.

Functions

Functions are methods available for calling on the class

collapse( )
: Promise

ASYNC

Collapse this swimlane.

Uses a transition by default, await the call to be certain that it has finished.
expand( )
: Promise

ASYNC

Expand this swimlane.

Uses a transition by default, await the call to be certain that it has finished.

Source path

TaskBoard/model/SwimlaneModel.js

SwimlaneModel

Fields

Properties

Functions

Source path

Inheritance tree3

Mixins3

Contents