Skip to end of metadata
Go to start of metadata

基本介绍

Tip是一个提示信息组件,该组件主要用来展示与用户的鼠标动作无直接相关的提示信息,通过指定位置或者锚定对象来显示。例如数据保存后的数据提示,任务执行结束之后的提示信息等。

基本使用

通常情况下我们可以在View视图中添加一个Tip控件,并设置其text属性:

这个时候如果我们希望这个Tip显示在某个页面元素中,就可以通过如下两行代码实现:

如果这个页面元素不是Dorado控件,而是一个DOM元素,则可将上面的代码调整为: 

本例我们在container1的onClick中添加如下代码: 

效果如:

或者代码调整为:

 

效果如:


属性详细说明

text

Tip控件显示的内容,本文范例已经有说明

caption

通过caption可以为text内容添加一个标题,如:

caption运行效果:

content

content的功能等同text属性,差别text只能支持简单的文本显示,但是content可以支持更复杂的格式,如HTML,JSON,DOM甚至是Dorado的控件,如:

HTML:

 

浏览器效果:

JSON:

 

 它在浏览器中的执行效果与上面的HTML的效果是一致的。

Dorado控件

 

执行效果:

在标准版开发模式中,此处不允许添加View中已经存在的控件,必须通过new方法创建的控件才可以设置到Tip的content属性中,否则将会有不可预知的问题。


DOM对象

提供了icon属性

通过icon属性可以自定义图标,效果如下:

closeable

closeable的默认值为false,如果设置为true,如下图:

界面效果如下(注意右侧有一个可以关闭的小图标):

单击这个图标就可以将系统提示信息隐藏。

arrowDirection

通过该属性定义提示信息的箭头指示方向,默认值为"none"即不显示,如果改为"left":

如为"right"则:

注意arrowDirection的位置是指箭头相对Tip所处的位置,而不影响Tip在页面上的位置。

arrowDirection的可选值有:


arrowOffset

arrowDirection设置为非none之后系统提示会保护一个箭头,而arrowOffset就是在arrowDirection不变的情况下微调箭头的相对位置,如果arrowDirection为left或right,可以通过arrowOffset上下微调箭头的位置:

arrowOffset效果图说明
0,即默认值默认箭头居中
-10负数表示箭头向上微调
10正数表示箭头向下微调

同样如果arrowDirection的值为top或bottom,则可以通过arrowOffset左右微调箭头的位置:

arrowOffset效果图 
0,即默认值默认箭头居中
-30负数表示箭头向左微调
30负数表示箭头向右微调

 

arrowAlign

arrowAlign的功能与arrowOffset类似,它提供了几个默认值,如果arrowDirection为left或right,则如果你设置arrowAlign为top,center或bottom它会自动根据当前Tip的大小自动计算arrowOffset的值,并自动定位。

注意以下两点:

  • arrowAlign的优先级小于arrowOffset,也就是说如果你同时设置这两个属性,Tip控件将会忽略arrowAlign的设定。最终起作用的将会是arrowOffset
  • arrowDirection为left或right时,arrowAlign为left,right是没有意义的,arrowDirection为top或bottom时,arrowAlign为top,bottom是没有意义的

 

showDuration

 提示信息自动隐藏时间,单位为秒,默认为空,则不会自动隐藏。如果设置为2秒,则tip显示2秒钟后自动隐藏,效果如下:

Labels
  • No labels