Skip to content

Latest commit

 

History

History
182 lines (144 loc) · 6.37 KB

xy-tips.md

File metadata and controls

182 lines (144 loc) · 6.37 KB
Raw

xy-tips

文字提示气泡框。类似于元素属性title。

通过hover和focus触发。

使用方式

<!-- 引入 -->
<script type="module">
    import './node_modules/xy-ui/components/xy-tips.js';
</script>
<!-- 使用 -->
<xy-tips tips="this is a tip">
    <xy-button>button</xy-button>
</xy-tips>

提示tips

提示文字。如果不设置则不显示提示。

button 改变tips 
<xy-tips tips="this is a tip">
    <xy-button>button</xy-button>
</xy-tips>

JavaScript操作get、set

tips.tips;
tips.tips = 'some tips';
//原生属性操作
tips.getAttribute('tips');
tips.setAttribute('tips','some tips');

方向dir

通过dir可以设置气泡框方向，默认为top，可以取值top、right、bottom、left、topleft、topright、righttop、rightbottom、bottomleft、bottomright、lefttop、leftbottom。

<style> xy-row{ position:relative; z-index:100; } xy-col{ background-color:transparent!important; padding:0; } xy-col xy-button,xy-col xy-tips{ width:100%; } </style> topleft top topright lefttop righttop left right leftbottom rightbottom bottomleft bottom bottomright 
<xy-tips dir="top" tips="some tips"><xy-button>top</xy-button></xy-tips>
<xy-tips dir="right" tips="some tips"><xy-button>right</xy-button></xy-tips>
<xy-tips dir="bottom" tips="some tips"><xy-button>bottom</xy-button></xy-tips>
<xy-tips dir="left" tips="some tips"><xy-button>left</xy-button></xy-tips>
<xy-tips dir="topleft" tips="some tips"><xy-button>topleft</xy-button></xy-tips>
<xy-tips dir="topright" tips="some tips"><xy-button>topright</xy-button></xy-tips>
<xy-tips dir="righttop" tips="some tips"><xy-button>righttop</xy-button></xy-tips>
<xy-tips dir="rightbottom" tips="some tips"><xy-button>rightbottom</xy-button></xy-tips>
<xy-tips dir="bottomleft" tips="some tips"><xy-button>bottomleft</xy-button></xy-tips>
<xy-tips dir="bottomright" tips="some tips"><xy-button>bottomright</xy-button></xy-tips>
<xy-tips dir="lefttop" tips="some tips"><xy-button>lefttop</xy-button></xy-tips>
<xy-tips dir="leftbottom" tips="some tips"><xy-button>leftbottom</xy-button></xy-tips>

JavaScript操作get、set

tips.dir;
tips.dir = 'right';
//原生属性操作
tips.getAttribute('dir');
tips.setAttribute('dir','right');

除了上述四个方位外，还可以设置auto，可以自动根据位置来选择一个合适的方向（还不完善）。

<xy-tips tips="some tips" dir="auto"><xy-button>auto</xy-button></xy-tips>

类型type

可以通过type设置提示框的颜色，有三种类型success、error、warning

success warning error

<xy-tips tips="success tips" type="success"><xy-button>success</xy-button></xy-tips>
<xy-tips tips="warning tips" type="warning"><xy-button>warning</xy-button></xy-tips>
<xy-tips tips="error tips" type="error"><xy-button>error</xy-button></xy-tips>

JavaScript操作get、set

tips.type;
tips.type = 'success';
//原生属性操作
tips.getAttribute('type');
tips.setAttribute('type','success');

颜色color

通过color可以设置提示框为任意颜色，优先级高于type。

custom color

<xy-tips tips="some tips" color="skyblue"><xy-button>custom color</xy-button></xy-tips>

JavaScript操作get、set

tips.color;
tips.color = 'red';
//原生属性操作
tips.getAttribute('color');
tips.setAttribute('color','red');

显示show

添加show属性可以主动控制提示框的出现时机，不再与hover和focus关联，可以取值true和false。

适用于表单错误信息描述。

tips is show 

<xy-tips tips="some tips" show="true"><xy-button>tips is show</xy-button></xy-tips>

JavaScript操作set

tips.show = true;
tips.show = false;
//原生属性操作
tips.setAttribute('show',true);