Панель инструментов
Контейнер панели инструментов для группы интерактивных элементов, таких как кнопки или группы переключателей. Он служит единой точкой отсчёта для навигации с клавиатуры и управления фокусом. Поддерживает различные ориентации и состояния отключения.
API
class Toolbar<V> implements OnDestroy {
readonly element: HTMLElement;
readonly textDirection: WritableSignal<Direction>;
readonly @Input() orientation: InputSignal<"vertical" | "horizontal">;
readonly @Input() softDisabled: InputSignalWithTransform<boolean, unknown>;
readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>;
readonly @Input() wrap: InputSignalWithTransform<boolean, unknown>;
readonly @Input() @Output('valueChange') value: ModelSignal<V[]>;
}
element
HTMLElementСсылка на элемент-хозяин.
textDirection
WritableSignal<Direction>Направление текста.
orientation
InputSignal<"vertical" | "horizontal">Вертикальная или горизонтальная ориентация панели инструментов.
softDisabled
InputSignalWithTransform<boolean, unknown>Разрешено ли элементам в отключённом состоянии получать фокус. Если true, отключённые элементы могут получать фокус, но не взаимодействовать с пользователем. Если false, отключённые элементы пропускаются при навигации.
disabled
InputSignalWithTransform<boolean, unknown>Отключена ли панель инструментов.
wrap
InputSignalWithTransform<boolean, unknown>Должен ли фокус перемещаться по кругу при навигации.
value
ModelSignal<V[]>Значения выбранных элементов панели инструментов.
ngOnDestroy
voidvoid
Описание
Контейнер панели инструментов для группы интерактивных элементов, таких как кнопки или группы переключателей. Он служит единой точкой отсчёта для навигации с клавиатуры и управления фокусом. Поддерживает различные ориентации и состояния отключения.
<div ngToolbar orientation="horizontal" [wrap]="true">
<button ngToolbarWidget value="save">Save</button>
<button ngToolbarWidget value="print">Print</button>
<div ngToolbarWidgetGroup [(value)]="selectedAlignment">
<button ngToolbarWidget value="left">Left</button>
<button ngToolbarWidget value="center">Center</button>
<button ngToolbarWidget value="right">Right</button>
</div>
</div>
Super-powered by Google ©2010–2025.
Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0.
https://angular.dev/api/aria/toolbar/Toolbar
