Alert 提示
文字提示
使用ax-alert
类表示提示,默认颜色是黄色(warning)。
这是一个告示。
提醒注意。
提醒注意。
<div class="ax-alert">这是一个告示。<br />提醒注意。</div>
主题
本框架一共定义了7种主题颜色,使用theme
属性来定义,分别是primary
,secondary
,success
,danger
,warning
(默认),info
,ight
。详细说明和举例如下:
主色。
与系统颜色保持一致。
与系统颜色保持一致。
次要色
操作成功!
很危险!
提示注意!
这是一个广告!
名词解释
浅灰色文字提示
<div class="ax-alert" theme="primary">主色。<br />与系统颜色保持一致。</div> <div class="ax-break"></div> <div class="ax-alert" theme="secondary">次要色</div> <div class="ax-break"></div> <div class="ax-alert" theme="success">操作成功!</div> <div class="ax-break"></div> <div class="ax-alert" theme="danger">很危险!</div> <div class="ax-break"></div> <div class="ax-alert" theme="warning">提示注意!</div> <div class="ax-break"></div> <div class="ax-alert" theme="ad">这是一个广告!</div> <div class="ax-break"></div> <div class="ax-alert" theme="info">名词解释</div> <div class="ax-break"></div> <div class="ax-alert" theme="light">浅灰色文字提示</div>
无边框
提示默认带有边框,使用borderless
属性可取消边框。
主色。
与系统颜色保持一致。
与系统颜色保持一致。
次要色
<div class="ax-alert" theme="primary" borderless>主色。<br />与系统颜色保持一致。</div> <div class="ax-break"></div> <div class="ax-alert" theme="secondary" borderless>次要色</div>
方边
提示默认带有3px的圆角,使用square
属性可取消圆角。
主色。
与系统颜色保持一致。
与系统颜色保持一致。
次要色
<div class="ax-alert" theme="primary" square>主色。<br />与系统颜色保持一致。</div> <div class="ax-break"></div> <div class="ax-alert" theme="secondary" square>次要色</div>
使用关闭按钮
在ax-alert
中加入close
的属性标签即可。如果需要有点击关闭效果,请实例化。
主色。
与系统颜色保持一致。
与系统颜色保持一致。
次要色
<div class="ax-alert" theme="primary">主色。<br />与系统颜色保持一致。<i close></i></div> <div class="ax-break"></div> <div class="ax-alert" theme="secondary">次要色<i close></i></div>
使用标题+简介
使用wrapper
、caption
和content
属性标签即可,注意查看html
结构。
原始社会
中国的原始社会,起自大约170万年前的元谋人
奴隶社会
公元前16世纪至公元前11世纪的商朝,是奴隶社会的发展时期。商朝的农业、手工业较发达,青铜冶炼和铸造有很高水平。中国有文字可考的历史是从商朝开始的。商纣王统治时,周武王兴兵伐纣,商亡。
<div class="ax-alert" theme="primary"> <div wrapper> <div caption>原始社会</div> <div content>中国的原始社会,起自大约170万年前的元谋人</div> </div> </div> <div class="ax-break"></div> <div class="ax-alert" theme="secondary"> <div wrapper> <div caption>奴隶社会</div> <div content>公元前16世纪至公元前11世纪的商朝,是奴隶社会的发展时期。商朝的农业、手工业较发达,青铜冶炼和铸造有很高水平。中国有文字可考的历史是从商朝开始的。商纣王统治时,周武王兴兵伐纣,商亡。</div> </div> </div>
使用小图标
以下例子展示小图标效果,注意查看html
结构。
中国的原始社会,起自大约170万年前的元谋人
奴隶社会
公元前16世纪至公元前11世纪的商朝,是奴隶社会的发展时期。商朝的农业、手工业较发达,青铜冶炼和铸造有很高水平。中国有文字可考的历史是从商朝开始的。商纣王统治时,周武王兴兵伐纣,商亡。
<div class="ax-alert" theme="danger"> <i class="ax-iconfont ax-icon-close-o-f" icon></i> <span content>中国的原始社会,起自大约170万年前的元谋人</span> </div> <div class="ax-break"></div> <div class="ax-alert" theme="warning"> <i class="ax-iconfont ax-icon-warning-o-f" icon></i> <div wrapper> <