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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极乐技术社区

微信小程序开发详解《五》布局基础

1:Flex布局 Flex布局如图所示 image.png 1.1 Flex容器属性 image.png 1.2 Flex容器内元素属性 image...

64750
来自专栏王磊的博客

react-native多图选择、图片裁剪(支持ad/ios图片个数控制)

前言:   目前关于rn比较知名并且封装好的图片选择控件很多,不过能同时支持多图片上传,个数控制兼容iOS/Ad的却寥寥无几,而今天介绍的这款框架可以实现:图片...

501140
来自专栏柠檬先生

Angularjs基础(八)

AngularJS Bootstrap     AngularJS 的首选样式表是 Twitter Bootstrap ,Twitter Bootstrap ...

23960
来自专栏24K纯开源

ChartDirector应用笔记(三)

前言 继上篇文章(Simple bar chart)推出之后,本篇文章继续ChartDirector的使用。在这篇Blog中,博主实现的是soft lighti...

245100
来自专栏栗霖积跬步之旅

HTML基础下

知识点一: HTML5的标准结构: <!DOCTYPE html> <html lang='en'> <head> <meat charset='utf...

51960
来自专栏大数据钻研

HTML基础

HTML基础 ---- HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、javascript三者的关系 HTML是网页内容...

1.1K30
来自专栏数据小魔方

动态图表系列6|列表框(offset函数)

今天跟大家分享动态图表系列6——列表框(offset函数)! 具体步骤与前一篇相同: 插入列表框制作选择菜单; 使用offset函数返回动态数据源; 插入图表。...

33750
来自专栏Google Dart

AngularDart Material Design 记分卡 顶

(adsbygoogle = window.adsbygoogle || []).push({}); fun...

14240
来自专栏前端黑板报

小程序--Canvas文字居中

注意红色划线的解释:对齐方式是以 X 的值为基点,然后在看看官网的 setTextAlign 最下面的图:

43020
来自专栏达摩兵的技术空间

css3媒体查询简介

<link rel="stylesheet" media="min-width=900" />

9050

扫码关注云+社区

领取腾讯云代金券