Справочник API

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

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

Настройте buttons с помощью 35 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`variant (hub-button)`	`'solid' \| 'outline' \| 'soft' \| 'ghost' \| 'link'`	`'solid'`	Визуальный стиль кнопки: solid, outline, soft, ghost или link.
`color (hub-button)`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'neutral' \| 'light' \| 'dark' \| string`	`'primary'`	Семантический акцент кнопки. Открытое множество: любой из девяти встроенных акцентов, пользовательский акцент, зарегистрированный через hub-btn-color-rules(), именованный цвет CSS или буквальное значение (#hex, rgb(), oklch(), var(...)). Наполняет слот --hub-btn-accent, из которого выводятся все ролевые цвета.
`size (hub-button)`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Токен размера кнопки: sm, md, lg или xl.
`loading (hub-button)`	`boolean`	`false`	Показывает анимированный спиннер и помечает кнопку как занятую И отключённую: отражает aria-busy="true" и нативный атрибут disabled, убирает кнопку из порядка табуляции и блокирует активацию указателем/клавиатурой, чтобы выполняющаяся отправка не могла сработать дважды.
`disabled (hub-button)`	`boolean`	`false`	Отключает кнопку, зеркалируя нативный атрибут disabled на элементе-хосте.
`color (hub-fab)`	`HubSemanticColor`	`'primary'`	Семантический акцент фона FAB. Принимает встроенные акценты или любой пользовательский/буквальный цвет через слот --hub-fab-accent.
`size (hub-fab)`	`'mini' \| 'standard' \| 'large'`	`'standard'`	Диаметр круглого FAB: mini, standard или large.
`extended (hub-fab)`	`boolean`	`false`	Отрисовывает FAB как расширенную «пилюлю», показывающую спроецированное содержимое [slot=label] рядом с иконкой.
`position (hub-fab)`	`'top-start' \| 'top-center' \| 'top-end' \| 'middle-start' \| 'center' \| 'middle-end' \| 'bottom-start' \| 'bottom-center' \| 'bottom-end'`	`'bottom-end'`	Фиксированная позиция FAB в области просмотра на сетке из девяти слотов; реализована через логические свойства CSS для поддержки RTL.
`collapseOnScroll (hub-fab)`	`boolean`	`false`	Если true, расширенный FAB сворачивается до одной иконки, как только страница прокручивается более чем на 50px.
`disabled (hub-fab)`	`boolean`	`false`	Отключает FAB, применяя внешний вид hub-fab-disabled.
`color (hub-speed-dial)`	`HubSemanticColor`	`'primary'`	Семантический акцент, окрашивающий FAB-триггер speed dial. Принимает встроенные акценты или любой пользовательский/буквальный цвет.
`size (hub-speed-dial)`	`'mini' \| 'standard' \| 'large'`	`'standard'`	Размер FAB-триггера: mini, standard или large.
`position (hub-speed-dial)`	`HubFabPosition`	`'bottom-end'`	Фиксированная позиция speed dial в области просмотра на сетке FAB из девяти слотов.
`direction (hub-speed-dial)`	`'up' \| 'down' \| 'left' \| 'right'`	`'up'`	Направление, в котором элементы действий раскрываются от триггера: up, down, left или right.
`trigger (hub-speed-dial)`	`'click' \| 'hover'`	`'click'`	Взаимодействие, открывающее speed dial: click переключает его; hover открывает по mouseenter и закрывает по mouseleave.
`isOpen (hub-speed-dial)`	`boolean (two-way model)`	`false`	Двусторонне привязываемое состояние открытия speed dial (сигнал model). Нажатие Escape закрывает его автоматически.
`icon (hub-speed-dial-item)`Обязательно	`string`	—	Строка CSS-классов иконки действия, отрисовываемой как <i [class]="icon()"> внутри кнопки элемента. Также используется как запасной aria-label, когда метка не задана.
`label (hub-speed-dial-item)`	`string`	`''`	Метка-подсказка, показываемая рядом с кнопкой действия; также используется как её доступный aria-label.
`color (hub-speed-dial-item)`	`HubSemanticColor \| 'default'`	`'default'`	Семантический акцент кнопки действия; 'default' сохраняет нейтральный внешний вид. Пользовательские/буквальные цвета применяются через слот --hub-speed-dial-item-accent.
`disabled (hub-speed-dial-item)`	`boolean`	`false`	Отключает кнопку элемента действия; пока она отключена, itemClick не испускается.
`hubDropdown ([hubDropdown])`Обязательно	`TemplateRef<any>`	—	ng-template, отрисовываемый внутри панели-оверлея на уровне body и привязываемый как [hubDropdown]="tpl".
`placement ([hubDropdown])`	`'top-start' \| 'top' \| 'top-end' \| 'start' \| 'end' \| 'bottom-start' \| 'bottom' \| 'bottom-end'`	`'bottom-start'`	Предпочтительное расположение панели относительно кнопки. Панель открывается там, пока помещается; если нет — переворачивается через тот край, за который вышла бы: снизу вверх и с логического конца в начало, что в RTL меняется на противоположное.
`trigger ([hubDropdown])`	`'click' \| 'hover'`	`'click'`	Взаимодействие, открывающее dropdown: click переключает его; hover открывает по mouseenter и закрывает по mouseleave.
`closeOnSelect ([hubDropdown])`	`boolean`	`true`	Если true, любой клик внутри содержимого панели автоматически закрывает dropdown.
`disabled ([hubDropdown])`	`boolean`	`false`	Предотвращает открытие dropdown.
`offsetY ([hubDropdown])`	`number`	`4`	Отступ в пикселях между триггером и панелью вдоль оси размещения.
`panelClass ([hubDropdown])`	`string`	`''`	Дополнительный CSS-класс, добавляемый к панели-оверлею вместе с классом по умолчанию hub-dropdown-overlay.
`isOpen ([hubDropdown])`	`boolean (two-way model)`	`false`	Двусторонне привязываемое состояние открытия dropdown (сигнал model). Закрывается автоматически по Escape, клику вне панели и прокрутке страницы.
`color (hub-dropdown-panel)`	`HubSemanticColor \| 'default'`	`'default'`	Семантический акцент верхней границы панели; 'default' сохраняет нейтральную границу.
`color (hub-dropdown-item)`	`HubSemanticColor \| 'default'`	`'default'`	Семантический акцент цвета метки элемента; 'default' наследует цвет панели.
`icon (hub-dropdown-item)`	`string \| undefined`	`undefined`	Необязательная строка CSS-классов иконки, отрисовываемой как <i [class]="icon()"> перед меткой.
`disabled (hub-dropdown-item)`	`boolean`	`false`	Отключает пункт меню; клики игнорируются, и itemClick не испускается.
`selected (hub-dropdown-item)`	`boolean`	`false`	Показывает индикатор-галочку, помечающий элемент как выбранный.
`config (hub-actions-cell)`Обязательно	`HubActionsCellConfig`	`—`	Что предлагает строка, в нейтральных терминах: кнопки и меню с их иконками, подписями, подсказками и состоянием disabled, уже разрешёнными для этой строки. Его пишет библиотека-хост через hubActionsAdapter, а не вручную.

События

Реагируйте на то, что делает buttons, — 9 событий, к которым можно подключить вашу логику.

Имя	Тип	Описание
`fabClick (hub-fab)`	`OutputEmitterRef<void>`	Испускается при активации FAB — указателем или клавишами Enter/Пробел. Пока он отключён, ничего не испускается.
`isOpenChange (hub-speed-dial)`	`OutputEmitterRef<boolean>`	Испускает новое состояние открытия при каждом изменении модели isOpen (парный output двусторонней привязки).
`opened (hub-speed-dial)`	`OutputEmitterRef<void>`	Испускается после открытия speed dial.
`closed (hub-speed-dial)`	`OutputEmitterRef<void>`	Испускается после закрытия speed dial, в том числе при закрытии клавишей Escape.
`itemClick (hub-speed-dial-item)`	`OutputEmitterRef<void>`	Испускается при активации кнопки элемента действия.
`isOpenChange ([hubDropdown])`	`OutputEmitterRef<boolean>`	Испускает новое состояние открытия при каждом изменении модели isOpen (парный output двусторонней привязки).
`opened ([hubDropdown])`	`OutputEmitterRef<void>`	Испускается после присоединения панели-оверлея и открытия dropdown.
`closed ([hubDropdown])`	`OutputEmitterRef<void>`	Испускается после закрытия dropdown и уничтожения оверлея (Escape, клик вне панели, прокрутка или closeOnSelect).
`itemClick (hub-dropdown-item)`	`OutputEmitterRef<void>`	Испускается при активации пункта меню; подавляется, пока элемент отключён.

Шаблоны

Сделайте его своим — 3 слотов шаблона позволяют проецировать собственную разметку.

Имя	Описание	Пример
`[slot=icon] (hub-fab)`	Содержимое, проецируемое как иконка FAB. Отрисовывается и в круглой, и в расширенной форме.	`<hub-fab aria-label="New document"> <i slot="icon" class="fa-solid fa-plus"></i> </hub-fab>`
`[slot=label] (hub-fab)`	Подпись, проецируемая рядом с иконкой. Отрисовывается, только пока FAB расширен и не свёрнут прокруткой.	`<hub-fab extended aria-label="New document"> <i slot="icon" class="fa-solid fa-plus"></i> <span slot="label">New document</span> </hub-fab>`
`[hubTrigger] (hub-speed-dial)`	Содержимое, проецируемое в кнопку-триггер speed dial. Элементы действий помещаются в слот по умолчанию, вне её.	`<hub-speed-dial> <i hubTrigger class="fa-solid fa-plus"></i> <hub-speed-dial-item icon="fa-solid fa-pen" label="Edit" /> </hub-speed-dial>`