API 参考

这里是 modal 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。

通过 14 个输入项精细调校 modal。像绑定任意 Angular @Input 一样绑定它们。

名称	类型	默认值	描述
`animation`	`boolean`	—	若为 true，模态框的打开和关闭将带有动画。默认值：true
`backdrop`	`boolean \| "static"`	—	若为 true，将创建背景遮罩元素。或者指定 "static" 以创建点击时不关闭模态框的背景遮罩。默认值：true
`centered`	`boolean`	—	若为 true，模态框将垂直居中。默认值：false
`placement`	`HubModalPlacement`	—	控制模态框在视口中的放置位置。默认值：HubModalPlacement.Center
`keyboard`	`boolean`	—	若为 true，按下 Escape 键时模态框将关闭。默认值：true
`closeOnNavigation`	`boolean`	—	若为 true，当用户在浏览器历史中后退时（history.back()、浏览器后退按钮），模态框将关闭。默认值：true
`size`	`"sm" \| "lg" \| "xl" \| string`	—	模态框窗口的尺寸
`windowClass`	`string`	—	附加到模态框窗口的自定义类
`backdropClass`	`string`	—	附加到模态框背景遮罩的自定义类
`dismissSelector`	`string`	—	可触发模态框窗口关闭（dismiss）的元素的自定义选择器。默认值："[data-dismiss=\"modal\"]"
`closeSelector`	`string`	—	可触发模态框窗口关闭（close）的元素的自定义选择器。默认值："[data-close=\"modal\"]"
`headerSelector`	`string`	—	模态框窗口头部元素的自定义选择器
`footerSelector`	`string`	—	模态框窗口底部元素的自定义选择器
`data`	`any`	—	打开模态框窗口时需要传递的额外数据

尚未记录任何输出项。

打造你自己的样式——1 个模板插槽让你可以投影自定义标记。

名称	描述	示例
`Modal Template`	可传递给 modal 服务的模板引用	`<ng-template #modalTemplate let-close="close" let-dismiss="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal Title</h4> </div> <div class="modal-body"> Modal content goes here </div> <div class="modal-footer"> <button class="btn btn-secondary" (click)="dismiss()">Cancel</button> <button class="btn btn-primary" (click)="close('result')">OK</button> </div> </ng-template>`

用 17 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。

用于 modal 结构和定位的核心样式变量

控制 modal 颜色、边框和视觉效果的变量

变量	默认值	类型	描述
`--bs-modal-color`	`var(--bs-body-color)`	color	模态框内容的文本颜色
`--bs-modal-bg`	`var(--bs-body-bg)`	color	模态框内容的背景颜色
`--bs-modal-border-color`	`var(--bs-border-color-translucent)`	color	模态框的边框颜色
`--bs-modal-border-width`	`var(--bs-border-width)`	border	模态框的边框宽度
`--bs-modal-border-radius`	`var(--bs-border-radius-lg)`	border	模态框的边框圆角
`--bs-modal-box-shadow`	`0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)`	shadow	模态框的阴影

modal 头部区域的样式变量

modal 底部区域的样式变量

尚未记录任何样式示例。本节将包含自定义方案和主题示例。