AUI按钮

2.0中按钮按照Google Material 设计规范提供了多个色值的样式

aui-btn 默认按钮

aui-btn + aui-btn-primary 使用主题样式

aui-btn + aui-btn-block 块级按钮

aui-btn + aui-btn-outlined 边框按钮

aui-btn + aui-btn-block + aui-btn-sm 小号块级按钮

其他组合可以参考实例代码

<div class="aui-content-padded">
    <p>普通按钮</p>
    <p><div class="aui-btn">默认按钮(default)</div></p>
    <p><div class="aui-btn aui-btn-primary">默认按钮(primary)</div></p>
    <p><div class="aui-btn aui-btn-success">默认按钮(success)</div></p>
    <p><div class="aui-btn aui-btn-info">默认按钮(info)</div></p>
    <p><div class="aui-btn aui-btn-warning">默认按钮(warning)</div></p>
    <p><div class="aui-btn aui-btn-danger">默认按钮(danger)</div></p>
    <p><div class="aui-btn aui-btn-info"><span class="aui-iconfont aui-icon-edit"></span>图标按钮</div></p>
    <p><div class="aui-btn aui-btn-info">图标按钮</div></p>
    <p>块按钮类</p>
    <p><div class="aui-btn aui-btn-block">默认按钮(default)</div></p>
    <p><div class="aui-btn aui-btn-primary aui-btn-block">默认按钮(primary)</div></p>
    <p><div class="aui-btn aui-btn-success aui-btn-block">默认按钮(success)</div></p>
    <p><div class="aui-btn aui-btn-info aui-btn-block">默认按钮(info)</div></p>
    <p><div class="aui-btn aui-btn-warning aui-btn-block">默认按钮(warning)</div></p>
    <p><div class="aui-btn aui-btn-danger aui-btn-block">默认按钮(danger)</div></p>
    <p>块按钮类 - 默认增加10px底部外边距</p>
    <p><div class="aui-btn aui-btn-block aui-btn-outlined">默认按钮(default)</div></p>
    <p><div class="aui-btn aui-btn-primary aui-btn-block aui-btn-outlined">默认按钮(primary)</div></p>
    <p><div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined">默认按钮(success)</div></p>
    <p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-outlined">默认按钮(info)</div></p>
    <p><div class="aui-btn aui-btn-warning aui-btn-block aui-btn-outlined">默认按钮(warning)</div></p>
    <p><div class="aui-btn aui-btn-danger aui-btn-block aui-btn-outlined">默认按钮(danger)</div></p>
    <p>块按钮类(aui-btn-sm)</p>
    <p><div class="aui-btn aui-btn-block aui-btn-sm">默认按钮(default)</div></p>
    <p><div class="aui-btn aui-btn-primary aui-btn-block aui-btn-sm">默认按钮(primary)</div></p>
    <p><div class="aui-btn aui-btn-success aui-btn-block aui-btn-sm">默认按钮(success)</div></p>
    <p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm">默认按钮(info)</div></p>
    <p><div class="aui-btn aui-btn-warning aui-btn-block aui-btn-sm">默认按钮(warning)</div></p>
    <p><div class="aui-btn aui-btn-danger aui-btn-block aui-btn-sm">默认按钮(danger)</div></p>
    <p>块按钮类 - 默认增加10px底部外边距（aui-btn-sm）</p>
    <p><div class="aui-btn aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(default)</div></p>
    <p><div class="aui-btn aui-btn-primary aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(primary)</div></p>
    <p><div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(success)</div></p>
    <p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(info)</div></p>
    <p><div class="aui-btn aui-btn-warning aui-btn-block aui-btn-outlined aui-btn-sm">默认按钮(warning)</div></p>

上一篇：AUI信息条下一篇：AUI标签/角标/圆点