Result 结果提示
基本说明
本框架一共定义了五种结果提示,分别是success,error,warning,info和question,该提示一般用操作结果反馈。
success
表示成功、结束、完成error
表示错误、有问题warning
表示提醒、注意、警告info
表示信息提示、注意question
表示疑问、求助
ax-result
定义了结果提示,通过使用ax-success
,ax-error
,ax-warning
,ax-info
和ax-question
表示不同结果提示,本演示效果使用了iconfont
图标,复制可用。
<div class="ax-result ax-success"><i class="ax-iconfont ax-icon-check-o"></i></div> <div class="ax-result ax-error"><i class="ax-iconfont ax-icon-close-o"></i></div> <div class="ax-result ax-warning"><i class="ax-iconfont ax-icon-warning-o"></i></div> <div class="ax-result ax-info"><i class="ax-iconfont ax-icon-info-o"></i></div> <div class="ax-result ax-question"><i class="ax-iconfont ax-icon-question-o"></i></div> <div></div> <div class="ax-result ax-success"><i class="ax-iconfont ax-icon-check-o-fill"></i></div> <div class="ax-result ax-error"><i class="ax-iconfont ax-icon-close-o-fill"></i></div> <div class="ax-result ax-warning"><i class="ax-iconfont ax-icon-warning-o-fill"></i></div> <div class="ax-result ax-info"><i class="ax-iconfont ax-icon-info-o-fill"></i></div> <div class="ax-result ax-question"><i class="ax-iconfont ax-icon-question-o-fill"></i></div> <div></div> <div class="ax-result ax-success"><i class="ax-iconfont ax-icon-check-o-t"></i></div> <div class="ax-result ax-error"><i class="ax-iconfont ax-icon-close-o-t"></i></div> <div class="ax-result ax-warning"><i class="ax-iconfont ax-icon-warning-o-t"></i></div> <div class="ax-result ax-info"><i class="ax-iconfont ax-icon-info-o-t"></i></div> <div class="ax-result ax-question"><i class="ax-iconfont ax-icon-question-o-t"></i></div>
SVG动画提示
配合结果提示,本框架定制了对应的SVG结果动画图标,默认是隐藏,对svg添加ax-result-show可动画显示。基本结构如下:
<div class="ax-result"> <svg class="svg-success"></svg> </div> <div class="ax-result ax-result-show"> <svg class="svg-success"></svg> </div>
<div class="ax-result ax-result-show"> <svg class="svg-success" xmlns="http://www.w3.org/2000/svg" width="86.6986mm" height="86.6986mm" viewBox="0 0 86.6986 86.6986"><path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-in-1" d="M26.316,42.859L37.9984,54.5414L60.3826,32.1572"></path></svg> </div> <div class="ax-result ax-result-show"> <svg class="svg-error" xmlns="http://www.w3.org/2000/svg" width="86.6986mm" height="86.6986mm" viewBox="0 0 86.6986 86.6986"><path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-in-1" d="M28.774,57.9246L57.9247,28.7739"></path><path class="svg-line svg-in-2" d="M57.9246,57.9246L28.7739,28.7739"></path></svg> </div> <div class="ax-result ax-result-show"> <svg class="svg-warning" xmlns="http://www.w3.org/2000/svg" width="86.6986mm" height="86.6986mm" viewBox="0 0 86.6986 86.6986"><path class="svg-line svg-bg" d="M43.4611 7.24c2.8081,0.0924 4.39,1.7 5.3045,3.1159l17.4543 29.9414 17.3445 29.7538c0.5448,1.0193 1.596,4.0544 0.1109,6.4168 -1.4849,2.3626 -3.6815,2.9155 -5.3768,2.992l-34.9082 0.0002 -34.6892 -0.0002c-1.1636,-0.0421 -4.3433,-0.6583 -5.6666,-3.1131 -1.3232,-2.4549 -0.7085,-4.6157 0.0723,-6.1078l17.454 -29.9417 17.3449 -29.7537c0.6185,-0.977 2.7471,-3.396 5.5554,-3.3036z"></path><path class="svg-line svg-out" d="M43.4611 7.24c2.8081,0.0924 4.39,1.7 5.3045,3.1159l17.4543 29.9414 17.3445 29.7538c0.5448,1.0193 1.596,4.0544 0.1109,6.4168 -1.4849,2.3626 -3.6815,2.9155 -5.3768,2.992l-34.9082 0.0002 -34.6892 -0.0002c-1.1636,-0.0421 -4.3433,-0.6583 -5.6666,-3.1131 -1.3232,-2.4549 -0.7085,-4.6157 0.0723,-6.1078l17.454 -29.9417 17.3449 -29.7537c0.6185,-0.977 2.7471,-3.396 5.5554,-3.3036z"></path><path class="svg-line svg-in-1" d="M43.3493,27.8713L43.3493,57.2858"></path><circle class="svg-circle svg-in-2" cx="43.3492" cy="64.3337" r="2.1166"></circle></svg> </div> <div class="ax-result ax-result-show"> <svg class="svg-info" xmlns="http://www.w3.org/2000/svg" width="86.6986mm" height="86.6986mm" viewBox="0 0 86.6986 86.6986"><path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-in-1" d="M43.3493,65.0602L43.3493,30.9723"></path><circle class="svg-circle svg-in-2" cx="43.3492" cy="23.5856" r="2.1166"></circle></svg> </div> <div class="ax-result ax-result-show"> <svg class="svg-question" xmlns="http://www.w3.org/2000/svg" width="86.6986mm" height="86.6986mm" viewBox="0 0 86.6986 86.6986"><path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-in-1" d="M32.3757 35.7255c-0.2203,-11.823 12.5789,-14.1087 18.4056,-9.4189 5.4663,4.3995 4.7426,12.804 -3.1088,17.9938 -3.0015,1.9839 -3.0003,3.8403 -3.0003,10.1707"></path><circle class="svg-circle svg-in-2" cx="44.6612" cy="60.5502" r="2.1166"></circle></svg> </div>
字符小提示
本提示图标并非iconfont
或者图片,而是用纯html字符制作的,兼容性最强,使用最简单。更多特殊字符请参见特殊字符。
- 操作成功!
- 操作错误!
- 信息提示!
- 警告!
- 有问题?
<li><i class="ax-ace ax-ace-success"></i> 操作成功!</li> <div class="ax-break"></div> <li><i class="ax-ace ax-ace-error"></i> 操作错误!</li> <div class="ax-break"></div> <li><i class="ax-ace ax-ace-info"></i> 信息提示!</li> <div class="ax-break"></div> <li><i class="ax-ace ax-ace-warning"></i> 警告!</li> <div class="ax-break"></div> <li><i class="ax-ace ax-ace-question"></i> 有问题?</li>