cardTemplate

Описание

Опционально. Генерирует и применяет пользовательский HTML-шаблон для карточки.

Использование

function cardTemplate ({ cardFields, selected, dragging, cardShape }){
    return "HTML шаблон карточки";
};

Параметры

Функция обратного вызова получает объект со следующими свойствами:

• cardFields - содержит данные карточки
• selected - указывает, выбрана ли карточка
• dragging - указывает, перетаскивается ли карточка
• cardShape - объект конфигурации карточки

important

Чтобы добавить контекстное меню к шаблону карточки, включите в разметку пользовательскую иконку и используйте атрибут data-menu-id=${cardFields.id}, как показано в примере ниже.

Пример

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>
                Выбрано:${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)),
    // другие параметры
});

История изменений: Поддержка контекстного меню была добавлена в версии v1.4

Связанные статьи: Кастомизация

Связанный пример: Kanban. Пользовательская карточка