Amaze UI

Utility


utility 提供了开发者日常中经常使用的一些 Class , 方便开发者快速开发减少代码冗余。

布局相关

容器

基本容器

.am-container,盒模型为 border-box,水平居中对齐,清除浮动,在 网格 中有相关说明。

水平滚动

表格标题演示表格标题演示表格标题演示表格标题演示表格标题演示表格标题演示表格标题演示表格标题演示
表格数据表格数据表格数据表格数据表格数据表格数据表格数据表格数据
表格数据表格数据表格数据表格数据表格数据表格数据表格数据表格数据
表格数据表格数据表格数据表格数据表格数据表格数据表格数据表格数据
Copy
<div class="am-scrollable-horizontal">
  <table class="am-table am-table-bordered am-table-striped am-text-nowrap">
    <thead>
    <tr>
      <th>表格标题演示</th>
      <th>表格标题演示</th>
      <th>表格标题演示</th>
      <th>表格标题演示</th>
      <th>表格标题演示</th>
      <th>表格标题演示</th>
      <th>表格标题演示</th>
      <th>表格标题演示</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
    </tr>
    <tr>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
    </tr>
    <tr>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
      <td>表格数据</td>
    </tr>
    </tbody>
  </table>
</div>

.am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条。

垂直滚动

《念奴娇 赤壁怀古》

大江东去,浪淘尽,千古风流人物。

故垒西边,人道是,三国周郎赤壁。

乱石穿空,惊涛拍岸,卷起千堆雪。

江山如画,一时多少豪杰。

遥想公瑾当年,小乔初嫁了,雄姿英发。

羽扇纶巾,谈笑间,樯橹灰飞烟灭。

故国神游,多情应笑我,早生华发。

人生如梦,一尊还酹江月。

Copy
<div class="am-scrollable-vertical">
  <p>《念奴娇 赤壁怀古》</p>
  <p>大江东去,浪淘尽,千古风流人物。</p>
  <p>故垒西边,人道是,三国周郎赤壁。</p>
  <p>乱石穿空,惊涛拍岸,卷起千堆雪。</p>
  <p>江山如画,一时多少豪杰。</p>
  <p>遥想公瑾当年,小乔初嫁了,雄姿英发。</p>
  <p>羽扇纶巾,谈笑间,樯橹灰飞烟灭。</p>
  <p>故国神游,多情应笑我,早生华发。</p>
  <p>人生如梦,一尊还酹江月。</p>
</div>

.am-scrollable-vertical 内容超过设置的高度以后显示滚动条,默认设置的高度为 240px

浮动相关

Copy
<div class="am-cf" style="padding: 10px; border: 1px dashed #ddd">
  <button class="am-btn am-btn-primary am-fl">向左浮动</button>
  <button class="am-btn am-btn-primary am-fr">向右浮动</button>
  <button class="am-btn am-btn-primary am-center">水平居中</button>
