Справочник API

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

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

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

Имя	Тип	По умолчанию	Описание
`animation`	`boolean`	—	Если true, открытие и закрытие modal будут анимированы. По умолчанию: true
`ariaLabelledBy`	`string`	—	ID элемента, который подписывает диалог. Применяется как `aria-labelledby` на окне модального окна.
`ariaDescribedBy`	`string`	—	ID элемента, который описывает диалог. Применяется как `aria-describedby` на окне модального окна.
`closeAriaLabel`	`string`	`'Close'`	Доступное имя кнопки закрытия, которую библиотека рисует в собственной шапке. У этой кнопки нет текста — крестик рисует CSS, — поэтому эта строка и есть всё, что произнесёт скринридер: передайте сюда переведённый текст или задайте значение по умолчанию один раз в `HubModalConfig`. По умолчанию: "Close"
`backdrop`	`boolean \| "static"`	—	Если true, будет создан элемент backdrop. В качестве альтернативы укажите "static" для backdrop, который не закрывает modal при клике. По умолчанию: true
`beforeDismiss`	`() => boolean \| Promise<boolean>`	—	Страж, вызываемый прямо перед закрытием модального окна. Верните `false`, промис, разрешённый с `false`, или отклонённый промис — и диалог останется открытым.
`centered`	`boolean`	—	Если true, modal будет центрирован по вертикали. По умолчанию: false
`closeOnNavigation`	`boolean`	`true`	Закрывает диалог при изменении URL приложения, с причиной `ModalDismissReasons.NAVIGATION`. Диалог принадлежит экрану, который его открыл: оставшись открытым, он накрывает следующий, а его подложка съедает там каждый клик. Считается изменение пути или строки запроса; изменение якоря — нет, оно перемещает читателя внутри того же экрана. Ставьте `false` для диалога, который сам выполняет переходы и должен оставаться открытым. По умолчанию `true`.
`closeButton`	`boolean`	`true`	Рисует ли диалог кнопку закрытия в собственной шапке. При `false` она не отрисовывается, а не прячется: спрятанную через CSS кнопку экранный диктор всё равно объявляет, а порядок обхода по Tab всё равно до неё доходит — чего диалогу без свободного выхода не нужно. Действует только на эту кнопку; `backdrop: 'static'` и `keyboard: false` — два других выхода. По умолчанию `true`.
`placement`	`HubModalPlacement`	—	Управляет тем, где размещается modal в области просмотра. По умолчанию: HubModalPlacement.Center
`offcanvas`	`boolean`	`false`	Открывает диалог как выдвижную панель: вплотную к краю, названному в `placement`, без скругления с этой стороны, растянутым на всю высоту (или ширину, сверху и снизу), с прокруткой в теле, чтобы шапка и подвал оставались на месте. Ширина берётся из `--hub-modal-offcanvas-width`, а не из шкалы размеров: `size: 'lg'` — это 800px, которые на узком окне закрывают тот самый документ, рядом с которым панель и должна читаться. Без `placement` открывается от конечного края.
`container`	`string \| HTMLElement`	—	CSS-селектор или элемент, к которому добавляются окна модальных окон. По умолчанию: `body`
`fullscreen`	`boolean \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| string`	—	`true` держит диалог на весь экран при любой ширине; имя брейкпоинта вроде `"md"` — только ниже этой ширины. Любая другая строка применяет `modal-fullscreen-<значение>-down`. По умолчанию: false
`injector`	`Injector`	—	Injector, которым разрешаются зависимости компонента содержимого.
`keyboard`	`boolean`	—	Если true, modal будет закрыт при нажатии клавиши Escape. По умолчанию: true
`scrollable`	`boolean`	—	Закрепляет диалог и прокручивает его тело вместо того, чтобы он выходил за пределы вьюпорта. По умолчанию: false
`size`	`"sm" \| "lg" \| "xl" \| string`	—	Размер окна modal
`variant`	`"primary" \| "success" \| "danger" \| "warning" \| "info" \| string`	—	Семантический акцент диалога — для тех, что что-то значат: разрушительное подтверждение, уведомление об успехе. Он переопределяет единственный слот `--hub-modal-accent`, а роли emphasis / subtle / on / border выводятся из него на самом диалоге, так что одно значение перекрашивает подкрашенный фон, внешний край с линейками шапки и подвала, а также заголовок. В таблице стилей их девять: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `neutral`, `light` и `dark`. Принимается и любая другая строка — она добавляет окну класс `hub-modal--<имя>`: собственный акцент стоит одного правила в глобальной таблице стилей и не требует пересборки. Верхняя полоса акцента тоже входит в набор, но поставляется нулевой ширины: задайте `--hub-modal-accent-bar-width` на диалоге, чтобы включить её. Без variant диалог остаётся нейтральным.
`windowClass`	`string`	—	Пользовательский класс, добавляемый к окну modal
`modalDialogClass`	`string`	—	Пользовательский класс, добавляемый к элементу `hub-modal__dialog`
`backdropClass`	`string`	—	Пользовательский класс, добавляемый к backdrop modal
`dismissSelector`	`string`	—	Пользовательский селектор для элементов, которые могут вызвать закрытие (dismiss) окна modal. По умолчанию: "[data-dismiss=\"modal\"]"
`closeSelector`	`string`	—	Пользовательский селектор для элементов, которые могут вызвать закрытие (close) окна modal. По умолчанию: "[data-close=\"modal\"]"
`headerSelector`	`string`	—	Пользовательский селектор для элемента заголовка окна modal
`footerSelector`	`string`	—	Пользовательский селектор для элемента подвала окна modal
`bodySelector`	`string`	—	CSS-селектор блока, дети которого становятся телом. Без него тело — это то, что осталось от шапки и подвала, а значит зависит от порядка написания содержимого; с ним тело размещается осознанно, и всё, что не забрал ни один слот, по-прежнему идёт следом.
`data`	`D`	—	Дополнительные данные, которые необходимо передать окну modal при его открытии

