cardTemplate
Description
Optional. Generates and applies a custom HTML template for the card.
Usage
function cardTemplate ({ cardFields, selected, dragging, cardShape }){
return "HTML template of the card";
};
Parameters
The callback function receives an object with these properties:
cardFields
- contains the card's dataselected
- indicates if the card is selecteddragging
- indicates if the card is being draggedcardShape
- the card's configuration object
important
To add a context menu to the card template, include a custom icon in the markup and use the data-menu-id=${cardFields.id}
attribute as shown in the example below.
Example
const cardTemplate = ({ cardFields, selected, dragging, cardShape }) => {
const { label, color, id } = cardFields;
if (selected) {
return `
<div className="custom-card" style={{padding: '20px'}}>
<div className="status-color" style={{background: '${color}'}}></div>
<div data-menu-id=${id} >
<i className="wxi-dots-v"></i>
</div>
Selected:${label}
</div>
`;
}
return `
<div className="custom-card" style={{padding: '20px'}}>
<div className="status-color" style={{background: '${color}'}}></div>
<div data-menu-id=${id} >
<i className="wxi-dots-v"></i>
</div>
${label}
</div>
`;
}
new kanban.Kanban("#root", {
cards,
columns,
cardTemplate: kanban.template(card => cardTemplate(card)),
// other parameters
});
Change log: Context menu support was introduced in v1.4
Related articles: Customization
Related sample: Kanban. Custom card