</div>
  • .am-cf - 清除浮动
  • .am-nbfc - 使用 overflow: hidden; 创建新的 BFC 清除浮动(参考
  • .am-fl - 左浮动
  • .am-fr - 右浮动
  • .am-center - 水平居中

垂直对齐

垂直对齐的原理为把父容器内的 “幽灵”元素(使用伪元素)高度设置为 100%,再通过设置需要对齐的元素 vertical-align 属性实现(参考)。

Class描述
.am-vertical-align将这个 class 添加到父容器,父容器需要指定高度。
.am-vertical-align-middle需要垂直居中的元素
.am-vertical-align-bottom添加到需要底部对齐的元素

对齐方式

文字垂直居中
文字底部对齐
Copy
<div class="am-vertical-align" style="height: 150px; border: 1px dashed #ddd;">
  <div class="am-vertical-align-middle">
    文字垂直居中
  </div>
</div>

<div class="am-vertical-align" style="height: 150px; border: 1px dashed #ddd;">
  <div class="am-vertical-align-bottom">
    文字底部对齐
  </div>
</div>

设置父级 class 为 am-vertical-align 子级 class 进行相应设置即可实现效果。

  • am-vertical-align-middle 垂直居中
  • am-vertical-align-bottom 底部对齐

参考链接

元素显示

显示属性

  • .am-block - display 设置为 block
  • .am-inline - display 设置为 inline
  • .am-inline-block - display 设置为 inline-block

隐藏元素

添加 .am-hide class。

.am-hide {
  display: none !important;
  visibility: hidden !important;
}
隐藏了,Demo 里看不到按钮
Copy
隐藏了,Demo 里看不到按钮
<button class="am-btn am-btn-danger am-hide">隐藏的按钮</button>

使用 am-hide class 元素即可隐藏。

内外边距

尺寸

  • xs - 5px
  • sm - 10px
  • default - 16px
  • lg - 24px
  • xl - 32px

class 列表

不加尺寸为默认大小(16px),{size} 可以为 0, xs, sm, lg, xl 中之一。

MarginPadding
.am-margin
.am-margin-{size}
.am-padding
.am-padding-{size}
水平方向外边距
.am-margin-horizontal
.am-margin-horizontal-{size}
水平方向内边距
.am-padding-horizontal
.am-padding-horizontal-{size}
垂直方向外边距
.am-margin-vertical
.am-margin-vertical-{size}
垂直方向内边距
.am-padding-vertical
.am-padding-vertical-{size}
左外边距
.am-margin-left
.am-margin-left-{size}
左内边距
.am-padding-left
.am-padding-left-{size}
右外边距
.am-margin-right
.am-margin-right-{size}
右内边距
.am-padding-right
.am-padding-right-{size}
上外边距
.am-margin-top
.am-margin-top-{size}
上内边距
.am-padding-top
.am-padding-top-{size}
下外边距
.am-margin-bottom
.am-margin-bottom-{size}
下内边距
.am-padding-bottom
.am-padding-bottom-{size}

圆角

设置圆角的大小:

  • am-square - 0px
  • am-radius - 4px
  • am-round - 1000px
  • am-circle - 50%

文本工具

字体

下面为几种字体系列演示:

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久,而忘记了我们为什么出发。
千萬不要因為走得太久,而忘記了我們為什麼出發。

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久,而忘记了我们为什么出发。
千萬不要因為走得太久,而忘記了我們為什麼出發。

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久,而忘记了我们为什么出发。
千萬不要因為走得太久,而忘記了我們為什麼出發。

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久,而忘记了我们为什么出发。
千萬不要因為走得太久,而忘記了我們為什麼出發。

Copy
<p>
  The quick brown fox jumps over the lazy dog. <br/>
  千万不要因为走得太久,而忘记了我们为什么出发。 <br/>
  千萬不要因為走得太久,而忘記了我們為什麼出發。
</p>

<p class="am-serif">
  The quick brown fox jumps over the lazy dog. <br/>
  千万不要因为走得太久,而忘记了我们为什么出发。 <br/>
  千萬不要因為走得太久,而忘記了我們為什麼出發。
</p>

<p class="am-kai">
  The quick brown fox jumps over the lazy dog. <br/>
  千万不要因为走得太久,而忘记了我们为什么出发。 <br/>
  千萬不要因為走得太久,而忘記了我們為什麼出發。
</p>

<p class="am-monospace">
  The quick brown fox jumps over the lazy dog. <br/>
  千万不要因为走得太久,而忘记了我们为什么出发。 <br/>
  千萬不要因為走得太久,而忘記了我們為什麼出發。
</p>
  • .am-sans-serif 非衬线,Amaze UI 主要使用的。
  • .am-serif 衬线字体,中文为宋体,Amaze UI 中未使用。
  • .am-kai 应为衬线字体,中文为楷体,Amaze UI <blockquote> 使用此。
  • .am-monospace 等宽字体,Amaze UI 源代码中使用。

文本颜色

千万不要因为走得太久,而忘记了我们为什么出发。

千万不要因为走得太久,而忘记了我们为什么出发。

千万不要因为走得太久,而忘记了我们为什么出发。

千万不要因为走得太久,而忘记了我们为什么出发。

千万不要因为走得太久,而忘记了我们为什么出发。

千万不要因为走得太久,而忘记了我们为什么出发。

Copy
<p>千万不要因为走得太久,而忘记了我们为什么出发。</p>
<p class="am-text-primary">千万不要因为走得太久,而忘记了我们为什么出发。</p>
<p class="am-text-secondary">千万不要因为走得太久,而忘记了我们为什么出发。</p>
<p class="am-text-success">千万不要因为走得太久,而忘记了我们为什么出发。</p>
<p class="am-text-warning">千万不要因为走得太久,而忘记了我们为什么出发。</p>
<p class="am-text-danger">千万不要因为走得太久,而忘记了我们为什么出发。</p>

提供了预设的文字颜色。

  • am-text-primary
  • am-text-secondary
  • am-text-success
  • am-text-warning
  • am-text-danger

链接颜色减淡

Copy
<a href="##" class="am-link-muted">超级链接</a>

<h3 class="am-link-muted"><a href="##">超级链接</a></h3>

<ul class="am-link-muted">
  <li><a href="##">超级链接</a></li>
  <li><a href="##">超级链接</a></li>
</ul>

超链接颜色默认为主色(蓝色),添加 .am-link-muted class 将链接颜色设置为灰色。

文字大小

千万不要因为走得太久,而忘记了我们为什么出发。

千万不要因为走得太久,而忘记了我们为什么出发。

千万不要因为走得太久,而忘记了我们为什么出发。

千万不要因为走得太久,而忘记了我们为什么出发。

千万不要因为走得太久,而忘记了我们为什么出发。

千万不要因为走得太久,而忘记了我们为什么出发。

千万不要因为走得太久,而忘记了我们为什么出发。

Copy
<p class="am-text-xs am-text-truncate">千万不要因为走得太久,而忘记了我们为什么出发。</p>
<p class="am-text-sm am-text-truncate">千万不要因为走得太久,而忘记了我们为什么出发。</p>
<p class="am-text-default am-text-truncate">千万不要因为走得太久,而忘记了我们为什么出发。</p>
<p class="am-text-lg am-text-truncate">千万不要因为走得太久,而忘记了我们为什么出发。</p>
<p class="am-text-xl am-text-truncate">千万不要因为走得太久,而忘记了我们为什么出发。</p>
<p class="am-text-xxl am-text-truncate">千万不要因为走得太久,而忘记了我们为什么出发。</p>
<p class="am-text-xxxl am-text-truncate">千万不要因为走得太久,而忘记了我们为什么出发。</p>

提供了预设字体大小。

  • .am-text-xs - 12px
  • .am-text-sm - 14px
  • .am-text-default - 16px
  • .am-text-lg - 18px
  • .am-text-xl - 24px
  • .am-text-xxl - 32px
  • .am-text-xxxl - 42px

常用字号参考:

REMsPixels
6.8rem68px
5rem50px
3.8rem38px
3.2rem32px
2.8rem28px
2.4rem24px
2.2rem22px
1.8rem18px
1.6rem (base)16px (base)
1.4rem14px
1.2rem12px
1rem10px
0.8rem8px
0.5rem5px

文本左右对齐

文字对齐辅助 class,可设置为响应式。

左对齐右对齐居中自适应
.am-text-left.am-text-right.am-text-center.am-text-justify
.am-sm-text-left.am-sm-text-right.am-sm-text-center.am-sm-text-justify
.am-sm-only-text-left.am-sm-only-text-right.am-sm-only-text-center.am-sm-only-text-justify
.am-md-text-left.am-md-text-right.am-md-text-center.am-md-text-justify
.am-md-only-text-left.am-md-only-text-right.am-md-only-text-center.am-md-only-text-justify
.am-lg-text-left.am-lg-text-right.am-lg-text-center.am-lg-text-justify

文本垂直对齐

顶部对齐
居中对齐
底部对齐
Copy
<div class="am-g">
  <div class="am-u-md-4">
    <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/120/h/120" alt="" width="48" height="48"/>
    <span class="am-text-top">顶部对齐</span>
  </div>

  <div class="am-u-md-4">
    <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/120/h/120" alt="" width="48" height="48"/>
    <span class="am-text-middle">居中对齐</span>
  </div>

  <div class="am-u-md-4">
    <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/120/h/120" alt="" width="48" height="48"/>
    <span class="am-text-bottom">底部对齐</span>
  </div>
</div>
  • .am-text-top - 顶对齐
  • .am-text-middle - 居中对齐
  • .am-text-bottom - 底对齐

文字换行及截断

Class描述
.am-text-truncate禁止换行,超出容器部分截断(以 ... 结束)
.am-text-break超出文字容器宽度时强制换行,主要用于英文排版
.am-text-nowrap禁止换行,不截断超出容器宽度部分

单行文字截断

限制宽度并添加 am-text-truncate class 单行文字截取功能即可实现。
Copy
<div class="am-text-truncate" style="width: 250px; padding: 10px; border: 1px dashed #ddd;">限制宽度并添加 am-text-truncate class 单行文字截取功能即可实现。</div>

.am-text-truncate,元素 display 属性需为 blockinline-block

参考链接:

多行文字截断

在只针对 PC 端开发,可以通过后端控制输出文字的长度来实现固定行数的效果。

但在响应式页面,这可能不再适用,只能输出足够多的文字,然后通过前端截取需要的行数。

Webkit 内核的浏览器可以通过 -webkit-line-clamp 私有属性实现多行文字截取。

.line-clamp {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; // 这里修改为要显示的行数
  -webkit-box-orient: vertical;
}

如果需要考虑其他内核的浏览器,可以使用 Amaze UI 封装的 Mixin:

line-clamp(@lines, @line-height: 1.3em) {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lines; // number of lines to show
  overflow: hidden;
  line-height: @line-height;
  max-height: @line-height * @lines;
}

参考链接

图片替换

Amaze UI

Copy
<style>
  .doc-ir-demo {
    background: #3bb4f2;
  }

  .doc-ir-demo h1 {
    margin: 0;
    padding: 10px;
  }

  .doc-ir-demo a {
    display: block;
    height: 29px;
    width: 125px;
    background: url(http://s.amazeui.org/media/i/brand/amazeui-w.png) no-repeat left center;
    -webkit-background-size: 125px 24px;
    background-size: 125px 24px;
  }
</style>
<header class="doc-ir-demo">
  <h1><a href="/" class="am-text-ir">Amaze UI</a></h1>
</header>

CSS Image Replacement 是一个历史悠久的技术,也随着前端技术的发展不断进化。

图片替换技术兼顾显示效果、可访性、SEO,推荐开发者在网站 Logo 、设计特殊的栏目标题等场合使用。

使用 .am-text-ir class 结合背景图片实现图片替换。

图文混排辅助

那时候刚好下着雨,柏油路面湿冷冷的,还闪烁着青、黄、红颜色的灯火。我们就在骑楼下躲雨,看绿色的邮筒孤独地站在街的对面。我白色风衣的大口袋里有一封要寄给南部的母亲的信。樱子说她可以撑伞过去帮我寄信。我默默点头。

“谁叫我们只带来一把小伞哪。”她微笑着说,一面撑起伞,准备过马路帮我寄信。从她伞骨渗下来的小雨点,溅在我的眼镜玻璃上。

随着一阵拔尖的煞车声,樱子的一生轻轻地飞了起来。缓缓地,飘落在湿冷的街面上,好像一只夜晚的蝴蝶。

虽然是春天,好像已是秋深了。

她只是过马路去帮我寄信。这简单的行动,却要叫我终身难忘了。我缓缓睁开眼,茫然站在骑楼下,眼里裹着滚烫的泪水。世上所有的车子都停了下来,人潮涌向马路中央。没有人知道那躺在街面的,就是我的,蝴蝶。这时她只离我五公尺,竟是那么遥远。更大的雨点溅在我的眼镜上,溅到我的生命里来。

为什么呢?只带一把雨伞?

然而我又看到樱子穿着白色的风衣,撑着伞,静静地过马路了。她是要帮我寄信的。那,那是一封写给南部母亲的信。我茫然站在骑楼下,我又看到永远的樱子走到街心。其实雨下得并不大,却是一生一世中最大的一场雨。而那封信是这样写的,年轻的樱子知不知道呢?

妈:我打算在下个月和樱子结婚。

Copy
<div class="am-cf">
  <p class="am-align-left">
    <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt="" width="240"/>
  </p>
  <p style="margin-top: 0">那时候刚好下着雨,柏油路面湿冷冷的,还闪烁着青、黄、红颜色的灯火。我们就在骑楼下躲雨,看绿色的邮筒孤独地站在街的对面。我白色风衣的大口袋里有一封要寄给南部的母亲的信。樱子说她可以撑伞过去帮我寄信。我默默点头。</p>

  <p>“谁叫我们只带来一把小伞哪。”她微笑着说,一面撑起伞,准备过马路帮我寄信。从她伞骨渗下来的小雨点,溅在我的眼镜玻璃上。</p>

  <p>随着一阵拔尖的煞车声,樱子的一生轻轻地飞了起来。缓缓地,飘落在湿冷的街面上,好像一只夜晚的蝴蝶。</p>

  <p>虽然是春天,好像已是秋深了。</p>

  <div class="am-align-right">
    <img src="http://s.amazeui.org/media/i/demos/bing-2.jpg" alt="" width="240"/>
  </div>

  <p>
    她只是过马路去帮我寄信。这简单的行动,却要叫我终身难忘了。我缓缓睁开眼,茫然站在骑楼下,眼里裹着滚烫的泪水。世上所有的车子都停了下来,人潮涌向马路中央。没有人知道那躺在街面的,就是我的,蝴蝶。这时她只离我五公尺,竟是那么遥远。更大的雨点溅在我的眼镜上,溅到我的生命里来。</p>

  <p>为什么呢?只带一把雨伞?</p>

  <p>
    然而我又看到樱子穿着白色的风衣,撑着伞,静静地过马路了。她是要帮我寄信的。那,那是一封写给南部母亲的信。我茫然站在骑楼下,我又看到永远的樱子走到街心。其实雨下得并不大,却是一生一世中最大的一场雨。而那封信是这样写的,年轻的樱子知不知道呢?</p>

  <p>妈:我打算在下个月和樱子结婚。</p>
</div>

使用 float 实现的类似 HTML align 属性的效果,父容器要清除浮动。与 .am-fl.am-fr 相比,浮动的元素加了 margin

  • .am-align-left
  • .am-align-right

响应式辅助

视口大小

.am-[show|hide]-[sm|md|lg][-up|-down|-only],调整浏览器窗口大小查看元素的显隐。

class 释义:

  • show 显示,hide 隐藏,这应该不难理解;
  • smmdlg 是划分屏幕大小区间的缩写,对应 small、medium、large,网格里面做了说明;
  • down 指小于区间,up 指大于区间, only 指仅在这个区间。

按照上面的翻译一下下面的 class:

  • .am-show-sm-only: 只在 sm 区间显示
  • .am-show-sm-up: 大于 sm 区间时显示
  • .am-show-sm: 在 sm 区间显示,如果没有设置 mdlg 区间的显隐,则元素在所有区间都显示
  • .am-show-md-down: 小于 md 区间时显示
显示辅助 class隐藏辅助 class
.am-show-sm-only
.am-show-sm-up
.am-show-sm
.am-show-sm-down
.am-hide-sm-only
.am-hide-sm-up
.am-hide-sm
.am-hide-sm-down
.am-show-md-only
.am-show-md-up
.am-show-md
.am-show-md-down
.am-hide-md-only
.am-hide-md-up
.am-hide-md
.am-hide-md-down
.am-show-lg-only
.am-show-lg-up
.am-show-lg
.am-show-lg-down
.am-hide-lg-only
.am-hide-lg-up
.am-hide-lg
.am-hide-lg-down
  • 仅 small 可见
  • medium + 可见
  • 仅 medium 可见
  • large 可见
  • 仅 large 可见
Copy
<ul>
  <li class="am-show-sm-only">仅 small 可见</li>
  <li class="am-show-md-up">medium + 可见</li>
  <li class="am-show-md-only">仅 medium 可见</li>
  <li class="am-show-lg-up">large 可见</li>
  <li class="am-show-lg-only">仅 large 可见</li>
</ul>

屏幕方向

  • 横屏可见
  • 竖屏可见
Copy
<ul>
  <li class="am-show-landscape">横屏可见</li>
  <li class="am-show-portrait">竖屏可见</li>
</ul>
  • 横屏:.am-show-landscape, .am-hide-landscape
  • 竖屏:.am-show-portrait, .am-hide-portrait