陈菜鸡的个人博客

2017-08-17

amaze ui还是很强大的，用的熟练的话工作效率是能有很大的提升，但是说实话，固定的样式是有点丑。

Amaze UI 中，行 .am-g 的宽度被设置为 100%，未限定最大宽度，会随着窗口自动缩放

.am-g {
     margin: 0 auto;
      width: 100%;
}

网格布局会形成左右内边距，可以在行 .am-g 上添加 .am-g-collapse，移除列的内边距（padding）。

[class*="am-u-"] {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  float: left;
  position: relative;
}
.am-g-collapse [class*="am-u-"] {
  padding-left: 0;
  padding-right: 0;
}

注意：如果am-u-xx-n中不足12等分，则最后一个am-u-xx-n向右浮动。

[class*="am-u-"] + [class*="am-u-"]:last-child {
      float: right;
}

因此，可以在最后一列加上.am-u-end使其左浮动

[class*="am-u-"] + [class*="am-u-"]:last-child {
      float: right;
}

列边距啪啪啪，添加 am-u-sm-offset-、am-u-sm-offset-、am-u-lg-offset- 设置列的左边距。am-u-sm-push-则相反

.am-u-sm-offset-1 {
     margin-left: 8.33333333%;
  }
.am-u-sm-push-11 {
     left: 91.66666667%;
}

单独使用.am-container形成容器，会产生左右内边距，注意：在手机端(<641px)为1rem

