MaterialTooltipDirective
Selector: <[materialTooltip]>
基于墨水的工具提示,可以附加到任何元素。
Inputs:
- alignPositionX String
弹出窗口在水平方向上的对齐方式。
可能的值是:
start:将弹出窗口对齐到容器的开头。 这相当于'flex-start'。 (默认)
center:将弹出窗口对齐到容器的中心。 这相当于“center”。
end:将弹出窗口对齐到容器的末尾。 这相当于'flex-end'。
before:在容器前对齐弹出窗口。 这不等同于任何CSS定位模型。
after:在容器后对齐弹出窗口。 这不等同于任何CSS定位模型。
- alignPositionY String 弹出窗口在垂直方向上的对齐方式。
可能的值是:
start:将弹出窗口对齐到容器的开头。 这相当于'flex-start'。 (默认)
center:将弹出窗口对齐到容器的中心。 这相当于“center”。
end:将弹出窗口对齐到容器的末尾。 这相当于'flex-end'。
before:在容器前对齐弹出窗口。 这不等同于任何CSS定位模型。
after:在容器后对齐弹出窗口。 这不等同于任何CSS定位模型。
- showTooltipIf bool
条件表达式,是否显示工具提示。
默认为true。
- tooltipPositions List<RelativePosition>
工具提示应尝试显示的位置。
- materialTooltip String
要在工具提示中显示的文本。
MaterialPaperTooltipComponent
Selector: <material-tooltip-card>
基于纸张的叠加旨在传达关于其目标元素的较长上下文信息的形式。
工具提示卡的目标可以是任何元素,例如按钮,输入,链接等。目标也可以是help_outline图标,其充当实际目标的代理。
将此组件与MaterialTooltipTargetDirective结合使用。
此组件支持延迟内容。
如果您的工具提示内容是另一个组件,请使用DeferredContentDirective仅在组件可见时加载组件。
Supported Content:
以下选择器自动设置为工具提示规范:
- header
- footer
- 非header/footer内容被赋予工具提示正文样式。
Inputs:
- offsetX int
工具提示最终定位的x偏移量。
- offsetY int
y偏移到工具提示最终定位的位置。
- preferredPositions List<RelativePosition> 相对位置在哪里尝试显示工具提示。
默认为:
[RelativePosition.OffsetBottomRight,RelativePosition.OffsetTopLeft,RelativePosition.OffsetBottomLeft,RelativePosition.OffsetTopRight]
- for TooltipTarget
此工具提示所针对的元素。
MaterialTooltipTargetDirective
Selector: <[tooltipTarget]>
导出为:tooltipTarget
标记工具提示的目标并处理在hover, click, enter, 和 space上显示和隐藏工具提示的指令。
该指令与Tooltip组件一起使用。 例如MaterialInkTooltipComponent,它可以完全控制简单工具提示的内容。
Inputs:
- alignPositionX String
弹出窗口在水平方向上的对齐方式。
可能的值是:
start:将弹出窗口对齐到容器的开头。 这相当于'flex-start'。 (默认)
center:将弹出窗口对齐到容器的中心。 这相当于“center”。
end:将弹出窗口对齐到容器的末尾。 这相当于'flex-end'。
before:在容器前对齐弹出窗口。 这不等同于任何CSS定位模型。
after:在容器后对齐弹出窗口。 这不等同于任何CSS定位模型。
- alignPositionY String 弹出窗口在垂直方向上的对齐方式。
可能的值是:
start:将弹出窗口对齐到容器的开头。 这相当于'flex-start'。 (默认)
center:将弹出窗口对齐到容器的中心。 这相当于“center”。
end:将弹出窗口对齐到容器的末尾。 这相当于'flex-end'。
before:在容器前对齐弹出窗口。 这不等同于任何CSS定位模型。
after:在容器后对齐弹出窗口。 这不等同于任何CSS定位模型。
Outputs:
- tooltipActivate Stream<bool>
激活工具提示时触发的事件。
ClickableTooltipTargetDirective
Selector: <[clickableTooltipTarget]>
导出为:tooltipTarget
指示工具提示的目标并处理鼠标悬停(有延迟),单击,输入和空格的指令。
此指令与MaterialTooltipTargetDirective略有不同,因为click和key事件使工具提示无延迟地出现。
该指令与Tooltip组件一起使用。 例如MaterialInkTooltipComponent,它可以完全控制简单工具提示的内容。
Inputs:
- alignPositionX String
弹出窗口在水平方向上的对齐方式。
可能的值是:
start:将弹出窗口对齐到容器的开头。 这相当于'flex-start'。 (默认)
center:将弹出窗口对齐到容器的中心。 这相当于“center”。
end:将弹出窗口对齐到容器的末尾。 这相当于'flex-end'。
before:在容器前对齐弹出窗口。 这不等同于任何CSS定位模型。
after:在容器后对齐弹出窗口。 这不等同于任何CSS定位模型。
- alignPositionY String 弹出窗口在垂直方向上的对齐方式。
可能的值是:
start:将弹出窗口对齐到容器的开头。 这相当于'flex-start'。 (默认)
center:将弹出窗口对齐到容器的中心。 这相当于“center”。
end:将弹出窗口对齐到容器的末尾。 这相当于'flex-end'。
before:在容器前对齐弹出窗口。 这不等同于任何CSS定位模型。
after:在容器后对齐弹出窗口。 这不等同于任何CSS定位模型。
Outputs:
- tooltipActivate Stream<bool>
激活工具提示时触发的事件。
MaterialInkTooltipComponent
Selector: <material-tooltip-text>
基于墨水的叠加层旨在提供有关其所针对的元素的上下文信息。
它是一个“小”的工具提示,它最多应该是一行或两行,并且最大宽度为320px。
通常,工具提示与图标或按钮相关联,并提供有关该元素的标签或简要帮助文本。 此组件应与TooltipTarget组件一起使用,该组件控制其可见性并提供工具提示所针对的基础HtmlElement。
将此组件与MaterialTooltipTargetDirective结合使用。
请考虑使用MaterialTooltipDirective; 用法更简单,它强制使用纯文本小工具提示。
Inputs:
- positions List<RelativePosition>
工具提示应尝试显示的位置。
- text String
工具提示的文本内容。
- for TooltipTarget 此工具提示所针对的元素。
这通常通过使用引用变量在模板中设置。 例如:
<span tooltipTarget #target="tooltipTarget">Tip</span> <material-tooltip-text [for]="target">My tooltip</material-tooltip-text>
MaterialIconTooltipComponent
Selector: <material-icon-tooltip>
在鼠标悬停,单击,输入,空间和焦点上显示纸张工具提示的图标。
这与在MaterialIconComponent上显示MaterialTooltipCard基本相同,只是它在点击时显示工具提示(而不是MaterialTooltipTarget,它没有点击触发器)。
Attributes:
- icon - 图标的名称。 如果两者都提供,则覆盖type。 有关可用图标,请参阅https://www.google.com/design/icons/。
- type - 图标的类型。 可能的值:
help - 显示“help_outline”图标(带圆圈的“?”)。 (默认)
info - 显示“info_outline”(带圆圈的“i”)
error- 显示“error_outline”(带圆圈的“!”)。
Inputs:
- offsetX int
工具提示最终定位的x偏移量。
- offsetY int
y偏移到工具提示最终定位的位置。
- preferredPositions List<RelativePosition> 相对位置在哪里尝试显示工具提示。
默认为:
[RelativePosition.OffsetBottomRight, RelativePosition.OffsetTopLeft, RelativePosition.OffsetBottomLeft, RelativePosition.OffsetTopRight]
MaterialTooltipExampleComponent
查看示例,查看源码。
(adsbygoogle = window.adsbygoogle || []).push({}); function googleAdJSAtOnload() { var element = document.createElement("script"); element.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; element.async = true; document.body.appendChild(element); } if (window.addEventListener) { window.addEventListener("load", googleAdJSAtOnload, false); } else if (window.attachEvent) { window.attachEvent("onload", googleAdJSAtOnload); } else { window.onload = googleAdJSAtOnload; }