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

查看示例，查看源码。