.am-container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  max-width: 1000px;
}
@media only screen and (min-width:641px) {
  .am-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

总结：Amaze UI使用通过am-g或与am-container形成不带最大宽度和带最大宽度为1000px的行布局，列布局则通过am-u-xx-n自定义布局

带最大宽度为1000px的行布局，可在行 .am-g 上添加 .am-g-collapse，    移除.am-container的内边距
<div class="am-container">
    <div class="am-g">
        <am-u-xx-n></am-u-xx-n> //自定义
    </div>
</div>

满屏铺满的行布局，已取消内边距。在行 .am-g 上添加 .am-g-collapse，移除列的内边距（padding）。
<div class="am-g am-g-collapse">
    <am-u-xx-n></am-u-xx-n> //自定义
</div>

浮动相关

am-fl 左浮动 .am-fr 右浮动 .am-center 水平居中 .am-cf 清除浮动

.am-align-xx浮动,与普通的左浮动右浮动相比较差不多，只不过是将浮动的元素加了自身浮动相反的外边距和底部边距

[class*='am-align-'] {
  margin-bottom: 1rem;
}
.am-align-left {
  margin-right: 1rem;
  float: left;
}
.am-align-right {
  margin-left: 1rem;
  float: right;
}

Amaze UI尺寸定于

-xs最小 -sm小 -default中等 -lg大 -xl超大

am-text-{size} 文字大小
am-btn-{size} 按钮大小
am-input-{size} 输入框文字大小，个人理解行高。只支持sm和lg(2.6版本)
am-icon-sm 放大150%
am-icon-md 放大 200% (不写默认)
am-icon-lg 放大 250%

Amaze UI定义了几个常见的颜色

default-默认；primary-蓝色；secondary-浅蓝色；success-绿色；warning-橙色；danger-红色；link-透明

am-text-{color} 设置文字颜色
am-btn-{color} 按钮设置颜色

通过上面的尺寸、颜色就能很快的定义一个amaze ui的button，例如

<button type="button" class="am-btn am-btn-default am-radius">默认样式</button>

在按钮样式的基础上添加 .am-btn class表明这是amaze ui按钮，添加.am-btn-{color}设置颜色；添加.am-btn-{size}设置大小，不写默认；添加.am-radius创建圆角按钮。

块级按钮，添加 .am-btn-block class。

.am-btn-block {
  display: block;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

源码可见：button为块级元素，取消内边距，宽度100%，铺满整个div。

带有Icon图标的按钮

<button class="am-btn am-btn-default">
  <i class="am-icon-cog"></i>
  设置
</button>

跟本身的按钮使用方式是一模一样的，通过在内部加i标签，形成icon图标。

注意：button按钮点击会产生border，假如用了link样式就出现白底蓝边，用a标签可以解决

button JS交互 loading状态

<button type="button" class="am-btn am-btn-primary btn-loading-example" 
    data-am-loading="{spinner: 'circle-o-notch', loadingText: '加载中...', resetText: '加载过了'}">
    按钮 - button 元素
</button>

spinner 加载动画图标，适用于支持 CSS3 动画、非 input 元素，写图标名称即可
loadingText 加载时显示的文字， 默认为 loading
resetText 重置以后的显示的文字，默认为原来的内容

js调用

$('.btn-loading-example').click(function () {
      var $btn = $(this)
      $btn.button('loading');//loading状态    
    $btn.button('reset');//复原
});

Amaze UI内外边距辅助类

Amaze UI在设计中，horizontal表示水平方向；scrollable表示垂直方向。

水平滚动：内容超出容器宽度时显示水平滚动条

am-scrollable-horizontal

垂直滚动: 内容超过设置的高度以后显示滚动条，默认设置的高度为 240px

am-scrollable -vertical

四周外边距：

.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}

其padding同理可得

Amaze UI给img定义了一些简单的样式，去掉图片原本的边框线，所以img元素中展示的其本身大小，可以通过.am-img-responsive满屏撑满

.am-img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

也可以通过.am-img-thumbnail添加边宽线

在Amaze UI使用表单时，需要在容器上添加 .am-form class，容器里的子元素才会应用 Amaze UI 定义的样式。

表单水平排列。在form表单中添加 .am-form-horizontal class 并结合网格系统使用

<form class="am-form am-form-horizontal">
      <div class="am-form-group">
        <label for="doc-ipt-3" class="am-u-sm-2 am-form-label">电子邮件</label>
        <div class="am-u-sm-10">
              <input type="email" id="doc-ipt-3" placeholder="输入你的电子邮件">
        </div>
      </div>
</form>

简答的来说，am-form-group中的元素会一行内排列

行内排列，在外围容器上添加 .am-form-inline。注意：行内排列的元素并没有设置右边距，默认使用 inline-block 元素的间距，压缩 HTML 后行内表单元素的右边距会消失，需要自行处理。

<form class="am-form-inline" role="form">
    <div class="am-form-group">
        <input type="email" class="am-form-field" placeholder="电子邮件">
    </div>
    <div class="am-form-group">
        <input type="password" class="am-form-field" placeholder="密码">
    </div>
</form>

简答的来说，am-form-group中的元素会从左往右进行排列

建议所有的input框全部放在am-form中，因为amaze ui已经帮我们封装好了。

.am-form select,
.am-form textarea,
.am-form input[type="text"],
.am-form input[type="password"],
.am-form input[type="datetime"],
.am-form input[type="datetime-local"],
.am-form input[type="date"],
.am-form input[type="month"],
.am-form input[type="time"],
.am-form input[type="week"],
.am-form input[type="number"],
.am-form input[type="email"],
.am-form input[type="url"],
.am-form input[type="search"],
.am-form input[type="tel"],
.am-form input[type="color"],
.am-form-field {
  display: block;
  width: 100%;
  padding: 0.5em;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
          transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

表格

Amaze UI通过给table添加.am-table设置基本样式；通过添加 .am-table-bordered 类生成边框线通过添加；通过添加 .am-table-radius 类生成外层圆角边宽；通过添加 .am-table-striped 类生成斑马线效果；通过添加 .am-table-hover 类生成hover 效果；

<table class="am-table am-table-bordered am-table-radius am-table-striped am-table-hover">
    <thead>
        <tr>
            <th>网站名称</th>
            <th>网址</th>
            <th>创建时间</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Amaze UI</td>
            <td>http://amazeui.org</td>
            <td>2012-10-01</td>
        </tr>
    </tbody>
</table>

模拟弹窗

下面就是Amaze UI一个常见的弹窗，官方文档中.am-modal后面还跟了.am-modal-alert或.am-modal-confirm,经过个人研究得出，没有实际用处，只是语义化而已。

//模拟弹窗开关
<button type="button" id='btn'></button>

//模拟弹窗
<div class="am-modal" tabindex="-1" id="modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">//模拟弹窗头部
          <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        //a标签表示可以关闭当前弹窗的按钮
    </div>
    <div class="am-modal-bd">
          //模拟弹窗内容区
    </div>
    <div class="am-modal-footer">
        //模拟弹窗底部，底部一般放按钮，在一行等比例显示
        <span class="am-modal-btn" data-am-modal-cancel>取消</span>
          <span class="am-modal-btn" data-am-modal-confirm>提交</span>
    </div>
  </div>
</div>

//js调用，通过按钮点击事件触发

$('#btn').onclick = function(){
    $('#model').modal({
        width: number    //可不写，
        height: number //可不写，
        onConfirm:function(options){
            //对应点击事件 <span class="am-modal-btn" data-am-modal-confirm>提交</span>
        }
        onCancel:function(options){
            //对应点击事件 <span class="am-modal-btn" data-am-modal-cancel>取消</span>
        }
    })
}