Компонент Kanban-доски для Angular | ng-hub-ui-board

Компонент Kanban-доски для Angular с drag and drop, пользовательскими шаблонами карточек, потоками по столбцам и CSS-переменными для бизнес-дашбордов.

Последнее обновление 16 сент. 2026 г.

Обзор

Почему команды ищут эту библиотеку

Этот компонент доски для Angular помогает выпускать рабочие процессы в стиле Kanban с drag and drop, гибкими шаблонами и масштабируемыми паттернами взаимодействия для реальных бизнес-инструментов.

Установка

npm install ng-hub-ui-board

Перейти к

Идеально для

  • доски задач
  • отслеживание пайплайнов
  • CRM-процессы
  • операционные дашборды

О библиотеке board

ng-hub-ui-board спроектирован для продуктов на Angular, которым нужно нечто большее, чем статичный список: отслеживание задач, CRM-пайплайны, потоки поддержки или внутренние операционные дашборды. Он сохраняет гибкость рендеринга карточек, не теряя при этом согласованную модель взаимодействия с доской.

Руководства по возможностям

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

Основные возможности board

Примеры:
Базовый пример доски

Базовый пример доски

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.

Взаимодействия

Возможности взаимодействия с пользователем

Примеры:
Перетаскивание карточек

Перетаскивание карточек

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.

Last Event: None

Изменение порядка столбцов

Изменение порядка столбцов

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.

Last Reorder: None

Событие клика по карточке

Событие клика по карточке

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.

Last Clicked: None

События доски

События доски

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.

Event Log

No events yet. Interact with the board!
Клавиатура и скринридер

Клавиатура и скринридер

Tab to a card, then press Space or Enter to grab it, the arrow keys to move it within or across columns, Space / Enter to drop it and Esc to cancel. A visually hidden aria-live="polite" region announces every grab, move, drop and rejection, and boardLabel gives the board its accessible name.

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.

Moves committed from the keyboard (same payload as a pointer drop):

  • No move yet.

Расширенные возможности

Прокрутка и расширенное поведение

Примеры:
Бесконечная прокрутка

Бесконечная прокрутка

To Do
Research

Analyze requirements

Design

Create UI mockups

Scroll Item 1

Scroll to see more

Scroll Item 2

Scroll to see more

Scroll Item 3

Scroll to see more

Scroll Item 4

Scroll to see more

Scroll Item 5

Scroll to see more

Scroll Item 6

Scroll to see more

Scroll Item 7

Scroll to see more

Scroll Item 8

Scroll to see more

Scroll Item 9

Scroll to see more

Scroll Item 10

Scroll to see more

Scroll Item 11

Scroll to see more

Scroll Item 12

Scroll to see more

Scroll Item 13

Scroll to see more

Scroll Item 14

Scroll to see more

Scroll Item 15

Scroll to see more

Scroll Item 16

Scroll to see more

Scroll Item 17

Scroll to see more

Scroll Item 18

Scroll to see more

Scroll Item 19

Scroll to see more

Scroll Item 20

Scroll to see more

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.

Last Scroll End: None

Шаблоны

Настройка внешнего вида

Примеры:
Пользовательский шаблон карточки

Пользовательский шаблон карточки

To Do
Research
Analyze requirements
ID: 1
Design
Create UI mockups
ID: 2
In Progress
Development
Implement core features
ID: 3
Done
Planning
Initial meeting
ID: 4
Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
Пользовательский шаблон заголовка

Пользовательский шаблон заголовка

To Do2
Research

Analyze requirements

Design

Create UI mockups

In Progress1
Development

Implement core features

Done1
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
Пользовательский шаблон подвала

Пользовательский шаблон подвала

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
Пользовательский заполнитель карточки

Пользовательский заполнитель карточки

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
Last action: Drag a card to see the custom placeholder
Пользовательский заполнитель столбца

Пользовательский заполнитель столбца

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
Last action: Drag a column to see the custom placeholder
Пользовательский предпросмотр перетаскивания

Пользовательский предпросмотр перетаскивания

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
Last action: Drag a card or column to see the custom preview

Конфигурация

Параметры конфигурации board

Примеры:
Отключение сортировки

Отключение сортировки

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
Режимы поведения при перетаскивании

Режимы поведения при перетаскивании

