Компонент Kanban-доски для Angular | ng-hub-ui-board
Компонент Kanban-доски для Angular с drag and drop, пользовательскими шаблонами карточек, потоками по столбцам и CSS-переменными для бизнес-дашбордов.
Последнее обновление 17 авг. 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
Взаимодействия
Возможности взаимодействия с пользователем
Примеры:
Перетаскивание карточек
Перетаскивание карточек
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Event: None
Изменение порядка столбцов
Изменение порядка столбцов
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Reorder: None
Событие клика по карточке
Событие клика по карточке
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Clicked: None
События доски
События доски
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Event Log
Расширенные возможности
Прокрутка и расширенное поведение
Примеры:
Бесконечная прокрутка
Бесконечная прокрутка
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
Last Scroll End: None
Шаблоны
Настройка внешнего вида
Примеры:
Пользовательский шаблон карточки
Пользовательский шаблон карточки
To Do
In Progress
Done
Пользовательский шаблон заголовка
Пользовательский шаблон заголовка
Research
Analyze requirements
Design
Create UI mockups
Development
Implement core features
Planning
Initial meeting
Пользовательский шаблон подвала
Пользовательский шаблон подвала
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Пользовательский заполнитель карточки
Пользовательский заполнитель карточки
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Пользовательский заполнитель столбца
Пользовательский заполнитель столбца
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Пользовательский предпросмотр перетаскивания
Пользовательский предпросмотр перетаскивания
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Конфигурация
Параметры конфигурации board
Примеры:
Отключение сортировки
Отключение сортировки
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Пользовательский отступ прокрутки
Пользовательский отступ прокрутки
Scroll detection padding is handled internally (default 1px). To inspect it, you would typically look at source code, but implementation details like specific padding override are not exposed as inputs in the current version of HubBoardComponent. This example shows a board that *could* use it if the API exposed it, or demonstrates the standard behavior. (Note: The library source code defines `scrollDetectionPadding = 1` as private readonly, so it cannot be customized via input currently.)
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Режимы поведения при перетаскивании
Режимы поведения при перетаскивании
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
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
Ключевые возможности
Последние изменения
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%).