Лист действий для Angular | ng-hub-ui-action-sheet
Лист действий для Angular, открываемый из сервиса: действия с ролями, плоские или сгруппированные, обработчики, способные отказать в закрытии, и закрытие фоном, клавиатурой или перетаскиванием.
Справочник API
Вот полный контракт action-sheet: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.
Входные свойства
Настройте action-sheet с помощью 10 входных свойств. Привязывайте их, как любой @Input в Angular.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
buttonsОбязательно | (HubActionSheetButton | HubActionSheetGroup)[] | — | Действия — плоским списком или группами с заголовками. |
header | string | — | Заголовок листа и его доступное имя. |
subHeader | string | — | Вторая строка под заголовком. |
variant | string | — | Семантический акцент, читается как --hub-sys-color-<variant>. |
backdropDismiss | boolean | true | Клик по фону закрывает лист. |
keyboard | boolean | true | Escape закрывает лист. |
swipeToClose | boolean | true | Перетаскивание листа вниз за порог закрывает его. |
animation | boolean | true | Анимирует появление и уход. Игнорируется при prefers-reduced-motion. |
panelClass | string | string[] | — | Дополнительные классы на листе, чтобы оформить один конкретный. |
ariaLabel | string | — | Доступное имя, когда заголовка нет. |
События
События пока не задокументированы.
Методы
Управляйте action-sheet из кода — 5 методов его программного интерфейса.
| Имя | Сигнатура | Возвращает | Описание |
|---|---|---|---|
HubActionSheet.open | open<D>(options: HubActionSheetOptions<D>): HubActionSheetRef<D> | — | Монтирует лист в документ и возвращает управление его результатом. |
HubActionSheetRef.result | result: Promise<HubActionSheetResult<D>> | — | Разрешается один раз: ролью и данными выбранного действия либо тем, как лист был закрыт. |
HubActionSheetRef.closed$ | closed$: Observable<HubActionSheetResult<D>> | — | То же значение, что result, для тех, кто работает с потоками. |
HubActionSheetRef.dismiss | dismiss(role?: 'backdrop' | 'escape' | 'swipe' | string): void | — | Закрывает лист извне, сообщая указанную роль. |
provideHubActionSheet | provideHubActionSheet(config: Partial<HubActionSheetConfig>): EnvironmentProviders | — | Задаёт значения по умолчанию, от которых отталкивается каждый лист. |
Шаблоны
Шаблоны пока не задокументированы.