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

Кастомизация

Вы можете кастомизировать внешний вид и поведение Kanban с помощью следующих свойств:

Кастомные карточки​

Используйте свойство cardTemplate для отображения карточек с помощью кастомного HTML-шаблона. Колбэк возвращает разметку для каждой карточки.

Колбэк принимает объект со следующими параметрами:

  • cardFields — данные карточки
  • selected — выбрана ли карточка
  • dragging — перетаскивается ли карточка в данный момент
  • cardShape — конфигурация карточки

Чтобы встроить элемент вызова контекстного меню в кастомный шаблон карточки, оберните иконку меню в <div> с атрибутом data-menu-id=${cardFields.id} (аналогично встроенной карточке). Виджет привязывает меню к обёртке через этот атрибут.

Следующее демо применяет кастомный шаблон карточки:

Кастомное контекстное меню​

Настройте контекстное меню карточек, колонок и строк через свойства cardShape.menu, columnShape.menu и rowShape.menu. Каждый элемент menu.items может использовать встроенный идентификатор действия для вызова стандартной операции или определять кастомный обработчик onClick для любого другого поведения.

cardShape.menu​

По умолчанию меню карточки содержит опции Дублировать и Удалить. Доступные встроенные идентификаторы действий:

  • "duplicate-card" — дублировать карточку
  • "delete-card" — удалить карточку

columnShape.menu​

  • "add-card" — добавить новую карточку в колонку
  • "set-edit" — переименовать колонку
  • "move-column:left", "move-column:right" — переместить колонку влево или вправо
  • "delete-column" — удалить колонку

rowShape.menu​

  • "set-edit" — переименовать строку
  • "move-row:up", "move-row:down" — переместить строку вверх или вниз
  • "delete-row" — удалить строку

Задайте menu.items как функцию, чтобы отображать разное меню для каждой карточки, колонки или строки. Верните null или false из функции, чтобы скрыть меню для конкретного элемента.

Следующее демо применяет кастомное контекстное меню:

Кастомные заголовки колонок​

Свойство columnShape предоставляет шаблоны и настройки поведения заголовков колонок:

  • columnShape.headerTemplate — HTML-шаблон заголовка колонки в развёрнутом состоянии
  • columnShape.collapsedTemplate — HTML-шаблон заголовка колонки в свёрнутом состоянии
  • columnShape.fixedHeaders — фиксация заголовков колонок при вертикальной прокрутке (по умолчанию: true)

Следующий фрагмент кода задаёт кастомный шаблон заголовка с иконкой сворачивания, подписью с количеством карточек и элементом вызова меню:

new kanban.Kanban("#root", {
    columns,
    cards,
    columnShape: {
        headerTemplate: kanban.template(({ column, columnState }) => {
            return `<div className="wx-collapse-icon" data-action="collapse">
                        <i className="${column.collapsed ? "wxi-angle-right" : "wxi-angle-left"}"></i>
                    </div>
                    ${!column.collapsed
                        ? `<div className="wx-label" data-action="rename">
                                ${column.label} (${columnState.cardsCount})
                            </div>
                            <div className="wx-menu" data-menu-id="${column.id}">
                                <i className="wxi-dots-h"></i>
                            </div>`
                        : ""}`;
        }),
        collapsedTemplate: kanban.template(({ column }) => `<div className="wx-collapsed-label">${column.label}</div>`)
    }
});
совет

Чтобы fixedHeaders вступил в силу, задайте фиксированную высоту контейнера Kanban — тогда доска будет прокручиваться по вертикали.

Условные CSS-классы​

Чтобы применять CSS-класс условно, передайте функцию в параметр css свойства cardShape, columnShape или rowShape. Функция возвращает имя класса на основе текущих данных:

Следующий фрагмент кода выделяет просроченные карточки и недозагруженные колонки:

new kanban.Kanban("#root", {
    columns,
    cards,
    cardShape: {
        css: (card) => card.end_date < new Date() ? "overdue" : ""
    },
    columnShape: {
        css: (column, cards) => cards.length < 5 ? "low-load" : ""
    }
});

Кастомный Toolbar​

Используйте свойство items для кастомизации структуры Toolbar. Массив определяет, какие элементы управления отображаются, их порядок и поведение. Элемент может быть:

  • встроенным элементом управления: "search", "sort", "undo", "redo", "addColumn", "addRow", "spacer"
  • объектом, переопределяющим поисковую строку или элемент сортировки с кастомными параметрами
  • кастомным элементом управления, переданным в виде строкового идентификатора или функции

Следующее демо кастомизирует порядок элементов управления, поисковую строку, элемент сортировки и кастомный элемент:

Кастомные стили​

Изменяйте значения CSS-переменных для кастомизации внешнего вида Kanban. Полный список переменных смотрите в разделе Стилизация.

В следующем примере показано, как применить кастомные стили к Kanban:

Need more help?Contact Support