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

查看示例，查看源碼。