cardShape
Description
Optional. An object of settings for managing the cards appearance
Usage
cardShape?: {
label: boolean | { show?: boolean },
description?: boolean | { show?: boolean },
progress?: boolean | { show?: boolean },
start_date?: boolean | { show?: boolean },
end_date?: boolean | { show?: boolean },
menu?: boolean | { show?: boolean },
attached?: boolean | { show?: boolean },
cover?: boolean | { show?: boolean },
color?: boolean | {
show?: boolean,
values?: array
},
users?: boolean | {
show?: boolean,
values?: [
{
id: string | number,
label?: string,
path?: string
},
{...} // other users data
]
},
priority?: boolean | {
show?: boolean,
values?: [
{
id: string | number,
label?: string,
color: string
},
{...} // other priorities data
]
},
headerFields?: [
{
key: string,
label?: string,
css?: string
},
{...} // other fields data
]
};
Parameters
info
In some cases, you can set the parameter to the short or extended value. See the code below:
label: boolean | { show?: boolean }
// short value
label: true
// or
// full value
label: { show: true }
To configure the card appearance, in the cardShape object you can specify the following parameters (fields):
label
- (required) shows/hides a card labeldescription
- (optional) shows/hides a card descriptionprogress
- (optional) shows/hides a card progress barstart_date
- (optional) shows/hides a card start dateend_date
- (optional) shows/hides a card end datemenu
- (optional) shows/hides a card menuattached
- (optional) shows/hides a card attachmentcover
- (optional) shows/hides a card picturecolor
- (optional) an object of parameters of the top color line of cardshow
- (optional) shows/hides a top color linevalues
- (optional) an array of valid HEX codes
users
- (optional) an object with users parametersshow
- (optional) shows/hides the assigned users datavalues
- (optional) an array of objects with users data. Here you can specify the following fields:id
- (required) a user IDlabel
- (optional) a user namepath
- (optional) a path to the user picture
priority
- (optional) an object with priorities parametersshow
- (optional) shows/hides a card priorityvalues
- (optional) an array of objects with priorities data. Here you can specify the following fields:id
- (required) a priority IDlabel
- (optional) a priority namecolor
- (required) a valid HEX code
headerFields
- (optional) an array of objects with custom fields data. Here you can specify the following parameters:key
- (required) a key of the custom field. It is used when configuring the Editor via the editorShape propertylabel
- (optional) a label of the custom fieldcss
- (optional) a css class of the custom field
info
Unless you specify the cards settings via the cardShape property, the widget will apply a defaultCardShape set of parameters!
Default config
const defaultPriorities = [
{ id: 1, color: "#FF5252", label: "high" },
{ id: 2, color: "#FFC975", label: "medium" },
{ id: 3, color: "#0AB169", label: "low" }
];
const defaultColors = ["#65D3B3", "#FFC975", "#58C3FE"];
const defaultCardShape = {
label: true,
description: false,
progress: false,
start_date: false,
end_date: false,
menu: true,
attached: false,
cover: false,
color: {
show: false,
values: defaultColors
},
users: false,
priority: {
show: false,
values: defaultPriorities
}
};
Example
const users = [ // users data
{ id: 1, label: "John Smith", path: "../assets/user.jpg" },
{ id: 2, label: "Aaron Short" }
];
const cardPriority = [ // card priority data
{ id: 1, color: "#FF5252", label: "high" },
{ id: 2, color: "#FFC975", label: "medium" },
{ id: 3, color: "#0AB169", label: "low" }
];
const cardColors = ["#65D3B3", "#FFC975", "#58C3FE"];
const cardShape = { // card settings
label: true,
description: true,
progress: true,
start_date: true,
end_date: true,
menu: true,
attached: true,
cover: false,
color: {
show: true,
values: cardColors
},
users: {
show: true,
values: users
},
priority: {
show: true,
values: cardPriority
},
headerFields: [
{ // custom field
key: "sprint",
css: "custom_style",
label: "Sprint"
}
]
};
new kanban.Kanban("#root", {
cards,
columns,
cardShape,
// other parameters
});
Change log: The color parameter (field) was updated in v1.1
Related articles: Configuration
Related sample: Kanban. Custom card