ProgressItem

Item displaying a progress bar.

Progress is determined by the value of the configured field. A max value (defaults to 100) can be configured using the max config.

Progress item
//<code-header>
fiddle.title = 'Progress item';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false
    },

    bodyItems : {
        progress : {
            type : 'progress',
            max  : 100
        }
    },

    columns : [
        { id : 'todo', text : 'Todo', color : 'blue' },
        { id : 'doing', text : 'Doing', color : 'orange' },
        { id : 'done', text : 'Done', color : 'green' }
    ],

    columnField : 'status',

    project : {
        tasks : [
            {
                id       : 1,
                name     : 'Learn Angular',
                status   : 'doing',
                progress : 40
            },
            {
                id       : 2,
                name     : 'Learn React',
                status   : 'done',
                progress : 100
            },
            {
                id       : 3,
                name     : 'Learn Vue',
                status   : 'todo',
                progress : 10
            }
        ]
    }
});

Configs

7
editor: String | Object= null

Widget type or config to use as the editor for this item. Used in the inline task editor.

ProgressItems are un-editable by default.

max: Number= 100

Max value, at which the bar is full.

const taskBoard = new TaskBoard({
   bodyItems : {
       progress : { type : 'progress', max : 10 }
   },

   project : {
       tasks : [
           { id : 1, name : 'Task #1', progress : 9 }
       ]
   }
});

// Task #1 bar is 9/10 filled
clsTaskItem
fieldTaskItem
hiddenTaskItem
orderTaskItem
styleTaskItem

Properties

2
isProgressItem: Boolean= truereadonly
Identifies an object as an instance of ProgressItem class, or subclass thereof.
isProgressItem: Boolean= truereadonlystatic
Identifies an object as an instance of ProgressItem class, or subclass thereof.

Typedefs

1

CSS variables

5
NameDescription
--b-task-board-progress-item-backgroundBackground for the unfilled part of the progress bar
--b-task-board-progress-item-heightHeight of the progress bar
--b-task-board-progress-item-borderBorder for the progress bar
--b-task-board-progress-item-border-radiusBorder radius for the progress bar
--b-task-board-progress-item-colorColor for the filled part of the progress bar