ImageItem

Item displaying an image.

Loaded from the configured field, optionally prepended with a baseUrl.

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

    features : {
        columnToolbars : false
    },

    bodyItems : {
        image : {
            type    : 'image',
            baseUrl : 'data/Core/images/logo/'
        }
    },

    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',
                image  : 'angular.svg'
            },
            {
                id     : 2,
                name   : 'Learn React',
                status : 'done',
                image  : 'react.svg'
            },
            {
                id     : 3,
                name   : 'Learn Vue',
                status : 'todo',
                image  : 'vue.svg'
            }
        ]
    }
});

Configs

8
altField: String= null

A field on the TaskModel to use as the alt attribute of the image node.

baseUrl: String

Url prepended to this items value.

const taskBoard = new TaskBoard({
   bodyItems : {
       picture : { type : 'image', baseUrl : 'images/' }
   },

   project : {
       tasks : [
           { id : 1, name : 'Task #1', picture : 'photo.jpg' },
           { id : 2, name : 'Task #2', picture : 'image.jpg' }
       ]
   }
});

// Card for task #1 will render image "images/photo.jpg"
// Card for task #2 will render image "images/image.jpg"
editor: String | Object= null

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

ImageItems are un-editable by default.

clsTaskItem
fieldTaskItem
hiddenTaskItem
orderTaskItem
styleTaskItem

Properties

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

Typedefs

1