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
]
});
Properties
63
Properties
63Class hierarchy
Other
Editing
JSON
Parent & children
Functions
56
Functions
56Expand/collapse
Collapse this swimlane.
Uses a transition by default, await the call to be certain that it has finished.
A promise which is resolved when the column is collapsed
Expand this swimlane.
Uses a transition by default, await the call to be certain that it has finished.
A promise which is resolved when the column is expanded
Configuration
Editing
Events
Other
Parent & children
Typedefs
1
Typedefs
1Fields
9
Fields
9Allow collapsing this swimlane
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:
Swimlane flex, affects height.
Swimlane height in px.
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).
Number of tasks per row to display in this swimlane. Leave blank to use the setting from the tasksPerRow config on TaskBoard.
Text displayed in the swimlane header.