Компонент Kanban-доски для Angular | ng-hub-ui-board
Компонент Kanban-доски для Angular с drag and drop, пользовательскими шаблонами карточек, потоками по столбцам и CSS-переменными для бизнес-дашбордов.
Стили
Миксины и стили
Override any of the `--hub-board-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).
Theming with hub-board-theme
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Release
Ship to production
| Миксин | Параметры | Описание |
|---|---|---|
| Theming | ||
hub-board-theme() | $accent--hub-board-accent$container-bg--hub-board-container-bg$container-color--hub-board-container-color$border-color--hub-board-border-color$border-radius--hub-board-border-radius$columns-gap--hub-board-columns-gap$column-bg--hub-board-column-bg$column-color--hub-board-column-color$column-border-color--hub-board-column-border-color$column-border-radius--hub-board-column-border-radius$column-width--hub-board-column-width$column-header-bg--hub-board-column-header-bg$column-header-color--hub-board-column-header-color$card-bg--hub-board-card-bg$card-color--hub-board-card-color$card-border-color--hub-board-card-border-color$card-border-radius--hub-board-card-border-radius$card-padding-x--hub-board-card-padding-x$card-padding-y--hub-board-card-padding-y$card-shadow--hub-board-card-box-shadow | One-call theming for `<hub-board>` (Kanban board) |
CSS-переменные
Тематизируйте каждый пиксель с помощью 72 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.
Board
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-board-container-color | var(--hub-sys-text-primary, #212529) | color | Board text color |
--hub-board-container-bg | var(--hub-sys-surface-page, #fff) | color | Board background |
--hub-board-border-width | var(--hub-ref-border-width, 1px) | length | Base border width shared by columns and cards |
--hub-board-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Base border color shared by columns and cards |
--hub-board-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Base border radius shared by columns and cards |
--hub-board-columns-gap | var(--hub-ref-space-3, 1rem) | number | Расстояние между колонками |
--hub-board-column-width | 256px | length | Column width |
--hub-board-column-min-height | 200px | length | Column minimum height |
--hub-board-column-body-min-height | 128px | length | Column body minimum height |
--hub-board-column-body-gap | var(--hub-ref-space-3, 1rem) | length | Gap between cards in a column |
--hub-board-column-spacer-y | 0.75rem | length | Base vertical spacer for column sections |
--hub-board-column-spacer-x | var(--hub-ref-space-3, 1rem) | string | Base horizontal spacer for column sections |
--hub-board-column-border-width | var(--hub-board-border-width) | length | Ширина границ колонок |
--hub-board-column-border-color | var(--hub-board-border-color) | color | Цвет границы вокруг колонок board |
--hub-board-column-border-radius | var(--hub-board-border-radius) | length | Радиус скругления углов колонок |
--hub-board-column-box-shadow | none | shadow | Column box shadow |
--hub-board-column-inner-border-radius | var(--hub-board-border-radius) | length | Inner radius for column header/footer |
--hub-board-column-cap-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Вертикальный отступ внутри шапки и подвала колонки |
--hub-board-column-cap-padding-x | var(--hub-ref-space-3, 1rem) | length | Горизонтальный отступ внутри шапки и подвала колонки |
--hub-board-column-cap-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Цвет фона заголовков колонок |
--hub-board-column-cap-color | inherit | color | Цвет текста заголовков колонок |
--hub-board-column-header-padding-y | var(--hub-board-column-cap-padding-y) | length | Column header vertical padding |
--hub-board-column-header-padding-x | var(--hub-board-column-cap-padding-x) | length | Column header horizontal padding |
--hub-board-column-header-bg | var(--hub-board-column-cap-bg) | color | Column header background |
--hub-board-column-header-color | var(--hub-board-column-cap-color) | color | Column header text color |
--hub-board-column-footer-padding-y | var(--hub-board-column-cap-padding-y) | length | Column footer vertical padding |
--hub-board-column-footer-padding-x | var(--hub-board-column-cap-padding-x) | length | Column footer horizontal padding |
--hub-board-column-footer-bg | var(--hub-board-column-cap-bg) | color | Column footer background |
--hub-board-column-footer-color | var(--hub-board-column-cap-color) | color | Column footer text color |
--hub-board-column-body-padding-y | var(--hub-board-column-spacer-y) | length | Вертикальный отступ тела колонки (область с карточками) |
--hub-board-column-body-padding-x | var(--hub-board-column-spacer-x) | length | Горизонтальный отступ тела колонки (область с карточками) |
--hub-board-column-header-title-color | inherit | color | Column header title color |
--hub-board-column-header-title-spacer-y | var(--hub-ref-space-2, 0.5rem) | string | Column header title bottom spacing |
--hub-board-column-header-subtitle-color | var(--hub-sys-text-muted, #6c757d) | color | Column header subtitle color |
--hub-board-column-height | 100% | length | Column height |
--hub-board-column-color | var(--hub-board-container-color) | color | Цвет текста внутри колонок board |
--hub-board-column-bg | var(--hub-board-container-bg) | color | Цвет фона колонок board |
--hub-board-card-spacer-y | 0.75rem | length | Base vertical spacer for card sections |
--hub-board-card-spacer-x | var(--hub-ref-space-3, 1rem) | string | Base horizontal spacer for card sections |
--hub-board-card-title-spacer-y | var(--hub-ref-space-2, 0.5rem) | string | Card title bottom spacing |
--hub-board-card-title-color | inherit | color | Card title color |
--hub-board-card-subtitle-color | var(--hub-sys-text-muted, #6c757d) | color | Card subtitle color |
--hub-board-card-border-width | var(--hub-board-border-width) | length | Толщина границы карточек |
--hub-board-card-border-color | var(--hub-board-border-color) | color | Цвет границы карточек |
--hub-board-card-border-radius | var(--hub-board-border-radius) | length | Радиус скругления углов карточек |
--hub-board-card-box-shadow | none | shadow | Тень для карточек |
--hub-board-card-inner-border-radius | calc(var(--hub-board-card-border-radius) - var(--hub-board-card-border-width)) | length | Inner card border radius |
--hub-board-card-cap-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Card cap shared vertical padding |
--hub-board-card-cap-padding-x | var(--hub-ref-space-3, 1rem) | length | Card cap shared horizontal padding |
--hub-board-card-cap-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Card cap shared background |
--hub-board-card-cap-color | inherit | color | Card cap shared text color |
--hub-board-card-padding-y | var(--hub-board-card-spacer-y) | length | Вертикальный отступ внутри карточек |
--hub-board-card-padding-x | var(--hub-board-card-spacer-x) | length | Горизонтальный отступ внутри карточек |
--hub-board-card-header-padding-y | var(--hub-board-card-cap-padding-y) | length | Card header vertical padding |
--hub-board-card-header-padding-x | var(--hub-board-card-cap-padding-x) | length | Card header horizontal padding |
--hub-board-card-header-bg | var(--hub-board-card-cap-bg) | color | Card header background |
--hub-board-card-header-color | var(--hub-board-card-cap-color) | color | Card header text color |
--hub-board-card-footer-padding-y | var(--hub-board-card-cap-padding-y) | length | Card footer vertical padding |
--hub-board-card-footer-padding-x | var(--hub-board-card-cap-padding-x) | length | Card footer horizontal padding |
--hub-board-card-footer-bg | var(--hub-board-card-cap-bg) | color | Card footer background |
--hub-board-card-footer-color | var(--hub-board-card-cap-color) | color | Card footer text color |
--hub-board-card-height | auto | length | Card height |
--hub-board-card-color | var(--hub-board-container-color) | color | Цвет текста карточек |
--hub-board-card-bg | var(--hub-board-container-bg) | color | Цвет фона карточек |
--hub-board-drag-transition | transform 250ms cubic-bezier(0, 0, 0.2, 1) | transition | CSS-переход карточек при перетаскивании (свойство, длительность и функция плавности одним значением) |
--hub-board-accent | var(--hub-sys-color-primary, #0d6efd) | color | Semantic accent — re-based per variant; drives the drop placeholder |
--hub-board-accent-subtle | color-mix(in oklch, var(--hub-board-accent) 12%, var(--hub-sys-surface-page, #fff)) | color | Soft accent tint for the placeholder background |
--hub-board-placeholder-border-color | var(--hub-board-accent) | color | Цвет границы плейсхолдера перетаскивания |
--hub-board-placeholder-border-width | 2px | length | Толщина границы плейсхолдера перетаскивания |
--hub-board-placeholder-border-style | dashed | border | Drop placeholder border style |
--hub-board-placeholder-bg | var(--hub-board-accent-subtle) | color | Цвет фона активных зон сброса |
--hub-board-placeholder-min-height | 60px | length | Drop placeholder minimum height |