Try dragging cards or columns with different behaviors to see how the original element appears during drag.
To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
Current Behavior: collapse
  • Collapse: The element completely disappears and its space is removed from the layout
  • Best for: Clean interface where you only want to see the placeholder at the destination

Стилизация

Настройка внешнего вида через CSS-переменные

Примеры:
Настройка CSS

Настройка CSS

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.

Ключевые возможности

Последние изменения

Version 22.6.1 - 9/16/26, 12:00 AM

changed: Repository, issue and README links follow the move to the hub-env organization. Issues for every Hub UI package are now gathered in hub-env/hub-ui, and the repository and bugs fields of the manifest point at the new addresses. No code, types or styles change.

Version 22.6.0 - 9/8/26, 12:00 AM

changed: BREAKING — the module and the seven template directives are renamed with the Hub prefix: BoardModule becomes HubBoardModule, and CardTemplateDirective, BoardColumnHeaderDirective, BoardColumnFooterDirective, CardPlaceholderDirective, ColumnPlaceholderDirective, CardDragPreviewDirective and ColumnDragPreviewDirective gain the same prefix. CardTemplateDirective is a name any application with cards in it will want, and an unprefixed export claims it inside the consumer’s namespace rather than the library’s. HubBoardComponent already carried the prefix, so the component and the directives that exist only to feed it were spelled two ways in one import list. The selectors are untouched, so no markup changes. All eight old names stay exported as deprecated aliases resolving to the same classes and are removed in 23.0.0. See BREAKING_CHANGES.md.

changed: BREAKING — the colour pipe is HubBoardInvertColorPipe, and answers to hubBoardInvertColor in a template. A pipe’s template name is the one part a consumer cannot rename around, and invertColor took an unprefixed name in the application’s own template namespace. The prefix alone would not have been enough, since ng-hub-ui-forms already publishes HubInvertColorPipe under hubInvertColor, so the library’s name goes in the middle. InvertColorPipe survives as a deprecated subclass still answering to invertColor and is removed in 23.0.0, so migrating means changing the template as well as the import. See BREAKING_CHANGES.md.

changed: ng-hub-ui-ds is declared as an optional peer dependency, >=22.0.0. The stylesheet has themed against --hub-sys-* for several releases, every read already carrying its own fallback, and the manifest never said so: nothing warned that a ng-hub-ui-ds older than the --hub-ref-* / --hub-sys-* architecture would leave the board on those fallbacks, and a reader of the manifest had no way to learn that the token package is what turns the theme on. No code, types or styles change.

fixed: Both READMEs name the classes that ship. Every import block, every section heading and the legacy-module snippet still used the old names, so a reader copying the documented import wrote code that compiles only against the deprecated aliases, which is precisely the audience this rename exists to move.

Version 22.5.2 - 9/6/26, 12:00 AM

fixed: The columns are now the items of the board list. role="list" sat on the host, but its children were two role-less wrappers, the hidden keyboard hint and the live region, so the required-owned-elements chain broke and a screen reader read the board as a list with no items. The list now lives on the columns track, each column container is its listitem, and the column group semantics (role="group", its aria-label and its stable id) moved onto the column itself, which leaves the hint and the announcer outside the list. The host keeps its aria-label and becomes a region, so boardLabel still names the board and a screen-reader user can reach it without the consumer adding a heading of their own.

fixed: BoardModule now exports CardDragPreviewDirective and ColumnDragPreviewDirective. Both are public API and both are documented in the README with no caveat, but neither was in the module, so a consumer who took the documented Module Import (Legacy) route got an <ng-template cardDragPreview> that matched no directive. Nothing failed out loud: the template was simply ignored and the default preview rendered, which is the worst way for an option to not work.

fixed: The documentation now describes the component that ships. Both READMEs promised things the code does not do and hid things it does: a CC BY 4.0 licence that the 22.5.0 relicense had already replaced with MIT, a @use of a stylesheet removed in 21.1.0, a card template bound to let-card="card" when the context key is item (so the snippet rendered an empty card), board typed as Signal<Board> when the input takes a plain Board, a primary default on a variant that has none, EventEmitter where the outputs are output(), a BoardColumn block missing the very predicate the keyboard section relies on, and a virtual scrolling feature that is only end-of-column detection. Each one is a reader copying a line that fails to compile or silently renders nothing.

fixed: FUNCTIONALITIES.md no longer lists a configurable scroll-detection padding. It is a private constant, not an input, so the row promised an API that has never existed.

