Справочник API

Вот полный контракт board: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Входные свойства пока не задокументированы.

События

События пока не задокументированы.

Шаблоны

Шаблоны пока не задокументированы.

CSS-переменные

Тематизируйте каждый пиксель с помощью 24 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.

Компоновка и структура колонок

Управление общей компоновкой, отступами и структурой колонок board

Переменная	По умолчанию	Тип	Описание
`--hub-column-bg`	`#f8f9fa`	color	Цвет фона колонок board `#ffffff#f8f9fatransparent`
`--hub-column-color`	`#212529`	color	Цвет текста внутри колонок board `#333333rgb(33, 37, 41)var(--bs-body-color)`
`--hub-column-border-color`	`#dee2e6`	color	Цвет границы вокруг колонок board `#e9ecefvar(--bs-border-color)transparent`
`--hub-column-border-width`	`1px`	length	Ширина границ колонок `02px0.5rem`
`--hub-column-border-radius`	`0.375rem`	length	Радиус скругления углов колонок `00.5rem1rem16px`
`--hub-column-gap`	`1rem`	length	Расстояние между колонками `0.5rem1.5rem2rem`
`--hub-column-padding`	`1rem`	length	Внутренний отступ внутри колонок `0.75rem1.25rem1.5rem`

Заголовки и подвалы колонок

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

Переменная	По умолчанию	Тип	Описание
`--hub-column-cap-bg`	`#ffffff`	color	Цвет фона заголовков колонок `#f8f9favar(--bs-light)transparent`
`--hub-column-cap-color`	`#212529`	color	Цвет текста заголовков колонок `#495057var(--bs-dark)#333`
`--hub-column-cap-padding`	`0.75rem 1rem`	length	Внутренний отступ в заголовках колонок `0.5rem 1rem1rem 1.25rem1rem`
`--hub-column-cap-border-bottom`	`1px solid #dee2e6`	border	Нижняя граница для заголовков колонок `2px solid #dee2e6none1px dashed #ccc`

Стилизация карточек

Настройка внешнего вида отдельных карточек внутри колонок

Переменная	По умолчанию	Тип	Описание
`--hub-card-bg`	`#ffffff`	color	Цвет фона карточек `#f8f9fargba(255,255,255,0.9)transparent`
`--hub-card-color`	`#212529`	color	Цвет текста карточек `#333333var(--bs-body-color)#495057`
`--hub-card-border`	`1px solid #dee2e6`	border	Граница вокруг карточек `2px solid #dee2e6none1px dashed #ccc`
`--hub-card-border-radius`	`0.375rem`	length	Радиус скругления углов карточек `00.5rem0.75rem12px`
`--hub-card-padding`	`1rem`	length	Внутренний отступ внутри карточек `0.75rem1.25rem1rem 1.5rem`
`--hub-card-margin`	`0.5rem 0`	length	Внешний отступ вокруг карточек `0.25rem 00.75rem 01rem 0`
`--hub-card-shadow`	`0 2px 4px rgba(0,0,0,0.1)`	shadow	Тень для карточек `0 1px 3px rgba(0,0,0,0.1)0 4px 8px rgba(0,0,0,0.15)none`

Состояния перетаскивания

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

Переменная	По умолчанию	Тип	Описание
`--hub-card-hover-shadow`	`0 4px 8px rgba(0,0,0,0.15)`	shadow	Усиленная тень при наведении на карточки `0 6px 12px rgba(0,0,0,0.2)0 2px 6px rgba(0,0,0,0.1)none`
`--hub-card-dragging-opacity`	`0.5`	number	Прозрачность карточек во время перетаскивания `0.30.70.8`
`--hub-drop-zone-bg`	`rgba(0,123,255,0.1)`	color	Цвет фона активных зон сброса `rgba(40,167,69,0.1)rgba(255,193,7,0.1)transparent`
`--hub-drop-zone-border`	`2px dashed #007bff`	border	Стиль границы для активных зон сброса `3px solid #28a7451px dotted #ffc107none`

Анимации и переходы

Управление таймингом и сглаживанием для анимаций и переходов

Переменная	По умолчанию	Тип	Описание
`--hub-transition-duration`	`0.2s`	string	Длительность стандартных переходов `0.15s0.3s0.4s`
`--hub-transition-easing`	`ease-in-out`	string	Функция сглаживания для переходов `easelinearcubic-bezier(0.4, 0, 0.2, 1)`

Стилизация и тематизация

Примеры стилизации пока не задокументированы. В этом разделе будут рецепты кастомизации и примеры тематизации.