AngularDart Material Design 工具提示 顶

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; }