AmazeUI常用的辅助---类

这些类其实和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 即可；