События

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

Имя	Тип	Описание
`dismiss`	`any`	Испускается окном modal, когда пользователь отклоняет (dismiss) его — например, нажатием Escape, кликом по backdrop или встроенной кнопкой закрытия. Полезная нагрузка — причина отклонения (ModalDismissReasons.ESC, ModalDismissReasons.BACKDROP_CLICK или пользовательское значение).

Методы

Управляйте modal из кода — 17 методов его программного интерфейса.

Имя	Сигнатура	Возвращает	Описание
`HubModal.open`	`open<C, R, D>(content: Type<C> \| TemplateRef<any> \| string, options?: HubModalOptions<D>): HubModalRef<C, R>`	`HubModalRef<C, R>`	Открывает новое окно modal с указанным содержимым (тип компонента, TemplateRef или строка) и опциями и возвращает HubModalRef для управления им. Компоненты содержимого могут внедрить HubActiveModal и токен HUB_MODAL_DATA, чтобы взаимодействовать с modal и читать полезную нагрузку data.
`HubModal.dismissAll`	`dismissAll(reason?: any): void`	—	Отклоняет все отображаемые в данный момент окна modal с указанной причиной.
`HubModal.hasOpenModals`	`hasOpenModals(): boolean`	`boolean`	Показывает, есть ли в приложении открытые окна modal в данный момент.
`HubModal.activeInstances`	`activeInstances: EventEmitter<HubModalRef[]>`	`EventEmitter<HubModalRef[]>`	Эмиттер событий, испускающий список открытых в данный момент экземпляров HubModalRef при каждом открытии или удалении modal.
`HubModalRef.close`	`close(result?: R): void`	—	Закрывает modal с необязательным значением результата. Promise HubModalRef.result разрешается переданным значением.
`HubModalRef.dismiss`	`dismiss(reason?: any): void`	—	Отклоняет modal с необязательным значением причины. Promise HubModalRef.result отклоняется с переданным значением. Учитывает защиту beforeDismiss, если она настроена.
`HubModalRef.update`	`update(options: HubModalUpdatableOptions): void`	—	Обновляет опции открытого modal (aria-атрибуты, centered, placement, fullscreen, backdropClass, size, variant, windowClass, modalDialogClass).
`HubModalRef.componentInstance`	`componentInstance: C \| void`	`C \| void`	Экземпляр компонента, использованного как содержимое modal. Возвращает undefined, если содержимым был TemplateRef или modal закрыт.
`HubModalRef.result`	`result: Promise<R>`	`Promise<R>`	Promise, который разрешается результатом закрытия, когда modal закрывается, и отклоняется причиной отклонения, когда modal отклоняется (dismiss).
`HubModalRef.closed`	`closed: Observable<R>`	`Observable<R>`	Observable, испускающий результат, переданный в close(), когда modal закрывается.
`HubModalRef.dismissed`	`dismissed: Observable<any>`	`Observable<any>`	Observable, испускающий причину отклонения, когда modal отклоняется — значение, переданное в dismiss(), либо внутреннюю причину, такую как клик по backdrop или Escape.
`HubModalRef.shown`	`shown: Observable<void>`	`Observable<void>`	Observable, который испускает значение и завершается, как только modal полностью видим и его анимация открытия закончилась.
`HubModalRef.hidden`	`hidden: Observable<void>`	`Observable<void>`	Observable, который испускает значение и завершается, когда и окно modal, и backdrop скрыты, анимации завершены, а их элементы удалены из DOM.
`HubActiveModal.close`	`close(result?: R): void`	—	Закрывает modal, содержащий компонент содержимого, разрешая Promise HubModalRef.result необязательным значением результата.
`HubActiveModal.dismiss`	`dismiss(reason?: any): void`	—	Отклоняет modal, содержащий компонент содержимого, отклоняя Promise HubModalRef.result необязательным значением причины.
`HubActiveModal.update`	`update(options: HubModalUpdatableOptions): void`	—	Обновляет опции открытого modal изнутри компонента содержимого.
`HubActiveModal.data`	`data: D`	`D`	Типизированная полезная нагрузка, переданная через HubModalOptions.data. Эквивалентно внедрению токена HUB_MODAL_DATA; принимает значение null, если опция data не была передана.

Шаблоны

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

Имя	Описание	Пример
`Modal Template`	Ссылка на шаблон, которую можно передать сервису модальных окон. Блоки шапки, тела и подвала становятся слотами только тогда, когда при открытии заданы `headerSelector`, `bodySelector` и `footerSelector`; без них весь шаблон попадает в тело.	<ng-template #modalTemplate let-close="close" let-dismiss="dismiss"> <div hubModalHeader> <h4 class="hub-modal__title">Modal Title</h4> </div> <div hubModalBody> Modal content goes here </div> <div hubModalFooter> <button hubButton color="secondary" (click)="dismiss()">Cancel</button> <button hubButton color="primary" (click)="close('result')">OK</button> </div> </ng-template> <!-- The three blocks become slots only when the selectors are given: this.modal.open(this.modalTemplate, { headerSelector: '[hubModalHeader]', bodySelector: '[hubModalBody]', footerSelector: '[hubModalFooter]' }); Without them the whole template lands in hub-modal__body. -->