Skip to main content

cardTemplate

Description

Optional. Returns and applies a new HTML template of the card

Usage

function cardTemplate ({ cardFields, selected, dragging, cardShape }){
return "HTML template of the card";
};

Parameters

  • cardFields - gets the data object of the card
  • selected - gets the selecting state of the card
  • dragging - gets the dragging state of the card
  • cardShape - gets the configuration object of the card

Example

function cardTemplate({ cardFields, selected, dragging, cardShape }){
const { label, color } = cardFields;
if (selected) {
return `
<div className="custom-card" style={{padding: '20px'}}>
<div className="status-color" style={{background: '${color}'}}></div>
Selected:${label}
</div>
`;
}
return `
<div className="custom-card" style={{padding: '20px'}}>
<div className="status-color" style={{background: '${color}'}}></div>
${label}
</div>
`;
}

new kanban.Kanban("#root", {
cards,
columns,
cardTemplate
// other parameters
});

Related articles: Customization

Related sample: Kanban. Custom card