getCardHeight

Описание

Необязательно. Функция, возвращающая расчётную высоту карточки

Функция getCardHeight используется виджетом для оценки высоты карточек, когда свойство cardHeight не задано, а доска настроена с renderType: "lazy" и scrollType: "column". Расчётные высоты позволяют виджету корректно отрисовывать скроллбар до того, как фактические карточки измерены в DOM.

информация

Если вы задаёте свойство cardHeight, виджет использует фиксированную высоту и функция getCardHeight не вызывается. Задание cardHeight — рекомендуемый способ сочетания renderType: "lazy" с scrollType: "column".

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

getCardHeight?: (cardShape: object, card: object, cardWidth: number) => number;

Параметры

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

• cardShape - объект конфигурации карточки (свойство cardShape)
• card - объект данных карточки
• cardWidth - текущая ширина карточки в пикселях

Функция должна возвращать число — расчётную высоту карточки в пикселях.

Конфигурация по умолчанию

По умолчанию виджет использует встроенную функцию, которая приближённо вычисляет высоту карточки на основе видимых полей, объявленных в cardShape, и данных, хранящихся в карточке. Этот вариант по умолчанию подходит для досок, использующих встроенный лейаут карточек.

Если вы предоставляете кастомный cardTemplate, встроенное приближение не может предсказать фактическую высоту отрисованной разметки. В этом случае задайте кастомную функцию getCardHeight, возвращающую высоту отрисованного шаблона, или вместо неё укажите статический cardHeight.

Пример

В примере ниже задаётся кастомная функция getCardHeight для доски с кастомным шаблоном карточки:

const cardTemplate = ({ cardFields }) => {
    const { label, description } = cardFields;
    return `
        <div className="custom-card" style={{padding: '20px'}}>
            <div className="custom-label">${label}</div>
            <div className="custom-description">${description || ""}</div>
        </div>
    `;
};

new kanban.Kanban("#root", {
    cards,
    columns,
    renderType: "lazy",
    scrollType: "column",
    cardTemplate: kanban.template(card => cardTemplate(card)),
    getCardHeight: (cardShape, card, cardWidth) => {
        // оценить высоту кастомного шаблона
        let height = 60; // базовый отступ + строка метки
        if (card.description) {
            height += Math.ceil(card.description.length / 40) * 18;
        }
        return height;
    },
    // другие параметры
});

Связанные статьи: Конфигурация