Angular Material 工具栏和工具提示

<mat-toolbar> 是一个 Angular 指令，用于创建工具栏以显示标题、页眉或任何按钮操作。

<mat-toolbar>: 它代表主容器。

<mat-toolbar-row>: 它在工具栏中添加一个新行。

工具栏示例

修改后的描述符 app.module.ts.

修改后的 CSS 文件的内容：app.component.css.

修改后的 HTML 主机文件：app.component.html.

输出

说明

首先，我们创建了一个带有完整页面的工具栏。 然后添加标签。

Angular Material 工具提示

Angular Material 工具提示提供一个文本标签，当用户将鼠标悬停在任何按钮或元素上或长时间按住时显示该标签。

app.component.html

app.component.ts

输出

定位

工具提示将显示在元素下方，但可以使用 matTooltipPosition 输入进行配置。 工具提示显示在组件的上方、下方、左侧或右侧。

状态默认为向下。 如果工具提示在 RTL 布局方向上处于左/右位置，则使用 before 和 after 位置而不是 left 和 right。

app.component.html

app.component.ts

app.component.css

输出

显示和隐藏

默认情况下，当用户的鼠标悬停在工具提示的触发元素上时，工具提示将立即显示，当用户退出鼠标时，工具提示将隐藏。

您可以使用输入 matTooltipShowDelay 和 matTooltipHideDelay 来提供以秒为单位的延迟，以便在显示或隐藏工具提示之前添加延迟。

app.component.html

app.component.ts

app.component.css

输出

更改默认延迟行为

您可以使用 MAT_TOOLTIP_DEFAULT_OPTIONS 注入令牌并提供您的选项来配置/延迟应用程序的工具提示默认显示。

app.component.html

app.component.css

输出

手动调用 show () 和 hide ()

您可以显示和隐藏直接方法来调用工具提示以显示或隐藏工具提示，这接受以毫秒为单位的数字，以便在更改显示之前进行延迟。

app.component.html

app.component.ts

app.component.css

输出

禁用工具提示显示

设置 matTooltipDisabled 以禁用工具提示。 禁用后，它将永远不会再次显示。

可访问性

它提供了在最终用户将焦点放在触发工具提示的元素上时阅读工具提示内容所需的信息。

由 aria -by 引用的元素不仅仅是一个工具提示，而是 DOM 中存在的工具提示的不可见副本。

如果工具提示仅通过单击、漏斗等手动显示，则应采取类似的操作，以便为屏幕阅读器用户提供帮助。