Alert 提示

文字提示

使用ax-alert类表示提示,默认颜色是黄色(warning)。

这是一个告示。
提醒注意。
                              <div class="ax-alert">这是一个告示。<br />提醒注意。</div>
                         

主题

本框架一共定义了7种主题颜色,使用theme属性来定义,分别是primarysecondarysuccessdangerwarning(默认),infoight。详细说明和举例如下:

主色。
与系统颜色保持一致。
次要色
操作成功!
很危险!
提示注意!
这是一个广告!
名词解释
浅灰色文字提示
                                    <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>
                         

使用标题+简介

使用wrappercaptioncontent属性标签即可,注意查看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>
                                            <