Лист действий для Angular | ng-hub-ui-action-sheet

Лист действий для Angular, открываемый из сервиса: действия с ролями, плоские или сгруппированные, обработчики, способные отказать в закрытии, и закрытие фоном, клавиатурой или перетаскиванием.

Справочник API

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

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

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

ИмяТипПо умолчаниюОписание
buttonsОбязательно(HubActionSheetButton | HubActionSheetGroup)[]Действия — плоским списком или группами с заголовками.
headerstringЗаголовок листа и его доступное имя.
subHeaderstringВторая строка под заголовком.
variantstringСемантический акцент, читается как --hub-sys-color-<variant>.
backdropDismissbooleantrueКлик по фону закрывает лист.
keyboardbooleantrueEscape закрывает лист.
swipeToClosebooleantrueПеретаскивание листа вниз за порог закрывает его.
animationbooleantrueАнимирует появление и уход. Игнорируется при prefers-reduced-motion.
panelClassstring | string[]Дополнительные классы на листе, чтобы оформить один конкретный.
ariaLabelstringДоступное имя, когда заголовка нет.

События

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

Методы

Управляйте action-sheet из кода — 5 методов его программного интерфейса.

ИмяСигнатураВозвращаетОписание
HubActionSheet.openopen<D>(options: HubActionSheetOptions<D>): HubActionSheetRef<D>Монтирует лист в документ и возвращает управление его результатом.
HubActionSheetRef.resultresult: Promise<HubActionSheetResult<D>>Разрешается один раз: ролью и данными выбранного действия либо тем, как лист был закрыт.
HubActionSheetRef.closed$closed$: Observable<HubActionSheetResult<D>>То же значение, что result, для тех, кто работает с потоками.
HubActionSheetRef.dismissdismiss(role?: 'backdrop' | 'escape' | 'swipe' | string): voidЗакрывает лист извне, сообщая указанную роль.
provideHubActionSheetprovideHubActionSheet(config: Partial<HubActionSheetConfig>): EnvironmentProvidersЗадаёт значения по умолчанию, от которых отталкивается каждый лист.

Шаблоны

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