这些类其实和bootstrap中的一些类很相似,可以多记记,这样效率会高点,当然也可以不记,用的时候查文档也行,但是推荐一劳永逸的做法。
默认class中以am开头的,非特殊情况下都是amazeUI中的类名。
另外自己在命名类名的时候尽量不要以am开头,类似与angular中的指令都是以ng-开头,自己封装指令的话尽量不要与官方写法相同,以免冲突。
设置容器
.am-container 放到网格中
设置 水平/垂直 滚动条
- .am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条。
- .am-scrollable-vertical 内容超过设置的高度以后显示滚动条,默认设置的高度为 240px。
关于浮动
- .am-fl 左浮动(float left);
- .am-fr 右浮动;
- .am-center 水平居中;
.am-center {
display: block;
margin-left: auto;
margin-right: auto;
}
- .am-cf 清除浮动 (clean float)
- .am-nbfc 使用overflow: hidden; 创建新的BFC清除浮动。
.am-cf {
.clearfix();
}
示例:
<div class="am-cf">
<button class="am-btn am-btn-success am-fl">向左浮动</button>
<button class="am-btn am-btn-success am-fr">向右浮动</button>
</div>
设置垂直对齐
原理: 将父容器内的 “幽灵”元素(使用伪元素)高度设置为 100%,再通过设置需要对齐的元素 vertical-align 属性实现。
怎么玩?
- .am-vertical-align 将这个 class 添加到父容器,父容器需要指定高度。
- .am-vertical-align-middle 需要垂直居中的元素
- .am-vertical-align-bottom 添加到需要底部对齐的元素
示例1:
<div class="am-vertical-align" style="height: 150px;">
<div class="am-vertical-align-middle">
我是需要垂直居中的元素!
</div>
</div>
示例2:
<div class="am-vertical-align" style="height: 150px;">
<div class="am-vertical-align-bottom">
我是底部对齐的元素!
</div>
</div>
无论该元素是垂直居中对齐,还是底部对齐,都要给包裹该元素的父元素添加一个类 .am-vertical-align;
设置元素的显示/隐藏
- .am-block 显示,display 设置为 block;
- .am-inline 显示,display 设置为 inline;
- .am-inline-block 显示,display 设置为 inline-block;
- .am-hide 隐藏
原理如下:
.am-hide {
display: none !important;
visibility: hidden !important;
}
尺寸
- xs 5px
- sm 10px
- default 16px
- lg 24px
- xl 32px
class 列表
不加尺寸为默认大小(16px),{size} 可以为 0, xs, sm, lg, xl 中之一。
v2.4: 增加 0 值的内外边距辅助类
示例:设置外边距
- .am-margin
- .am-margin-{size}
水平方向外边距 - .am-margin-horizontal
- .am-margin-horizontal-{size}
垂直方向外边距 - .am-margin-vertical
- .am-margin-vertical-{size}
左外边距 - .am-margin-left
- .am-margin-left-{size}
右外边距 - .am-margin-right
- .am-margin-right-{size}
上外边距 - .am-margin-top
- .am-margin-top-{size}
下外边距 - .am-margin-bottom
- .am-margin-bottom-{size}
同理,可以设置 上/下/左/右/水平/垂直 方向的 内边距,只需将上面类中的margin改为 padding 即可;