Version 22.5.1 - 9/1/26, 12:00 AM

changed: The package homepage now points at this library's own documentation page instead of the site root, so the link a registry shows beside the package lands on the reference the reader was already looking for. Metadata only.

Version 22.5.0 - 8/17/26, 12:00 AM

changed: Relicensed from CC-BY-4.0 to MIT. CC licences are not meant for software: no patent grant, no source-distribution terms and an attribution requirement with no defined meaning for code that ends up inside a bundle. MIT grants strictly more, so nobody who took an earlier version loses anything.

Version 22.4.1 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.4.0 - 7/28/26, 12:00 AM

added: ARIA list semantics: the board host is role="list" named by the new boardLabel input, each column is a labelled role="group", each column body a role="list" and each card a role="listitem".

added: Keyboard card reorder: Space/Enter grabs a focused card, ArrowUp/ArrowDown move it within its column and ArrowLeft/ArrowRight to the adjacent column (honouring the same predicate/cardSortingDisabled rules as dragging), Space/Enter drops emitting the same onCardMoved payload as a pointer drop, and Escape cancels restoring the original position.

added: Visually hidden aria-live="polite" announcer for grab, move, drop, cancel and rejected targets (messages are English-only for now), plus a hidden usage hint linked from each focusable card.

added: New optional boardLabel input: accessible name of the board list container (default 'Board').

Version 22.3.0 - 7/7/26, 12:00 AM

changed: BREAKING (packaging): the theme SCSS now ships at ng-hub-ui-board/styles (was dist/board/src/lib/styles), so @use 'ng-hub-ui-board/styles' resolves — update any @use that reached into src/lib/styles.

changed: variant now accepts any colour: besides the built-in semantic accents, a registered custom accent or a literal colour (#hex, rgb(), oklch(), CSS named colour) is resolved through the shared resolveHubAccent helper from ng-hub-ui-utils.

changed: Internal: @HostBinding/@HostListener decorators replaced by the host metadata object (Angular style guide); no public API or behaviour change.

Version 22.2.1 - 7/2/26, 12:00 AM

fixed: Docs: css-variables-reference.md default values resynchronized with the actual code declarations, now guarded by the repo-level tokens-parity check.

Version 22.2.0 - 6/26/26, 12:00 AM

changed: Accent system migrated to the open-set local accent slot pattern: variant re-bases a single --hub-board-accent slot and the emphasis/subtle/on family is derived locally with color-mix, growing the built-in variants from 5 to the nine canonical accents and letting any custom ds accent recolour the drag/drop placeholder at runtime.

added: New tokens --hub-board-accent-on (grayscale contrast flip driven by the accent lightness) and --hub-board-accent-emphasis.

fixed: Accent color-mix derivation for --hub-board-accent-subtle migrated from srgb to oklch for perceptually uniform tints; the subtle tint is now derived at 12% (was 8%).

Связанные библиотеки

Часто задаваемые вопросы

Как сделать канбан-доску с перетаскиванием в Angular?

Установите ng-hub-ui-board и привяжите объект Board, описывающий его колонки и карточки. Перетаскивание карточек между колонками и изменение порядка колонок работает без дополнительной настройки; события перетаскивания возвращают перемещённую BoardCard вместе с исходной и целевой BoardColumn, так что изменение вы сохраняете в своём хранилище или API.

Можно ли настроить внешний вид каждой карточки канбана?

Да. ng-hub-ui-board отрисовывает карточки через шаблоны, которые предоставляете вы, поэтому карточка может содержать любую разметку — аватары, теги, прогресс, действия. HubBoardColumnHeaderDirective и HubBoardColumnFooterDirective делают то же самое для верха и низа каждой колонки, не затрагивая поведение перетаскивания.

Как узнать, в какую колонку перемещена карточка?

Доска отправляет BoardDragDropEvent при каждом сбросе. В нём есть перетащенный элемент, колонка, откуда он взят, и колонка, куда он попал, а также новый индекс. Именно это вы отправляете на свой бэкенд; сама доска ничего не сохраняет.

Работает ли канбан-доска Angular на сенсорных устройствах?

Да. Перетаскивание построено на примитивах drag-and-drop из Angular CDK, которые обрабатывают ввод мышью, касанием и пером, поэтому на планшетах и телефонах доска ведёт себя так же, как на десктопе.