Перейти к основному содержимому

columns

Описание​

Необязательно. Массив объектов, содержащих данные колонок

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

columns?: [
    {
        id: string,
        label?: string,
        collapsed?: boolean,
        limit?: number | object,
        strictLimit?: boolean,
        css?: string,
        overlay?: any
    },
    {...} // другие данные колонок
];

Параметры​

Каждая колонка может быть настроена с помощью следующих свойств (данных):

  • id - (обязательно) уникальный ID колонки. Используется для управления колонкой через связанные методы.
  • label - (необязательно) название, отображаемое в заголовке колонки.
  • collapsed - (необязательно) указывает начальное состояние колонки. Если true, колонка открывается свернутой. По умолчанию false (развернута).
  • limit - (необязательно) может быть двух типов:
    • number - задаёт максимальное количество карточек, разрешённых в колонке.
    • object - определяет лимиты карточек для каждой строки (swimlane) по их ID.
  • strictLimit - (необязательно) включает строгий контроль лимита. Если true, пользователи не смогут добавить больше карточек, чем указано в параметре limit. По умолчанию false.
  • css - (необязательно) применяет кастомные CSS-стили к отдельной колонке.
  • overlay - (необязательно) добавляет слой оверлея к колонке. Полезно для определения шаблона, покрывающего колонку, например:
    overlay: template(`
        <div className="blockOverlay disable-drop">
            <span className="disable-drop-header">Drop is not allowed</span>
            <span className="disable-drop-description">Only testers can move cards to this
                column</span>
        </div>`)
информация

Для динамического обновления данных колонок можно использовать метод parse().

Пример​

const columns = [
    {
        label: "Backlog",
        id: "backlog",
        collapsed: true,
        limit: 3,
        strictLimit: true,
        css: "red"
    },
    {
        label: "In progress",
        id: "inprogress",
        collapsed: false,
        limit: {
            // ограничивает количество карточек для строк "Feature" и "Task" в колонке "In progress"
            feature: 3,
            task: 2
        },
        strictLimit: false
    },
    {
        label: "Done",
        id: "done",
        overlay: template(`
            <div className="blockOverlay disable-drop">
                <span className="disable-drop-header">Drop is not allowed</span>
                <span className="disable-drop-description">Only testers can move cards to this
                    column</span>
            </div>`)
    }
];

new kanban.Kanban("#root", {
    columns,
    cards,
    rows,
    // другие параметры
});

Изменения: Свойства css и overlay были добавлены в версии 1.4.

Связанные статьи:

Связанные примеры: