Getting Started 新手上路
Usage 使用方法

介绍

咪乐|直播|ios版app下载 在上海一家事业单位工作的王先生告诉记者,不久前他五岁多的小孩拿他手机玩,无意间购买下载了许多应用软件,等大人发现时手机已自动扣费两百多元。

AntUI 是蚂蚁金服无线H5样式库,是对外开放的一套支付宝APP视觉交互规范。旨在帮助用户快速完成H5页面开发,并提供给用户在支付宝APP内一致的体验;

目前AntUI只提供静态的规范样式,业务场景中的复杂效果以及配合js完成的交互效果需要业务自己控制;

目前AntUI组件只覆盖支付宝App中常用的业务场景,并随钱包版本更新而更新,样式库更新发布后需要各业务手动更新样式库版本;

AntUI提供的交互组件, 你可以根据自己的业务情况进行二次开发.

旺旺交流群: 1358109297

当前版本包含以下控件:

是否默认集成 模块名称 说明
? Flexbox 弹性布局
? Writing 文字书写
? Whitespace 上下留白
? Wingblank 两翼留白
? button 按钮
? list 列表
? form 表单
? tab 选项卡
? message 提示
? popmenu 浮动菜单
? notice 公告
? process 支付进度
? card 卡片
? article 常规文章
? search 搜索
? dialog 对话框
? page-result 通用异常结果页

如果你要查看历史文档,请点击这里:AntUI更新日志

注意: 9.9版本较之前版本AntUI(9.6-)有较大改动,版本升级需要手动修改部分代码,具体修改方式请参见: AntUI9.9 升级手册

手机扫码查看demo:

https://render.alipay.com/p/f/antui/demo.html

include 引入方式

方式一:使用tnpm进行安装

tnpm install @alipay/antui
安装后,只需要在页面中引入style/antui.css或者dist/antui.min.css其中之一即可,例如:

[单独使用某个控件(list控件),引入dist/widget/list.min.css 或者 style/widget/list.css]

<link rel="stylesheet" href="path/to/antui/dist/antui.min.css"/>
<!-- <link rel="stylesheet" href="path/to/antui/dist/widget/list.min.css"/> -->
<script src="path/to/antui/dist/antui.min.js"></script>

方式二:CDN方式引入

在页面上引入支付宝CDN地址即可.

rem版本 推荐
<!-- 主文件 -->
<link rel="stylesheet" href="https://as.alipayobjects.com/g/h5-lib/antui/{{ version }}/rem/antui.css"/>

<!-- 组件 -->
<link rel="stylesheet" href="https://as.alipayobjects.com/g/h5-lib/antui/{{ version }}/rem/??widget/message.css,widget/notice.css,widget/page-result.css"/>

<!-- js -->
<script src="https://as.alipayobjects.com/g/h5-lib/antui/{{ version }}/rem/antui.js"></script>
普通版本
<!-- 主文件 -->
<link rel="stylesheet" href="https://as.alipayobjects.com/g/h5-lib/antui/{{ version }}/antui.css"/>

<!-- 组件 -->
<link rel="stylesheet" href="https://as.alipayobjects.com/g/h5-lib/antui/{{ version }}/??widget/message.css,widget/notice.css,widget/page-result.css"/>

<!-- js -->
<script src="https://as.alipayobjects.com/g/h5-lib/antui/{{ version }}/antui.js"></script>
全组件打包版本

组件全部打包之后,单个CSS文件较大(gzip之后73KB),对于H5页面来说并不适合,所以我们不推荐直接引用全部资源的样式版本.

<!-- rem版 -->
<link rel="stylesheet" href="https://as.alipayobjects.com/g/h5-lib/antui/{{ version }}/rem/antui-all.css"/>

<!-- 普通版 -->
<link rel="stylesheet" href="https://as.alipayobjects.com/g/h5-lib/antui/{{ version }}/antui-all.css"/>

html-templet 推荐HTML

<!DOCTYPE html>
<!-- A11Y:注意设置页面的 lang 属性 -->
<html lang="zh">
<head>
  <meta charset="utf-8" />
  <!-- A11Y:打开页面时,屏幕阅读器会首先阅读 title 的内容,确保 title 准确描述页面 -->
  <title>Examples</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no, email=no" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
  <!-- A11Y:如果有无障碍方面的需求,建议使用下面的 viewport 设置,不要禁止页面缩放 -->
  <!--<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />-->
  <link rel="stylesheet" href="path/to/antui/dist/antui.min.css" />
  <script src="path/to/antui/dist/antui.min.js"></script>
  </head>
<body ontouchstart="">
  <!--你的html页面代码-->
</body>
</html>

rem版本说明

antui已对ios,android进行适配,会自动根据ios,android分辨率设置不同rem基准值。

为750为基准尺寸,且已设置 html{fontSize: 100px;}

不足750的ios机型(如iphone4,4s,5,5s 目前按设计规范要求都是使用的750尺寸,如需要不同适配,需要再重写基准设置);

其他机型(包含android) 已经按 document.documentElement['clientWidth']*100/375 进行了自动换算和设置不同基准值

注意:antui 未修改meta的倍数,采用meta默认设置(width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no), 如果页面中设置meta=0.5(1倍以下)会影响antui的使用效果。

Basic Style 基础样式
Reset or Normalize
base/reset

虽然文件名为reset,其实只是精简版的reset。

reset和normalize的区别可以看出,一个是控制倾向,一个是自然倾向。

精简版reset中,主要保留的是一些布局类reset(如margin:0),去掉了控制倾向比较强的部分。

同时,一些不常用的html5标签,也被去除。

特性

  • 最低控制 用户没有重置类样式时,也能保证基本显示
  • 自由兼容 使用者可以自由额外引入reset or normalize,而不用担心冲突
  • 节约代码 去掉一些不必要的代码,节约是良好的美德

CSS源码

*, *:before, *:after {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
h4, h5, h6, form, fieldset, legend,
input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset, img {
  border: 0;
}

li {
  list-style: none;
}

caption, th {
  text-align: left;
}

q:before,
q:after {
  content: "";
}

input:password {
  ime-mode: disabled;
}

/* A11Y:移除了 outline 样式,注意设置其他 :focus 样式,方便残障人士识别焦点 */
*:focus {
  outline: none;
}
Smooth 默认全局属性
base/smooth

position 作用定位

一个简单的钱包个性样式小文件,主要写一些简易的全局属性,仅此而已。

取名smooth,是希望它能成为全局属性和组件属性的一个简单的润滑衔接点。

source css代码

html,
body {
  min-height: 100%;
}

body {
  -webkit-user-select: none;
  user-select: none;
}

a,
img {
  -webkit-touch-callout: none;
}

body {
  background-color: #f5f5f9;
}

body.am-bg-white {
  background-color: #fff;
}

body, input, textarea, select, button {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

input {
  line-height: normal;
}

a {
  color: #0af;
  text-decoration: none;
}

.fn-clear:after {
  content: "\0200";
  visibility: hidden;
  display: block;
  font-size: 0;
  clear: both;
  height: 0;
}

.fn-hide {
  display: none;
}

.fn-left {
  float: left;
}

.fn-right {
  float: right;
}

.am-content {
  margin-left: 10px;
  margin-right: 10px;
}

.am-fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  width: 100%;
}

.am-fixed-bottom {
  top: inherit;
  bottom: 0;
}

.user-select {
  -webkit-user-select: auto;
  user-select: auto;
}

float 浮动相关

<div class="fn-clear">
    <div class="fn-left">fn-left 左浮动</div>
    <div class="fn-right">fn-right 右浮动</div>
</div>
Flexbox 弹性布局
util/flexbox

default 基础样式

<div class="am-flexbox">
    <div class="am-flexbox-item">2列</div>
    <div class="am-flexbox-item">2列</div>
</div>
<div class="am-flexbox">
    <div class="am-flexbox-item">3列</div>
    <div class="am-flexbox-item">3列</div>
    <div class="am-flexbox-item">3列</div>
</div>
<div class="am-flexbox">
    <div class="am-flexbox-item">4列</div>
    <div class="am-flexbox-item">4列</div>
    <div class="am-flexbox-item">4列</div>
    <div class="am-flexbox-item">4列</div>
</div>
<div class="am-flexbox">
    <div class="am-flexbox-item">5列</div>
    <div class="am-flexbox-item">5列</div>
    <div class="am-flexbox-item">5列</div>
    <div class="am-flexbox-item">5列</div>
    <div class="am-flexbox-item">5列</div>
</div>
<div class="am-flexbox">
    <div style="width:70px;">定宽70px</div>
    <div class="am-flexbox-item">自适应</div>
</div>
<div class="am-flexbox">
    <div class="am-flexbox-item">3</div>
    <div class="am-flexbox-item am-ft-ellipsis">自定义个性化自定义个性化自定义个性化自定义个性化</div>
    <div class="am-flexbox-item">3</div>
</div>
Writing 文字书写
util/writing

h1 - h6 标题

<h1>标题文字 h1</h1>
<h2>标题文字 h2</h2>
<h3>标题文字 h3</h3>
<h4>标题文字 h4</h4>
<h5>标题文字 h5</h5>
<h6>标题文字 h6</h6>

align 对齐相关

<div class="am-ft-left">
  文字左对齐
</div>
<div class="am-ft-center">
  文字中对齐
</div>
<div class="am-ft-right">
  文字右对齐
</div>

size 字体大小

<div class="am-ft-20">
  20px 支付宝
</div>
<div class="am-ft-xl">
  特大 18px
</div>
<div class="am-ft-lg">
  较大 17px
</div>
<div class="am-ft-md">
  正常 16px
</div>
<div class="am-ft-sm">
  小 14px
</div>
<div class="am-ft-13">
  13px 支付宝
</div>
<div class="am-ft-12">
  12px 支付宝
</div>

color 颜色相关

<div class="am-ft-white">
  仅用于标题按钮和深色内容 白色文字
</div>
<div class="am-ft-black">
  文本主色 输入框标签,输入内容
</div>
<div class="am-ft-darkgray">
  tab文字,文本
</div>
<div class="am-ft-gray">
  小标题,列表下方说明,表单右侧说明
</div>
<div class="am-ft-lightgray">
  暗提示 浅灰色文字
</div>
<div class="am-ft-blue">
  协议文本色 蓝色
</div>
<div class="am-ft-orange">
  重点提示色(如金额),可根据业务自行使用
</div>
<div class="am-ft-green">
  绿色文字,用于提示
</div>
<div class="am-ft-red">
  红色文字,用于公告
</div>

more 特殊设置

<div class="am-ft-ellipsis">根据父元素宽度截取 文字单行自动截取文字单行自动截取文字单行自动截取文字单行自动截取文字单行自动截取</div>
<div class="am-ft-ellipsis" style="width:200px;">限制宽度200px 文字单行截取文字单行截取文字单行截取文字单行截取文字单行截取</div>
<div class="am-ft-ellipsis" style="width:100px;">限制宽度100px 文字单行截取文字单行截取文字单行截取文字单行截取文字单行截取</div>
Whitespace 上下留白
util/whitespace
  • 为独立block节点
  • 一般用于调整两个元素之间的上下间距使用

注意: 此部分样式一般情况下不建议使用,近期可能会废弃.关于此处如有疑问请提issue来一起讨论.

default 基础样式

<h6>height 5px</h6>
<div class="am-whitespace ws5px"></div>

<h6>height 10px</h6>
<div class="am-whitespace ws10px"></div>

<h6>height 15px</h6>
<div class="am-whitespace ws15px"></div>

<h6>height 20px</h6>
<div class="am-whitespace ws20px"></div>

<h6>height 25px</h6>
<div class="am-whitespace ws25px"></div>

<h6>height 4px</h6>
<div class="am-whitespace ws4px"></div>

<h6>height 8px</h6>
<div class="am-whitespace ws8px"></div>

<h6>height 12px</h6>
<div class="am-whitespace ws12px"></div>

<h6>height 16px</h6>
<div class="am-whitespace ws16px"></div>

<h6>height 24px</h6>
<div class="am-whitespace ws24px"></div>
Wingblank 两翼留白
util/wingblank
  • 左右为附加margin
  • 可以新增容器节点使用

注意: 此部分样式一般情况下不建议使用,近期可能会废弃,请使用.am-content class来调整间距,默认会按照钱包最新规范设置.如果需要调整左右间距,请自行编写CSS.关于此处如有疑问请提issue来一起讨论.

default 基础样式

<h6>margin 左右 10px</h6>
<div class="am-wingblank wb10px"></div>

<h6>margin 左右 15px</h6>
<div class="am-wingblank wb15px"></div>

<h6>margin 左右 20px</h6>
<div class="am-wingblank wb20px"></div>

<h6>margin 左右 25px</h6>
<div class="am-wingblank wb25px"></div>

<h6>margin 左右 30px</h6>
<div class="am-wingblank wb30px"></div>

<h6>margin 左右 8px</h6>
<div class="am-wingblank wb8px"></div>

<h6>margin 左右 12px</h6>
<div class="am-wingblank wb12px"></div>

<h6>margin 左右 16px</h6>
<div class="am-wingblank wb16px"></div>

<h6>margin 左右 24px</h6>
<div class="am-wingblank wb24px"></div>

<h6>margin 左右 28px</h6>
<div class="am-wingblank wb28px"></div>

<h6>margin 左右 32px</h6>
<div class="am-wingblank wb32px"></div>
Components 组件
Button 按钮 Button 按钮
widget/button

类型:主按钮(蓝底),次按钮(白底),警示按钮,不可用按钮,功能按钮和底部按钮。

class名称:am-button {{type}}

分类说明:

  • blue 主按钮
  • white 次按钮
  • tiny 辅助按钮
  • warn 警示按钮
  • bottom 底部按钮

按钮可以使用 abutton 标签。触控设备上要触发按钮的 active 态,必须触发 ontouchstart 事件,可以在 body 上加上 ontouchstart="" 全局触发。

按钮:

<button type="button" class="am-button">主按钮</button>
<button type="button" class="am-button white">次按钮</button>
<button type="button" disabled="disabled" class="am-button disabled">按钮不可点</button>

<a href="#" class="am-button" role="button">a标签 主按钮</a>
<a href="#" class="am-button white" role="button">a标签 次按钮</a>
<a href="#" disabled="disabled" class="am-button disabled" role="button" aria-disabled="true">a标签 按钮不可点</a>

A11Y:

<a> 元素上添加按钮相关类名,通过 JS 控制交互、而不是页面锚点跳转或者链接到其他页面时,应该添加 role="button",以便准确地向无障碍设备传达元素的作用。

<!-- A11Y:屏幕阅读器会读出的内容为「未添加 role 链接」-->
<a href="#" class="am-button">未添加 role</a>

<!-- A11Y:屏幕阅读器会读出的内容为「添加了 role 按钮」-->
<a href="#" class="am-button" role="button">添加了 role</a>

辅助类型小按钮:

<button class="am-button tiny">辅助按钮</button>
<button class="am-button disabled tiny">辅助按钮</button>

<a href="#" class="am-button tiny" role="button">辅助按钮</a>
<a href="#" class="am-button disabled tiny" role="button">辅助按钮</a>

加载型按钮&成功型按钮:

一般用作页面有ajax交互场景,比如支付之后查询交易状态.

<!-- A11Y: aria-live="assertive" 无障碍设备会将结果即时通知用户 -->
<a class="am-button blue loading" role="alert" aria-live="assertive">
  <!-- A11Y:对无障碍设备隐藏,图标对于屏幕阅读器来说无实际意义,属于干扰元素 -->
  <i class="icon" aria-hidden="true"></i>
  加载中...
</a>

<a class="am-button blue success" role="alert" aria-live="assertive">
  <i class="icon" aria-hidden="true"></i>
  付款成功
</a>

警示按钮:

<a class="am-button warn" role="button">警示按钮</a>
<button type="button" disabled="disabled" class="am-button disabled warn" aria-disabled="true">警示按钮不可点</button>

组合按钮:

<!-- A11Y: 按钮组添加 role="group",并使用 aria-label 描述按钮组的作用 -->
<div class="am-button-group" role="group" aria-label="操作按钮组">
  <button type="button" class="am-button white">次按钮</button>
  <button type="button" class="am-button blue">主按钮</button>
</div>

其他:

<div class="am-button-wrap">
  <a class="am-button" role="button">被包裹 按钮</a>
</div>

<div class="am-fixed am-fixed-bottom">
  <button class="am-button bottom">底部信息跟随按钮</button>
</div>
<div class="am-fixed am-fixed-bottom">
  <a href="#" class="am-button bottom" role="button">
    <!-- A11Y: aria-hidden="true" 对屏幕阅读器隐藏,不然读出来 + 号让人迷惑 -->
    <span class="am-bottom-button-add" aria-hidden="true">+</span>
    <span>新增</span>
  </a>
</div>
Tab Bars 标签栏 Tab Bars 标签栏
widget/tab

一般用在页面顶部,主要用于同一个页面多个场景的切换。

分段控件可左右滑动切换,建议不超过三个标签;如果超过三个标签,更多的标签需要滑动出现.

页面顶部

<div class="am-tab" role="tablist">
  <a class="am-tab-item" role="tab">标签栏1</a>
  <a class="am-tab-item" role="tab">标签栏2</a>
  <a class="am-tab-item selected" role="tab">标签栏3</a>
</div>

页面底部

<div class="am-tab am-fixed am-fixed-bottom" role="tablist">
  <a class="am-tab-item selected" role="tab">标签栏1</a>
  <a class="am-tab-item" role="tab">标签栏2</a>
</div>

标签面板切换 A11Y 示例

<!-- A11Y: role="tablist" 标签容器 -->
<div class="am-tab" role="tablist">
  <!-- A11Y: role="tab" 标签角色
             aria-controls="home" 指向控制的面板 id
             aria-selected="false" 当前标签是否选中 -->
  <a id="tab-1" href="#home" class="am-tab-item" role="tab" aria-controls="home" aria-selected="false">
    标签栏1
  </a>
  <a id="tab-2" href="#profile" class="am-tab-item" role="tab" aria-controls="profile" aria-selected="false">
    标签栏2
  </a>
  <a id="tab-3" href="#messages" class="am-tab-item selected" role="tab" aria-controls="messages" aria-selected="true">
    标签栏3
  </a>
</div>

<!-- A11Y: 标签面板 -->
<div class="tab-content">
  <!-- A11Y:
           role="tabpanel" 标签面板角色
           aria-labelledby="tab-1" 对应的标签 id
   -->
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="tab-1">
    ...
  </div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="tab-2">
    ...
  </div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="tab-3">
    ...
  </div>
</div>

JS 交互实现 ARIA 示例参见 Accessibility Examples - Tab Panel

List 列表 List 列表
widget/list

List控件包含:单行或多行文字列表,表单,校验码,以及checkbox,radio, switch 等表单元素。

dev模拟,class名称组合:`am-list {{type}}`,`am-list-header`(表头),`am-list-body`(表体),`am-list-item {{item-type}}`(列表行), `am-list-footer`(表尾辅助说明)。

列表样式 am-list {{type}}

type 分类说明:

  • twoline: 双行列表
  • sicon: 带小图标的单行列表
  • form: 表单列表
  • info: 纯文字列表(结果页面)

demo(标准的list列表:包含表头、表体、表尾):

<div class="am-list">
  <div class="am-list-header" id="list-header-1">单行列表头纯文字</div>
  <div class="am-list-body" aria-labelledby="list-header-1">
    <div class="am-list-item">
      <div class="am-list-content">标签文本</div>
    </div>
    <div class="am-list-item">
      <div class="am-list-content">标签文本</div>
      <div class="am-list-extra">辅助标签三四五六七八九十</div>
    </div>
    <a href="#" class="am-list-item">
      <div class="am-list-content">可点链接</div>
      <div class="am-list-extra">辅助标签三四五六七八九十</div>
      <!-- A11Y: 对无障碍设置隐藏没有实际意义的图标,下同 -->
      <div class="am-list-arrow" aria-hidden="true">
        <span class="am-icon arrow horizontal"></span>
      </div>
    </a>
    <a href="#" class="am-list-item">
      <div class="am-list-content">
        标签文本
        <i class="reddot" aria-hidden="true"></i>
      </div>
      <div class="am-list-arrow" aria-hidden="true">
        <span class="am-icon arrow horizontal"></span>
      </div>
    </a>
    <a href="#" class="am-list-item">
      <div class="am-list-content">标签文本</div>
      <span class="am-bubble two-num">24</span>
      <div class="am-list-arrow" aria-hidden="true">
        <span class="am-icon arrow horizontal"></span>
      </div>
    </a>
  </div>
  <div class="am-list-footer">单行列表尾纯文字</div>
</div>

只有表体的list列表,双行文字列表:

<div class="am-list twoline">
  <div class="am-list-item">
    <div class="am-list-content">
      <div class="am-list-title">标签文本</div>
      <div class="am-list-brief">辅助标签辅助标签</div>
    </div>
  </div>
  <a href="#" class="am-list-item">
    <div class="am-list-content">
      <div class="am-list-title">标签文本 可点击</div>
      <div class="am-list-brief">辅助标签辅助标签</div>
    </div>
    <div class="am-list-arrow" aria-hidden="true">
      <span class="am-icon arrow horizontal"></span>
    </div>
  </a>
  <a href="#" class="am-list-item">
    <div class="am-list-content">
      <div class="am-list-title am-ft-ellipsis">标签文本标签文本标签文本标签文本标签文本标签文本标签文本
      </div>
      <div class="am-list-brief am-ft-ellipsis">辅助标签辅助标签辅助标签辅助标签辅助标签辅助标签辅助标签
      </div>
    </div>
    <div class="am-list-arrow" aria-hidden="true">
      <span class="am-icon arrow horizontal"></span>
    </div>
  </a>
</div>

图标+单行文字(icon尺寸:21px * 21px):

<div class="am-list sicon">
  <div class="am-list-header">图标+单行文字(icon尺寸:21px * 21px)</div>
  <div class="am-list-body ">
    <div class="am-list-item">
      <div class="am-list-thumb">
        <!-- A11Y: alt 信息增加对图片内容或者目的描述,如「xxx头像」 -->
        <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" alt="图片描述" />
      </div>
      <div class="am-list-content">标签文本</div>
    </div>
  </div>
</div>

<div class="am-list sicon">
  <a class="am-list-item">
    <div class="am-list-thumb">
      <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" alt="图片描述" />
    </div>
    <div class="am-list-content">标签文本</div>
    <div class="am-list-extra">辅助标签</div>
    <div class="am-list-arrow" aria-hidden="true">
      <span class="am-icon arrow horizontal"></span>
    </div>
  </a>
</div>

<div class="am-list sicon">
  <div class="am-list-body ">
    <a class="am-list-item">
      <div class="am-list-thumb">
        <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" alt="图片描述" />
      </div>
      <div class="am-list-content">标签文本</div>
      <div class="am-list-arrow" aria-hidden="true">
        <span class="am-icon arrow horizontal"></span>
      </div>
    </a>
    <a class="am-list-item">
      <div class="am-list-thumb">
        <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" alt="图片描述" />
      </div>
      <div class="am-list-content">标签文本</div>
      <div class="am-list-extra">辅助标签一二三四五六七八九</div>
      <div class="am-list-arrow" aria-hidden="true">
        <span class="am-icon arrow horizontal"></span>
      </div>
    </a>
  </div>
</div>

图标+两行文字:

<div class="am-list twoline">
  <div class="am-list-header">图标+两行文字</div>
  <div class="am-list-body">
    <div class="am-list-item">
      <div class="am-list-thumb">
        <!-- A11Y: alt 信息增加对图片内容或者目的描述,如「xxx头像」 -->
        <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" alt="图片描述" />
      </div>
      <div class="am-list-content">
        <div class="am-list-title twocolumn">
          <label>标签文本</label>
          <div class="am-list-right-brief">
            文本
          </div>
        </div>
        <div class="am-list-brief twocolumn">
          <label>辅助标签</label>
          <div class="am-list-right-brief">
            文本
          </div>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="am-list-item">
    <div class="am-list-thumb">
      <!-- A11Y: alt 信息增加对图片内容或者目的描述,如「xxx头像」 -->
      <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" alt="图片描述" />
    </div>
    <div class="am-list-content">
      <div class="am-list-title">标签文本</div>
      <div class="am-list-brief">辅助标签</div>
    </div>
    <div class="am-list-arrow" aria-hidden="true">
      <span class="am-icon arrow horizontal"></span>
    </div>
  </a>
</div>

<div class="am-list twoline">
  <div class="am-list-item">
    <div class="am-list-thumb">
      <!-- A11Y: alt 信息增加对图片内容或者目的描述,如「xxx头像」 -->
      <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" alt="图片描述" />
    </div>
    <div class="am-list-content">
      <div class="am-list-title am-flexbox twocolumn">
        <label class="am-flexbox-item">标签文本标签文本标签文本标签文本标签文本标签文本标签文本</label>
        <div class="am-list-right-brief">2016/12/31</div>
      </div>
      <div class="am-list-brief">辅助标签辅助标签辅助标签辅助标签辅助标签辅助标签辅助标签</div>
    </div>
  </div>
</div>

<div class="am-list twoline">
  <div class="am-list-body">
    <div class="am-list-item">
      <div class="am-list-thumb">
        <!-- A11Y: alt 信息增加对图片内容或者目的描述,如「xxx头像」 -->
        <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" alt="图片描述" />
      </div>
      <div class="am-list-content">
        <div class="am-list-title">标签文本</div>
        <div class="am-list-brief">辅助标签</div>
      </div>
    </div>
    <div class="am-list-item">
      <div class="am-list-thumb">
        <!-- A11Y: alt 信息增加对图片内容或者目的描述,如「xxx头像」 -->
        <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" alt="图片描述" />
      </div>
      <div class="am-list-content">
        <div class="am-list-title">标签文本</div>
        <div class="am-list-brief">辅助标签</div>
      </div>
    </div>
  </div>
</div>

露出图片或图标:

<div class="am-list">
  <div class="am-list-header">露出图片或图标</div>
  <div class="am-list-body">
    <a href="#" class="am-list-item">
      <div class="am-list-content">
        <div class="am-list-title">标签文本</div>
      </div>
      <div class="am-list-thumb right">
      <img
        src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
        alt="图片描述" />
      </div>
      <div class="am-list-arrow" aria-hidden="true">
        <span class="am-icon arrow horizontal"></span>
      </div>
    </a>
  </div>
</div>

<div class="am-list">
  <a href="#" class="am-list-item">
    <div class="am-list-content">
      <div class="am-list-title">标签文本</div>
    </div>
    <div class="am-list-thumb right">
      <img
        src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
        alt="图片描述"
      />
    </div>
    <div class="am-list-arrow" aria-hidden="true">
      <span class="am-icon arrow horizontal"></span>
    </div>
  </a>
  <a href="#" class="am-list-item">
    <div class="am-list-content">
      <div class="am-list-title">标签文本</div>
    </div>
    <div class="am-list-thumb right">
      <img
        src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
        alt="图片描述"
      />
    </div>
    <div class="am-list-arrow" aria-hidden="true">
      <span class="am-icon arrow horizontal"></span>
    </div>
  </a>
</div>

<div class="am-list twoline">
  <a href="#" class="am-list-item ">
    <div class="am-list-content">
      <div class="am-list-title">标签文本</div>
      <div class="am-list-brief">辅助标签</div>
    </div>
    <div class="am-list-thumb right">
      <img
        src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
        alt="图片描述"
      />
    </div>
    <div class="am-list-arrow" aria-hidden="true">
      <span class="am-icon arrow horizontal"></span>
    </div>
  </a>
  <a href="#" class="am-list-item">
    <div class="am-list-content">
      <div class="am-list-title">标签文本</div>
      <div class="am-list-brief">辅助标签</div>
    </div>
    <div class="am-list-thumb right">
      <img
        src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
        alt="图片描述"
      />
    </div>
    <div class="am-list-arrow" aria-hidden="true">
      <span class="am-icon arrow horizontal"></span>
    </div>
  </a>
</div>

<div class="am-list twoline">
  <div class="am-list-body">
    <a href="#" class="am-list-item">
      <div class="am-list-content">
        <div class="am-list-title">标签文本</div>
      </div>
      <div class="am-list-thumb right">
        <img
          src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
          alt="图片描述"
        />
      </div>
      <div class="am-list-arrow" aria-hidden="true">
        <span class="am-icon arrow horizontal"></span>
      </div>
    </a>
  </div>
</div>

消息类:

<div class="am-list twoline">
  <div class="am-list-header">消息类</div>
  <div class="am-list-body">
    <div class="am-list-item">
      <div class="am-list-thumb">
        <!-- A11Y: alt 信息增加对图片内容或者目的描述,如「xxx头像」 -->
        <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" alt="图片描述" />
      </div>
      <div class="am-list-content">
        <div class="am-list-title twocolumn">
          <label>标签文本</label>
          <div class="am-list-right-brief">
            文本
          </div>
        </div>
        <div class="am-list-brief twocolumn">
          <label>辅助标签</label>
          <div class="am-list-right-brief">
            <img
              src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
              alt="图片描述"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="am-list-item">
      <div class="am-list-thumb">
        <!-- A11Y: alt 信息增加对图片内容或者目的描述,如「xxx头像」 -->
        <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" alt="图片描述" />
      </div>
      <div class="am-list-content">
        <div class="am-list-title twocolumn">
          <label>标签文本</label>
          <div class="am-list-right-brief">
            文本
          </div>
        </div>
        <div class="am-list-brief twocolumn">
          <label>辅助标签</label>
          <div class="am-list-right-brief">
            <img
              src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
              alt="图片描述"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="am-list twoline">
  <div class="am-list-item">
    <div class="am-list-thumb">
      <!-- A11Y: alt 信息增加对图片内容或者目的描述,如「xxx头像」 -->
      <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" alt="图片描述" />
    </div>
    <div class="am-list-content">
      <div class="am-list-title twocolumn">
        <label>标签文本</label>
        <div class="am-list-right-brief">
          文本
        </div>
      </div>
      <div class="am-list-brief twocolumn">
        <label>辅助标签</label>
        <div class="am-list-right-brief">
          文本
        </div>
      </div>
    </div>
  </div>
  <div class="am-list-item">
    <div class="am-list-thumb">
      <!-- A11Y: alt 信息增加对图片内容或者目的描述,如「xxx头像」 -->
      <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" alt="图片描述" />
    </div>
    <div class="am-list-content">
      <div class="am-list-title twocolumn">
        <label>标签文本</label>
        <div class="am-list-right-brief">
          文本
        </div>
      </div>
      <div class="am-list-brief twocolumn">
        <label>辅助标签</label>
        <div class="am-list-right-brief">
          文本
        </div>
      </div>
    </div>
  </div>
</div>

单双行 图文组合:

<div class="am-list">
  <div class="am-list-header">单双行 图文组合</div>
  <div class="am-list-body">
    <div class="am-list-item twoline">
      <div class="am-list-thumb">
        <!-- A11Y: alt 信息增加对图片内容或者目的描述,如「xxx头像」 -->
        <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" alt="图片描述" />
      </div>
      <div class="am-list-content">
        <div class="am-list-title">标签文本</div>
      </div>
    </div>
    <a class="am-list-item">
      <div class="am-list-content">标签文本</div>
      <div class="am-list-extra">辅助标签</div>
      <div class="am-list-arrow" aria-hidden="true">
        <span class="am-icon arrow horizontal"></span>
      </div>
    </a>
    <a class="am-list-item">
      <div class="am-list-content">标签文本</div>
      <div class="am-list-extra">辅助标签</div>
      <div class="am-list-arrow" aria-hidden="true">
        <span class="am-icon arrow horizontal"></span>
      </div>
    </a>
    <a class="am-list-item">
      <div class="am-list-content">标签文本</div>
      <div class="am-list-extra">辅助标签</div>
      <div class="am-list-arrow" aria-hidden="true">
        <span class="am-icon arrow horizontal"></span>
      </div>
    </a>
  </div>
</div>

纯信息展示:

<div class="am-list info">
  <div class="am-list-header" id="list-header-static-1">纯信息展示</div>
  <!-- A11Y: 注意 role="list" 只能用于非交互(静态)列表,如列表包含链接,不要添加该角色
       详见 https://www.w3.org/TR/wai-aria/roles#list
   -->
  <div class="am-list-body" role="list" aria-labelledby="list-header-static-1">
    <div class="am-list-item oneline" role="listitem">
      <div class="am-list-content">标签文本标签文本</div>
      <div class="am-list-extra">标签文本标签文本标签文本标签文本</div>
    </div>
  </div>
</div>

<div class="am-list info">
  <a class="am-list-item oneline">
    <div class="am-list-content">标签文本</div>
    <div class="am-list-extra">标签文本标签文本标签文本标签文本</div>
    <div class="am-list-arrow" aria-hidden="true">
      <span class="am-icon arrow horizontal"></span>
    </div>
  </a>
</div>

<div class="am-list info">
  <a class="am-list-item">
    <div class="am-list-item-part">
      <div class="am-list-content">标签文本</div>
      <div class="am-list-extra">标签文本标签文本标签文本标签文本</div>
      <div class="am-list-arrow" aria-hidden="true">
        <span class="am-icon arrow horizontal"></span>
      </div>
    </div>
    <div class="am-list-item-part">
      <div class="am-list-extra">标签文本标签文本标签文本标签文本</div>
    </div>
  </a>
</div>

<div class="am-list info">
  <div class="am-list-item">
    <div class="am-list-item-part">
      <div class="am-list-content">标签文本</div>
      <div class="am-list-extra">标签文本标签文本标签文本标签文本</div>
    </div>
    <div class="am-list-item-part">
      <div class="am-list-extra">标签文本标签文本标签文本标签文本</div>
    </div>
  </div>
</div>

<div class="am-list info">
  <a class="am-list-item">
    <div class="am-list-item-part">
      <div class="am-list-content">标签文本</div>
      <div class="am-list-extra">标签文本</div>
      <div class="am-list-arrow" aria-hidden="true">
        <span class="am-icon arrow horizontal"></span>
      </div>
    </div>
    <div class="am-list-item-part">
      <div class="am-list-content">标签文本</div>
      <div class="am-list-extra">标签文本标签文本标签文本标签文本</div>
    </div>
  </a>
</div>
Form 表单 Form 表单
widget/form; widget/checkbox

Form控件包含:单行或多行文字列表,表单,校验码,以及checkbox,radio, switch 等表单元素。

dev模拟,class名称组合:"am-list {{type}}","am-list-header"(表头),"am-list-body"(表体),"am-list-item {{item-type}}"(列表行), "am-list-footer"(表尾辅助说明);

列表样式am-list {{type}}

"{{type}}" 分类说明:

  • twoline: 双行列表
  • sicon: 带小图标的单行列表
  • form: 表单列表
  • info: 纯文字列表(结果页面)

常规类:

<div class="am-list form">
  <div class="am-list-header">常规类</div>
  <div class="am-list-body">
    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="list-label-1">标签文本</div>
      <div class="am-list-control">
        <input id="demo-input-1" type="text" placeholder="内容内容" value="" aria-labelledby="list-label-1">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-1">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</div>

<div class="am-list form">
  <div class="am-list-item am-input-autoclear">
    <div class="am-list-label" id="list-label-2">标签文本</div>
    <div class="am-list-control">
      <input id="demo-input-2" type="text" placeholder="内容内容" value="" aria-labelledby="list-label-2">
    </div>
    <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-2">
      <i class="am-icon-clear am-icon" aria-hidden="true"></i>
    </div>
  </div>
  <div class="am-list-item am-input-autoclear">
    <div class="am-list-label" id="list-label-3">标签文本</div>
    <div class="am-list-control">
      <input id="demo-input-3" type="text" placeholder="内容内容" value="" aria-labelledby="list-label-3">
    </div>
    <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-3">
      <i class="am-icon-clear am-icon" aria-hidden="true"></i>
    </div>
  </div>
</div>

<div class="am-list form">
  <div class="am-list-item am-input-autoclear">
    <div class="am-list-label" id="list-label-4">标签</div>
    <div class="am-list-control">
      <input id="demo-input-4" type="text" placeholder="内容内容" value="" aria-labelledby="list-label-4">
    </div>
    <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-4">
      <i class="am-icon-clear am-icon" aria-hidden="true"></i>
    </div>
  </div>
</div>

<div class="am-list form">
  <div class="am-list-item am-input-autoclear">
    <div class="am-list-label" id="list-label-5">标签文本</div>
    <div class="am-list-control">
      <input id="demo-input-5" type="text" placeholder="内容内容" value="支付宝" aria-labelledby="list-label-5">
    </div>
    <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-5">
      <i class="am-icon-clear am-icon" aria-hidden="true"></i>
    </div>
  </div>
  <div class="am-list-item am-input-autoclear">
    <div class="am-list-label" id="list-label-6">标签文本</div>
    <div class="am-list-control">
      <input id="demo-input-6" type="text" placeholder="内容内容" aria-labelledby="list-label-6">
    </div>
    <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-6">
      <i class="am-icon-clear am-icon" aria-hidden="true"></i>
    </div>
  </div>
</div>

下拉列表

<div class="am-list form">
  <div class="am-list-header">下拉列表</div>
  <div class="am-list-body">
    <div class="am-list-item am-input-autoclear dropdown">
      <div class="am-list-dropdown-main">
        <div class="am-list-label" id="list-label-7">标签文本</div>
        <div class="am-list-control">
          <input id="demo-input-7" type="text" placeholder="暗提示暗提示" value="" aria-labelledby="list-label-7">
        </div>
        <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-7">
          <i class="am-icon-clear am-icon" aria-hidden="true" style="visibility: hidden;"></i>
        </div>
        <div class="am-list-arrow" aria-hidden="true">
          <span class="am-icon arrow vertical"></span>
        </div>
      </div>
      <div class="am-list-dropdown-list">
        <div class="am-list-dropdown-item am-input-autoclear">
          <div class="am-list-label" id="list-label-8">下拉内容</div>
          <div class="am-list-control">
            <input id="demo-input-8" type="text" placeholder="暗提示暗提示" value="" aria-labelledby="list-label-8">
          </div>
          <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-8">
            <i class="am-icon-clear am-icon" aria-hidden="true" style="visibility: hidden;"></i>
          </div>
        </div>
      </div>
    </div>

    <div class="am-list-item dropdown up">
      <div class="am-list-dropdown-main">
        <div class="am-list-label" id="list-label-9">标签文本</div>
        <div class="am-list-control"></div>
        <div class="am-list-arrow" aria-hidden="true">
          <span class="am-icon arrow vertical up"></span>
        </div>
      </div>
      <div class="am-list-dropdown-list">
        <div class="am-list-dropdown-item am-input-autoclear">
          <div class="am-list-label" id="list-label-10">下拉内容</div>
          <div class="am-list-control"></div>
        </div>
        <div class="am-list-dropdown-item am-input-autoclear">
          <div class="am-list-label" id="list-label-11">下拉内容</div>
          <div class="am-list-control"></div>
        </div>
        <div class="am-list-dropdown-item am-input-autoclear">
          <div class="am-list-label" id="list-label-12">下拉内容</div>
          <div class="am-list-control"></div>
        </div>
      </div>
    </div>
  </div>
</div>

注意:下拉列表的 ARIA 属性有待完善,可参考 BS Dropdown

和label有关

<div class="am-list form">
  <div class="am-list-header">常见表单</div>
  <div class="am-list-body">
    <div class="am-list-item am-input-autoclear">
      <div class="am-list-control">
        <input id="demo-input-13" type="text" placeholder="暗提示暗提示" value="" aria-label="输入框标签">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-13">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
    </div>
    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="list-label-14">优惠券名称</div>
      <div class="am-list-control">
        <input id="demo-input-14" type="text" placeholder="请输入名称" value="" aria-labelledby="list-label-14">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-14">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</div>

<div class="am-list am-list-5lb form">
  <div class="am-list-header">固定5个字</div>
  <div class="am-list-body">
    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="list-label-15">优惠券</div>
      <div class="am-list-control">
        <input id="demo-input-15" type="text" placeholder="暗提示暗提示" value="" aria-labelledby="list-label-15">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-15">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
    </div>
    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="list-label-16">优惠券代码</div>
      <div class="am-list-control">
        <input id="demo-input-16" type="text" placeholder="暗提示暗提示" value="" aria-labelledby="list-label-16">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-16">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</div>

<div class="am-list am-list-6lb form">
  <div class="am-list-header">固定6个字</div>
  <div class="am-list-body">
    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="list-label-17">优惠券</div>
      <div class="am-list-control">
        <input id="demo-input-17" type="text" placeholder="暗提示暗提示" value="" aria-labelledby="list-label-17">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-17">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
    </div>
    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="list-label-18">优惠券有效期</div>
      <div class="am-list-control" id="demo-input-18">永久可用</div>
      <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-18">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</div>

表单出错

<div class="am-list form">
  <div class="am-list-header">输入错误的情况</div>
  <div class="am-list-body">
    <div class="am-list-item am-list-item-error am-input-autoclear">
      <div class="am-list-control">
        <input id="demo-input-19" type="text" placeholder="暗提示暗提示" value="表单出错" aria-label="表单标签">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-19">
        <i class="am-icon-clear am-icon" aria-hidden="true" style="visibility: hidden;"></i>
      </div>
    </div>
  </div>
</div>

<div class="am-list am-list-5lb form">
  <div class="am-list-header">固定5个字</div>
  <div class="am-list-body">
    <div class="am-list-item am-list-item-error am-input-autoclear">
      <div class="am-list-label" id="list-label-20">优惠券名称</div>
      <div class="am-list-control">
        <input id="demo-input-20" type="text" placeholder="暗提示暗提示" value="89373655241" aria-labelledby="list-label-20">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-20">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
    </div>
    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="list-label-21">优惠券代码</div>
      <div class="am-list-control">
        <input id="demo-input-21" type="text" placeholder="暗提示暗提示" value="" aria-labelledby="list-label-21">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-21">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</div>

短信校验

<div class="am-list form">
  <div class="am-list-header">校验码</div>
  <div class="am-list-item am-input-autoclear">
    <div class="am-list-label" id="list-label-22">校验码</div>
    <div class="am-list-control">
      <input id="demo-input-22" type="text" placeholder="输入短信校验码" value="" aria-labelledby="list-label-22">
    </div>
    <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-22">
      <i class="am-icon-clear am-icon" aria-hidden="true"></i>
    </div>
    <div class="am-list-button">
      <button type="button">发送校验码</button>
    </div>
  </div>
</div>

<div class="am-list form">
  <div class="am-list-item am-input-autoclear">
    <div class="am-list-label" id="list-label-23">校验码</div>
    <div class="am-list-control">
      <input id="demo-input-23" type="text" placeholder="输入校验码" value="" aria-labelledby="list-label-23">
    </div>
    <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-23">
      <i class="am-icon-clear am-icon" aria-hidden="true"></i>
    </div>
    <div class="am-list-button">
      <button type="button" disabled="disabled">58秒后重发</button>
    </div>
  </div>
</div>

<div class="am-list form">
  <div class="am-list-item am-input-autoclear">
    <div class="am-list-label" id="list-label-24">校验码</div>
    <div class="am-list-control">
      <input id="demo-input-24" type="text" placeholder="输入校验码" value="" aria-labelledby="list-label-24">
    </div>
    <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-24">
      <i class="am-icon-clear am-icon" aria-hidden="true"></i>
    </div>
    <div class="am-list-button">
      <button type="button">重发校验码</button>
    </div>
  </div>
</div>

<div class="am-list form">
  <div class="am-list-item am-input-autoclear">
    <div class="am-list-label" id="list-label-25">校验码</div>
    <div class="am-list-control">
      <input id="demo-input-25" type="text" placeholder="右侧校验码" value="" aria-labelledby="list-label-25">
    </div>
    <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-25">
      <i class="am-icon-clear am-icon" aria-hidden="true"></i>
    </div>
    <a class="am-list-button" role="button">
      <div class="am-captcha-figure">
        <img src="https://t.alipayobjects.com/images/rmsweb/T1lFlgXepkXXXXXXXX.png" alt="验证码">
      </div>
      <div class="am-icon captcha-refresh" tabindex="0" aria-label="刷新验证码"></div>
    </a>
  </div>
</div>

<div class="am-list form">
  <div class="am-list-item am-input-autoclear">
    <div class="am-list-label" id="list-label-26">校验码</div>
    <div class="am-list-control">
      <input id="demo-input-26" type="text" placeholder="右侧校验码" value="" aria-labelledby="list-label-26">
    </div>
    <div class="am-list-clear" tabindex="0" aria-label="清空输入框" aria-controls="demo-input-26">
      <i class="am-icon-clear am-icon" aria-hidden="true"></i>
    </div>
    <a class="am-list-button">
      <div class="am-captcha-figure">
        <button type="button" disabled="disabled">加载中...</button>
      </div>
      <div class="am-icon captcha-refresh" tabindex="0" aria-label="刷新验证码"></div>
    </a>
  </div>
</div>

列表行样式:am-list-item {{item-type}}

"{{item-type}}" 说明:

  • check: 复选框 列表
  • radio: 单选框 列表
  • dropdown 下拉列表

列表中的表单元素class:

  • 选择框:am-checkbox {{type}} [type: 为空|agreement tiny]
  • switch: am-switch

其他说明:表单行使用 a 标签,整行可点击,checkbox/radio 表单行建议使用label

选择框列表:

<div class="am-list">
  <div class="am-list-header" id="demo-cb-header-1">圆形多选</div>
  <div class="am-list-body" aria-labelledby="demo-cb-header-1">
    <label class="am-list-item check">
      <div class="am-list-content">表单项复选框——默认未选中</div>
      <div class="am-checkbox">
        <input type="checkbox" name="c1" id="c1">
        <span class="icon-check" aria-hidden="true"></span>
      </div>
    </label>
    <label class="am-list-item check">
      <div class="am-list-content">表单项复选框——默认选中</div>
      <div class="am-checkbox">
        <input type="checkbox" checked="checked" name="c2" id="c2">
        <span class="icon-check" aria-hidden="true"></span>
      </div>
    </label>
    <label class="am-list-item check">
      <div class="am-list-content">表单项复选框——默认未选中</div>
      <div class="am-checkbox">
        <input type="checkbox" name="c3" id="c3">
        <span class="icon-check" aria-hidden="true"></span>
      </div>
    </label>
  </div>
</div>

复选框:

<div class="am-list">
  <div class="am-list-header" id="demo-cb-header-2">复选框+icon</div>
  <div class="am-list-body" aria-labelledby="demo-cb-header-2">
    <label class="am-list-item check" for="c4">
      <div class="am-list-thumb">
        <img
          src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
          alt="图片描述"
        />
      </div>
      <div class="am-list-content">表单项复选框——默认选中1</div>
      <div class="am-checkbox">
        <input type="checkbox" name="c4" checked="checked" id="c4">
        <span class="icon-check" aria-hidden="true"></span>
      </div>
    </label>
    <label class="am-list-item check" for="c5">
      <div class="am-list-thumb">
        <img
          src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
          alt="图片描述"
        />
      </div>
      <div class="am-list-content">表单项复选框——默认未选中</div>
      <div class="am-checkbox">
        <input type="checkbox" name="c5" id="c5">
        <span class="icon-check" aria-hidden="true"></span>
      </div>
    </label>
    <label class="am-list-item check" for="c6">
      <div class="am-list-thumb">
        <img
          src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
          alt="图片描述"
        />
      </div>
      <div class="am-list-content">表单项复选框——默认disabled</div>
      <div class="am-checkbox">
        <input type="checkbox" name="c6" disabled="disabled" checked="checked"
               id="c6">
        <span class="icon-check" aria-hidden="true"></span>
      </div>
    </label>
    <label class="am-list-item check" for="c7">
      <div class="am-list-thumb">
        <img
          src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
          alt="图片描述"
        />
      </div>
      <div class="am-list-content">带说明</div>
      <div class="am-checkbox">
        <input type="checkbox" name="c7" checked="checked" id="c7">
        <span class="icon-check" aria-hidden="true"></span>
      </div>
    </label>
  </div>
</div>

<div class="am-list twoline">
  <div class="am-list-header" id="demo-cb-header-3">复选框+双行列表</div>
  <div class="am-list-body" aria-labelledby="demo-cb-header-3">
    <label class="am-list-item check" for="cx1">
      <div class="am-list-thumb">
        <img
          src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
          alt="图片描述"
        />
      </div>
      <div class="am-list-content">
        <div class="am-list-title">标签文本</div>
        <div class="am-list-brief">辅助标签</div>
      </div>
      <div class="am-checkbox">
        <input type="checkbox" name="cx1" disabled="disabled" checked="checked"
               id="cx1">
        <span class="icon-check" aria-hidden="true"></span>
      </div>
    </label>
    <label class="am-list-item check" for="cx2">
      <div class="am-list-thumb">
        <img
          src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
          alt="图片描述"
        />
      </div>
      <div class="am-list-content">
        <div class="am-list-title">标签文本</div>
        <div class="am-list-brief">辅助标签</div>
      </div>
      <div class="am-checkbox">
        <input type="checkbox" name="cx2" checked="checked" id="cx2">
        <span class="icon-check" aria-hidden="true"></span>
      </div>
    </label>
  </div>
</div>

协议 复选框:

<div class="am-list">
  <div class="am-list-header">表单协议</div>
  <div class="am-checkbox mini argument">
    <label class="am-ft-md" style="margin-left: -10px">同意</label><a
      href="http://e.alipay.com.rafarel-design.com" target="_blank">《信用支付服务合同》</a>
  </div>
  <div>
    <div class="am-checkbox mini argument">
      <input id="agree1" type="checkbox" checked="checked">
      <span class="icon-check" aria-hidden="true"></span>
      <label class="am-ft-md" for="agree1">同意</label><a target="_blank">《信用支付服务合同》</a>
    </div>
  </div>
  <div>
    <div class="am-checkbox mini argument">
      <input id="agree2" type="checkbox">
      <span class="icon-check" aria-hidden="true"></span>
      <label class="am-ft-md" for="agree2">同意</label><a target="_blank">《信用支付服务合同》</a>
    </div>
  </div>
  <div>
    <div class="am-checkbox mini argument">
      <input id="agree3" type="checkbox" disabled="disabled" checked="checked">
      <span class="icon-check" aria-hidden="true"></span>
      <label class="am-ft-md" for="agree3">同意</label><a target="_blank">《信用支付服务合同》</a>
    </div>
  </div>
</div>

单选框:

<div class="am-list">
  <div class="am-list-header" id="demo-radio-header-1">单选框</div>
  <div class="am-list-body" aria-labelledby="demo-radio-header-1">
    <label class="am-list-item radio">
      <div class="am-list-content">表单项单选框——未选中标签</div>
      <div class="am-checkbox">
        <input type="radio" name="x21">
        <span class="icon-check" aria-hidden="true"></span>
      </div>
    </label>
    <label class="am-list-item radio">
      <div class="am-list-content">表单项单选框——选中标签</div>
      <div class="am-checkbox">
        <input type="radio" name="x21" checked="checked">
        <span class="icon-check" aria-hidden="true"></span>
      </div>
    </label>
  </div>
</div>

<div class="am-list twoline">
  <div class="am-list-header" id="demo-radio-header-2">单选框 + icon</div>
  <div class="am-list-body" id="demo-radio-header-2">
    <label class="am-list-item radio">
      <div class="am-list-thumb">
        <img
          src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
          alt="图片描述"
        />
      </div>
      <div class="am-list-content">
        <div class="am-list-title">标签文本</div>
        <div class="am-list-brief">辅助标签</div>
      </div>
      <div class="am-checkbox middle">
        <input type="radio" name="x22" checked="checked">
        <span class="icon-check" aria-hidden="true"></span>
      </div>
    </label>
    <label class="am-list-item radio">
      <div class="am-list-thumb">
        <img
          src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
          alt="图片描述"
        />
      </div>
      <div class="am-list-content">
        <div class="am-list-title">标签文本</div>
        <div class="am-list-brief">辅助标签</div>
      </div>
      <div class="am-checkbox middle">
        <input type="radio" name="x22">
        <span class="icon-check" aria-hidden="true"></span>
      </div>
    </label>
  </div>
</div>

表单图标icon:

icon/form

A11Y 提示:

  • 有交互的图标:

    • 图标添加 aria-hidden="true"
    • 容器添加 tabindex="0"
    • 容器添加 aria-label 描述功能
    <div class="am-list-thumb right" tabindex="0" aria-label="刷新验证码">
      <i class="am-icon form captcha-refresh" aria-hidden="true"></i>
    </div>
    
  • 没有交互功能的、纯装饰性的图标:直接在容器上添加 aria-hidden="true"

    <div class="am-list-thumb right" aria-hidden="true">
      <i class="am-icon form lock"></i>
    </div>
    
<div class="am-list am-list-5lb form">
  <div class="am-list-header">灰色</div>
  <div class="am-list-body">
    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="demo-f-icon-label-31">图标</div>
      <div class="am-list-control">
        <input type="text" aria-labelledby="demo-f-icon-label-31" id="demo-f-ipt-31" placeholder="暗提示" value="lock">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空文本框" aria-controls="demo-f-ipt-31">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
      <div class="am-list-thumb right" aria-hidden="true">
        <i class="am-icon form lock"></i>
      </div>
    </div>

    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="demo-f-icon-label-32">图标</div>
      <div class="am-list-control">
        <input type="text" aria-labelledby="demo-f-icon-label-32" id="demo-f-ipt-32" placeholder="暗提示" value="captcha-refresh">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空文本框" aria-controls="demo-f-ipt-32">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
      <div class="am-list-thumb right" tabindex="0" aria-label="刷新验证码">
        <i class="am-icon form captcha-refresh" aria-hidden="true"></i>
      </div>
    </div>

  </div>
</div>

<div class="am-list am-list-5lb form">
  <div class="am-list-header">蓝色常用</div>
  <div class="am-list-body">
    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="demo-f-icon-label-33">图标</div>
      <div class="am-list-control">
        <input type="text" aria-labelledby="demo-f-icon-label-33" id="demo-f-ipt-33" placeholder="暗提示" value="camera">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空文本框" aria-controls="demo-f-ipt-33">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
      <div class="am-list-thumb right">
        <i class="am-icon form camera"></i>
      </div>
    </div>

    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="demo-f-icon-label-34">图标</div>
      <div class="am-list-control">
        <input type="text" aria-labelledby="demo-f-icon-label-34" id="demo-f-ipt-34" placeholder="暗提示" value="list">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空文本框" aria-controls="demo-f-ipt-34">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
      <div class="am-list-thumb right">
        <i class="am-icon form list"></i>
      </div>
    </div>

    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="demo-f-icon-label-35">图标</div>
      <div class="am-list-control">
        <input type="text" aria-labelledby="demo-f-icon-label-35" id="demo-f-ipt-35" placeholder="暗提示" value="contacts-mobile">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空文本框" aria-controls="demo-f-ipt-35">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
      <div class="am-list-thumb right">
        <i class="am-icon form contacts-mobile"></i>
      </div>
    </div>

    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="demo-f-icon-label-36">图标</div>
      <div class="am-list-control">
        <input type="text" aria-labelledby="demo-f-icon-label-36" id="demo-f-ipt-36" placeholder="暗提示" value="bill">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空文本框" aria-controls="demo-f-ipt-36">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
      <div class="am-list-thumb right">
        <i class="am-icon form bill"></i>
      </div>
    </div>

    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="demo-f-icon-label-37">图标</div>
      <div class="am-list-control">
        <input type="text" aria-labelledby="demo-f-icon-label-37" id="demo-f-ipt-37" placeholder="暗提示" value="contacts-alipay">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空文本框" aria-controls="demo-f-ipt-37">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
      <div class="am-list-thumb right">
        <i class="am-icon form contacts-alipay"></i>
      </div>
    </div>

    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="demo-f-icon-label-38">图标</div>
      <div class="am-list-control">
        <input type="text" aria-labelledby="demo-f-icon-label-38" id="demo-f-ipt-38" placeholder="暗提示" value="cards">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空文本框" aria-controls="demo-f-ipt-38">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
      <div class="am-list-thumb right">
        <i class="am-icon form cards"></i>
      </div>
    </div>

    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="demo-f-icon-label-40">图标</div>
      <div class="am-list-control">
        <input type="text" aria-labelledby="demo-f-icon-label-40" id="demo-f-ipt-40" placeholder="暗提示" value="calculator">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空文本框" aria-controls="demo-f-ipt-40">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
      <div class="am-list-thumb right">
        <i class="am-icon form calculator"></i>
      </div>
    </div>

    <div class="am-list-item am-input-autoclear">
      <div class="am-list-label" id="demo-f-icon-label-39">图标</div>
      <div class="am-list-control">
        <input type="text" aria-labelledby="demo-f-icon-label-39" id="demo-f-ipt-39" placeholder="暗提示" value="scan">
      </div>
      <div class="am-list-clear" tabindex="0" aria-label="清空文本框" aria-controls="demo-f-ipt-39">
        <i class="am-icon-clear am-icon" aria-hidden="true"></i>
      </div>
      <div class="am-list-thumb right">
        <i class="am-icon form scan"></i>
      </div>
    </div>
  </div>
</div>

开关:

widget/switch
<div class="am-list">
  <div class="am-list-header">开关</div>

  <div class="am-list-body">
    <div class="am-list-item">
      <div class="am-list-content">选中状态</div>
      <div class="am-switch">
        <input type="checkbox" name="s1" class="am-switch-checkbox"
               checked="checked" id="demo-s-1">
        <label class="am-switch-label" for="demo-s-1">
          <div class="am-switch-inner"></div>
          <div class="am-switch-switch"></div>
        </label>
      </div>
    </div>

    <div class="am-list-item">
      <div class="am-list-content">未选中状态</div>
      <div class="am-switch">
        <input type="checkbox" name="s2" class="am-switch-checkbox" id="demo-s-2">
        <label class="am-switch-label" for="demo-s-2">
          <div class="am-switch-inner"></div>
          <div class="am-switch-switch"></div>
        </label>
      </div>
    </div>
  </div>
</div>
Message 信息状态 Message 信息状态
widget/message; icon/message;

rem版本cdn:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/widget/message.css
https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/icon/message.css

px版本cdn:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/widget/message.css
https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/icon/message.css

提示控件的集合,包含:消息提示,文字提示;

结果页面和消息提示:class="am-message {{type}}", 内部icon class="am-icon {{message-type}} {{icon-type}}"

控件 “{{type}}” 说明:

  • 为空: 单行提示(默认)
  • multi: 带辅助信息的多行提示
  • week: 单行弱提示
  • result: 结果页面提示

icon “{{message-type}}” 说明:

  • message: 单行提示icon
  • message-multi: 带辅助信息的多行提示icon
  • message-week: 单行弱提示icon
  • result: 结果页面提示icon

icon "{{icon-type}}" 说明

  • success: 成功态
  • pay: 支付成功态
  • error: 失败态
  • warn: 警示态
  • info: 提示态
  • wait: 等待态

成功态:

<div class="am-message result" role="alert">
  <i class="am-icon result success" aria-hidden="true"></i>
  <div class="am-message-main">成功</div>
  <div class="am-message-sub">成功副提示</div>
</div>

<div class="am-message multi" role="alert">
  <i class="am-icon message-multi success" aria-hidden="true"></i>
  <div class="am-message-main">主提示</div>
  <div class="am-message-sub">副提示</div>
</div>

<div class="am-message" role="alert">
  <i class="am-icon message success" aria-hidden="true"></i>
  <div class="am-message-main">支付成功</div>
</div>

<div class="am-message week" role="alert">
  <i class="am-icon message-week success" aria-hidden="true"></i>
  <div class="am-message-main">文字提示</div>
</div>

失败态:

<div class="am-message result" role="alert">
  <i class="am-icon result error" aria-hidden="true"></i>
  <div class="am-message-main">失败</div>
  <div class="am-message-sub">所选银行卡余额不足</div>
</div>
<div class="am-message multi" role="alert">
  <i class="am-icon message-multi error" aria-hidden="true"></i>
  <div class="am-message-main">主提示</div>
  <div class="am-message-sub">副提示</div>
</div>
<div class="am-message" role="alert">
  <i class="am-icon message error" aria-hidden="true"></i>
  <div class="am-message-main">失败</div>
</div>
<div class="am-message week" role="alert">
  <i class="am-icon message-week error" aria-hidden="true"></i>
  <div class="am-message-main">文字提示</div>
</div>

支付成功态:

<div class="am-message result" role="alert">
  <i class="am-icon result pay" aria-hidden="true"></i>
  <div class="am-message-main">支付成功</div>
  <div class="am-message-sub">支付成功副提示</div>
</div>
<div class="am-message multi" role="alert">
  <i class="am-icon message-multi pay" aria-hidden="true"></i>
  <div class="am-message-main">主提示</div>
  <div class="am-message-sub">副提示</div>
</div>
<div class="am-message" role="alert">
  <i class="am-icon message pay" aria-hidden="true"></i>
  <div class="am-message-main">支付成功</div>
</div>
<div class="am-message week" role="alert">
  <i class="am-icon message-week pay" aria-hidden="true"></i>
  <div class="am-message-main">文字提示</div>
</div>

警示态:

<div class="am-message result" role="alert">
  <i class="am-icon result warn" aria-hidden="true"></i>
  <div class="am-message-main">警示</div>
  <div class="am-message-sub">警示副提示</div>
</div>
<div class="am-message multi" role="alert">
  <i class="am-icon message-multi warn" aria-hidden="true"></i>
  <div class="am-message-main">主提示</div>
  <div class="am-message-sub">副提示</div>
</div>
<div class="am-message" role="alert">
  <i class="am-icon message warn" aria-hidden="true"></i>
  <div class="am-message-main">支付成功</div>
</div>
<div class="am-message week" role="alert">
  <i class="am-icon message-week warn" aria-hidden="true"></i>
  <div class="am-message-main">文字提示</div>
</div>

提示态:

<div class="am-message result" role="alert">
  <i class="am-icon result info" aria-hidden="true"></i>
  <div class="am-message-main">提示</div>
  <div class="am-message-sub">警示副提示</div>
</div>
<div class="am-message multi" role="alert">
  <i class="am-icon message-multi info" aria-hidden="true"></i>
  <div class="am-message-main">主提示</div>
  <div class="am-message-sub">副提示</div>
</div>
<div class="am-message" role="alert">
  <i class="am-icon message info" aria-hidden="true"></i>
  <div class="am-message-main">支付成功</div>
</div>
<div class="am-message week" role="alert">
  <i class="am-icon message-week info" aria-hidden="true"></i>
  <div class="am-message-main">文字提示</div>
</div>

等待态:

<div class="am-message result" role="alert">
  <i class="am-icon result wait" aria-hidden="true"></i>
  <div class="am-message-main">等待</div>
  <div class="am-message-sub">警示副提示</div>
</div>
<div class="am-message multi" role="alert">
  <i class="am-icon message-multi wait" aria-hidden="true"></i>
  <div class="am-message-main">主提示</div>
  <div class="am-message-sub">副提示</div>
</div>
<div class="am-message" role="alert">
  <i class="am-icon message wait" aria-hidden="true"></i>
  <div class="am-message-main">支付成功</div>
</div>
<div class="am-message week" role="alert">
  <i class="am-icon message-week wait" aria-hidden="true"></i>
  <div class="am-message-main">文字提示</div>
</div>
Page Result 结果页面 Page Result 结果页面
widget/page-result

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/widget/page-result.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/widget/page-result.css

异常页面:系统繁忙,网络异常,返回空结果等, 异常结果页的插画可以自定义。

class: am-page-result

本地网络超时

icon/page-network

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/icon/page-network.css
px版本: https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/icon/page-network.css
<div class="am-page-result" role="alert">
  <div class="am-page-result-wrap combine-page">
    <div class="am-page-result-pic am-icon page-no-network" aria-hidden="true"></div>
    <div class="am-page-result-title">网络不给力</div>
    <div class="am-page-result-brief">世界上最遥远的距离莫过于此</div>
    <a class="am-page-result-button" role="button">刷新</a>
  </div>
</div>

本地网络未连接

icon/page-result-network

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/icon/page-result-network.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/icon/page-result-network.css
<div class="am-page-result" role="alert">
  <div class="am-page-result-wrap">
    <div class="am-page-result-pic am-icon page-network" aria-hidden="true"></div>
    <div class="am-page-result-title">网络无法连接</div>
    <div class="am-page-result-brief">世界上最遥远的距离莫过于此</div>
    <a class="am-page-result-button" role="button">刷新</a>
  </div>
</div>

系统异常或错误,且不可以重试

icon/page-result-busy

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/icon/page-result-busy.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/icon/page-result-busy.css
<div class="am-page-result" role="alert">
  <div class="am-page-result-wrap">
    <div class="am-page-result-pic am-icon page-busy" aria-hidden="true"></div>
    <div class="am-page-result-title">系统出错,正在排查</div>
    <div class="am-page-result-brief">耽误您的时候,我们深感歉意</div>
    <a class="am-page-result-button" role="button">刷新</a>
  </div>
</div>

系统异常或错误,且可以重试

icon/page-result-busy

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/icon/page-result-busy.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/icon/page-result-busy.css
<div class="am-page-result" role="alert">
  <div class="am-page-result-wrap no-button">
    <div class="am-page-result-pic am-icon page-busy" aria-hidden="true"></div>
    <div class="am-page-result-title">系统正忙,稍候再试</div>
    <div class="am-page-result-brief">耽误您的时候,我们深感歉意</div>
    <a class="am-page-result-button" role="button">刷新</a>
  </div>
</div>

业务异常或出错

icon/page-result-error

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/icon/page-result-error.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/icon/page-result-error.css
<div class="am-page-result" role="alert">
  <div class="am-page-result-wrap">
    <div class="am-page-result-pic am-icon page-error" aria-hidden="true"></div>
    <div class="am-page-result-title">业务自定义文案最多14个字符</div>
    <div class="am-page-result-brief">业务自定义文案最多两行,可不要辅助文案</div>
    <a class="am-page-result-button" role="button">刷新</a>
  </div>
</div>

业务异常或出错

icon/page-error

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/icon/page-error.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/icon/page-error.css
<div class="am-page-result" role="alert">
  <div class="am-page-result-wrap combine-page">
    <div class="am-page-result-pic am-icon page-err" aria-hidden="true"></div>
    <div class="am-page-result-title">业务自定义文案最多14个字符</div>
    <div class="am-page-result-brief">业务自定义文案最多两行,可不要辅助文案</div>
    <a class="am-page-result-button" role="button">刷新</a>
  </div>
</div>

业务严重异常,需要引导的异常

icon/page-result-error

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/icon/page-result-error.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/icon/page-result-error.css
<div class="am-page-result" role="alert">
  <div class="am-page-result-wrap">
    <div class="am-page-result-pic am-icon page-error" aria-hidden="true"></div>
    <div class="am-page-result-title">业务自定义文案最多14个字符</div>
    <div class="am-page-result-brief">业务自定义文案最多两行,可不要辅助文案</div>
    <a class="am-page-result-button">操作选项一</a>
    <a class="am-page-result-button">操作选项二</a>
  </div>
</div>

业务严重异常,需要引导的异常

icon/page-error

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/icon/page-error.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/icon/page-error.css
<div class="am-page-result" role="alert">
  <div class="am-page-result-wrap combine-page">
    <div class="am-page-result-pic am-icon page-err" aria-hidden="true"></div>
    <div class="am-page-result-title">业务自定义文案最多14个字符</div>
    <div class="am-page-result-brief">业务自定义文案最多两行,可不要辅助文案</div>

    <a class="am-page-result-button">操作选项一</a>
    <a class="am-page-result-button">操作选项二</a>
  </div>
</div>

返回结果为空

icon/page-empty

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/icon/page-empty.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/icon/page-empty.css
<div class="am-page-result" role="alert">
  <div class="am-page-result-wrap combine-page">
    <div class="am-page-result-pic am-icon page-blank" aria-hidden="true"></div>
    <div class="am-page-result-title">业务自定义文案最多14个字符</div>
    <div class="am-page-result-brief">业务自定义文案最多两行,可不要辅助文案</div>
    <a class="am-page-result-button" role="button">刷新</a>
  </div>
</div>

空白页

icon/page-result-empty

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/icon/page-result-empty.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/icon/page-result-empty.css
<div class="am-page-result" role="alert">
  <div class="am-page-result-wrap">
    <div class="am-page-result-pic am-icon page-empty" aria-hidden="true"></div>
    <div class="am-page-result-title">空白页</div>
    <a class="am-page-result-button" role="button">刷新</a>
  </div>
</div>

404页

icon/page-result-nofound

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/icon/page-result-nofount.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/icon/page-result-nofount.css
<div class="am-page-result" role="alert">
  <div class="am-page-result-wrap">
    <div class="am-page-result-pic am-icon page-nofound" aria-hidden="true"></div>
    <div class="am-page-result-title">404</div>
    <a class="am-page-result-button" role="button">刷新</a>
  </div>
</div>
Notice 公告 Notice 公告
widget/notice; widget/inform

关于公告,在支付宝客户端内,一般情况下建议使用投放平台来下发公告,投放平台下发公告为 native 层,不影响页面视觉,也和钱包公告交互效果统一(滚动动画等)。

顶部公告 am-notice

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/widget/notice.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/widget/notice.css
<div class="am-notice" role="alert">
  <div class="am-notice-content">因全国公民身份系统升级,添加银行卡银行卡银行卡银行卡银</div>
  <div class="am-notice-operation">
    <a class="am-notice-go" href="#"></a>
  </div>
</div>

临时通知 am-inform

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/widget/inform.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/widget/inform.css
<div class="am-inform" role="alert">
  <div class="am-inform-content">防欺诈盗号,请勿泄露支付密码</div>
  <div class="am-inform-operation">
    <a class="am-inform-button" role="button">知道了</a>
  </div>
</div>
Process 支付进度 Process 支付进度
widget/process

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/widget/process.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/widget/process.css

支付流程表示支付各个进度状态;class: am-process

<div class="am-process">
  <div class="am-process-item pay">
    <i class="am-icon process success" aria-hidden="true"></i>
    <div class="am-process-content">
      <div class="am-process-main">转入成功</div>
      <div class="am-process-brief">手机号码:18938754456</div>
    </div>
    <div class="am-process-down-border"></div>
  </div>
  <div class="am-process-item unpay">
    <i class="am-icon process unpay" aria-hidden="true"></i>
    <div class="am-process-content">
      <div class="am-process-main">未支付</div>
      <div class="am-process-brief">手机号码:18938754456</div>
    </div>
    <div class="am-process-up-border"></div>
    <div class="am-process-down-border"></div>
  </div>
  <div class="am-process-item unpay">
    <i class="am-icon process unpay" aria-hidden="true"></i>
    <div class="am-process-content">
      <div class="am-process-main">未支付</div>
      <div class="am-process-brief">手机号码:18938754456</div>
    </div>
    <div class="am-process-up-border"></div>
  </div>
</div>
<div class="am-process">
  <div class="am-process-item result-pay">
    <i class="am-icon process pay" aria-hidden="true"></i>
    <div class="am-process-content">
      <div class="am-process-main">支付成功</div>
      <div class="am-process-brief">手机号码:18938754456</div>
    </div>
    <div class="am-process-down-border"></div>
  </div>
  <div class="am-process-item result-pay">
    <i class="am-icon process success" aria-hidden="true"></i>
    <div class="am-process-content">
      <div class="am-process-main">转入成功</div>
      <div class="am-process-brief">手机号码:18938754456</div>
    </div>
    <div class="am-process-up-border"></div>
    <div class="am-process-down-border"></div>
  </div>
  <div class="am-process-item result-fail">
    <i class="am-icon process fail" aria-hidden="true"></i>
    <div class="am-process-content">
      <div class="am-process-main">支付失败</div>
    </div>
    <div class="am-process-up-border"></div>
  </div>
</div>
Search 搜索栏 Search 搜索栏
widget/search

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/widget/search.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/widget/search.css

搜索条样式 class: am-search

输入清除逻辑控制,需单独引入 dist/antui.min.js

初始状态

<div class="am-search am-input-autoclear" role="search">
  <div class="am-search-input search-start">
    <div class="am-search-icon" aria-hidden="true">
      <i class="am-icon search"></i>
      <span class="am-search-ph">搜索</span>
    </div>
    <input id="demo-search-ipt-1" class="am-search-value" type="text" placeholder="搜索" value="" aria-label="关键词">
    <div class="am-search-clear" tabindex="0" aria-controls="demo-search-ipt-1">
      <i class="am-icon-clear am-icon clear-tiny" aria-hidden="true"></i>
    </div>
  </div>
  <button type="button" class="am-search-button" disabled="disabled">取消</button>
</div>

未输入文字

<div class="am-search am-input-autoclear" role="search">
  <div class="am-search-input">
    <div class="am-search-icon" aria-hidden="true">
      <i class="am-icon search"></i>
      <span class="am-search-ph">搜索</span>
    </div>
    <input id="emo-search-ipt-2" class="am-search-value" type="text" placeholder="搜索" value="" aria-label="关键词">
    <div class="am-search-clear" tabindex="0" aria-controls="demo-search-ipt-1">
      <i class="am-icon-clear am-icon clear-tiny" aria-hidden="true"></i>
    </div>
  </div>
  <button type="button" class="am-search-button" disabled="disabled">取消</button>
</div>

输入状态

<div class="am-search am-input-autoclear" role="search">
  <div class="am-search-input">
    <div class="am-search-icon" aria-hidden="true">
      <i class="am-icon search"></i>
      <span class="am-search-ph">搜索</span>
    </div>
    <input id="demo-search-ipt-3" class="am-search-value" type="text" placeholder="搜索" value="搜索内容" aria-label="关键词">
    <div class="am-search-clear" tabindex="0" aria-controls="demo-search-ipt-1">
      <i class="am-icon-clear am-icon clear-tiny" aria-hidden="true"></i>
    </div>
  </div>

  <button class="am-search-button" type="button">取消</button>
</div>
Article 常规文章 Article 常规文章
widget/article

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/widget/article.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/widget/article.css

图文样式,class: am-article

<div class="am-article" role="article">
  <h2>中石化加油卡办卡章程</h2>
  <time>2021-10-16 12:20:00</time>
  <p><img src="https://os.alipayobjects.com/rmsportal/DzdIWWtLuecXwwj.jpeg" width="290" height="200"></p>
  <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p>
  <div class="am-article-footer">
      <a class="am-article-more" href="#">更多</a>
  </div>
</div>
Dialog 对话框 Dialog 对话框
widget/dialog

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/widget/dialog.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/widget/dialog.css

对话框,提示框,确认框等,通过div模拟, 包含:标题,内容,行动按钮三部分,demo中示范比较多

class: am-dialog {{type}}

"{{type}}" 说明

- 默认 文字对话框 - image 文字+插图对话框 - simage 文字+小插图对话框

对话确认 标题+内容

<div class="am-dialog-mask show"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true",显示时设置 aria-hidden="false" -->
<div class="am-dialog show" role="dialog" aria-hidden="false">
  <div class="am-dialog-wrap" role="document">
    <div class="am-dialog-header">
      <h3>标题文字</h3>
    </div>
    <div class="am-dialog-body">
      <p class="am-dialog-brief">辅助说明文字辅助说明文字辅助说明文字辅助说明文字</p>
    </div>
    <div class="am-dialog-footer">
      <a class="am-dialog-button">取消</a>
      <a class="am-dialog-button">确定</a>
    </div>
  </div>
</div>

对话确认 标题

<div class="am-dialog-mask show"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true",显示时设置 aria-hidden="false" -->
<!-- A11Y: 可以通过 aria-describedby 把对话框的描述指向 header -->
<div class="am-dialog show" role="dialog" aria-hidden="false" aria-describedby="demo-modal-header">
  <div class="am-dialog-wrap" role="document">
    <div class="am-dialog-header">
      <h3 id="demo-modal-header">标题文字</h3>
    </div>
    <div class="am-dialog-footer">
      <button type="button" class="am-dialog-button">取消</button>
      <button type="button" class="am-dialog-button">确定</button>
    </div>
  </div>
</div>

对话确认 内容

<div class="am-dialog-mask show"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true",显示时设置 aria-hidden="false" -->
<div class="am-dialog show" role="dialog" aria-hidden="false">
  <div class="am-dialog-wrap" role="document">
    <div class="am-dialog-body">
      <p class="am-dialog-brief">辅助说明文字辅助说明文字辅助说明文字辅助说明文字</p>
    </div>
    <div class="am-dialog-footer">
      <a class="am-dialog-button" role="button">取消</a>
      <a class="am-dialog-button" role="button">确定</a>
    </div>
  </div>
</div>

对话确认 标题+题图+内容

<div class="am-dialog-mask show"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true",显示时设置 aria-hidden="false" -->
<div class="am-dialog simage show" role="dialog" aria-hidden="false">
  <div class="am-dialog-wrap" role="document">
    <div class="am-dialog-img">
      <img src="https://os.alipayobjects.com/rmsportal/QnFHZkFYDZUJqBD.png" alt="图片描述">
    </div>
    <div class="am-dialog-header">
      <h3>标题文字</h3>
    </div>
    <div class="am-dialog-body">
      <p class="am-dialog-brief">辅助说明文字辅助说明文字辅助说明文字辅助说明文字</p>
    </div>

    <div class="am-dialog-footer">
      <a class="am-dialog-button" role="button">取消</a>
      <a class="am-dialog-button" role="button">确定</a>
    </div>
  </div>
</div>

单行动按钮 标题+题图+内容 标题在上

<div class="am-dialog-mask show"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true",显示时设置 aria-hidden="false" -->
<div class="am-dialog image show" role="dialog" aria-hidden="false">
  <div class="am-dialog-wrap" role="document">
    <div class="am-dialog-header">
      <h3>标题文字</h3>
    </div>
    <div class="am-dialog-img">
      <img src="https://os.alipayobjects.com/rmsportal/QnFHZkFYDZUJqBD.png" alt="图片描述">
    </div>
    <div class="am-dialog-body">
      <p class="am-dialog-brief">辅助说明文字辅助说明文字辅助说明文字辅助说明文字</p>
    </div>
    <div class="am-dialog-footer">
      <a class="am-button blue" style="display:block;" role="button">行动按钮</a>
    </div>
    <a class="am-dialog-close" aria-label="关闭对话框"></a>
  </div>
</div>

单行动按钮 标题+题图+内容 标题在下

<div class="am-dialog-mask show"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true",显示时设置 aria-hidden="false" -->
<div class="am-dialog image show" role="dialog" aria-hidden="false">
  <div class="am-dialog-wrap" role="document">
    <div class="am-dialog-img">
      <img src="https://os.alipayobjects.com/rmsportal/QnFHZkFYDZUJqBD.png" alt="图片描述">
    </div>
    <div class="am-dialog-header">
      <h3>标题文字</h3>
    </div>
    <div class="am-dialog-body">
      <p class="am-dialog-brief">辅助说明文字辅助说明文字辅助说明文字辅助说明文字</p>
      <a class="am-dialog-outlink">查看《支付宝服务协议》</a>
    </div>
    <div class="am-dialog-footer">
      <a class="am-button blue" style="display:block;">行动按钮</a>
    </div>
    <!-- A11Y: 建议使用 button 元素来实现关闭按钮的功能,后续升级中会改进 -->
    <a class="am-dialog-close" aria-label="关闭对话框"></a>
  </div>
</div>

单行动按钮 标题+内容

<div class="am-dialog-mask show"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true",显示时设置 aria-hidden="false" -->
<div class="am-dialog simage show" role="dialog" aria-hidden="false">
  <div class="am-dialog-wrap" role="document">
    <div class="am-dialog-header">
      <h3>标题文字</h3>
    </div>
    <div class="am-dialog-body">
      <p class="am-dialog-brief">辅助说明文字辅助说明文字辅助说明文字辅助说明文字</p>
    </div>
    <div class="am-dialog-footer">
      <button type="button" class="am-dialog-button">确定</button>
    </div>
  </div>
</div>

标题+内容 (按钮不可点)

<div class="am-dialog-mask show"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true",显示时设置 aria-hidden="false" -->
<div class="am-dialog simage show" role="dialog" aria-hidden="false">
  <div class="am-dialog-wrap" role="document">
    <div class="am-dialog-header">
      <h3>标题文字</h3>
    </div>
    <div class="am-dialog-body">
      <p class="am-dialog-brief">辅助说明文字辅助说明文字辅助说明文字辅助说明文字</p>
    </div>
    <div class="am-dialog-footer">
      <button type="button" class="am-dialog-button">取消</button>
      <button type="button" class="am-dialog-button" disabled="disabled">确定
      </button>
    </div>
  </div>
</div>

带输入框 对话框

<div class="am-dialog-mask show"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true",显示时设置 aria-hidden="false" -->
<div class="am-dialog simage show" role="dialog" aria-hidden="false">
  <div class="am-dialog-wrap" role="document">
    <div class="am-dialog-header">
      <h3>标题文字</h3>
    </div>
    <div class="am-dialog-body">
      <p class="am-dialog-brief" id="demo-dialog-label-1">说明内容说明内容</p>
      <input class="am-password-former" type="password" maxlength="6" size="6"
             value="" placeholder="暗提示暗提示" aria-labelledby="demo-dialog-label-1">
    </div>
    <div class="am-dialog-footer">
      <button type="button" class="am-dialog-button">取消</button>
      <button type="button" class="am-dialog-button" disabled="disabled">
        确定
      </button>
    </div>
  </div>
</div>

选项卡按钮 对话框

<div class="am-dialog-mask show"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true",显示时设置 aria-hidden="false" -->
<div class="am-dialog show" role="dialog" aria-hidden="false">
  <div class="am-dialog-wrap" role="document">
    <div class="am-dialog-header">
      <h3>标题文字</h3>
    </div>
    <div class="am-dialog-body">
      <p class="am-dialog-brief">辅助说明文字辅助说明文字辅助说明文字辅助说明文字</p>
    </div>

    <!-- A11Y: 建议使用 button 元素来实现关闭按钮的功能,后续升级中会改进 -->
    <div class="am-dialog-footer selection" role="group">
      <a class="am-dialog-button" role="button">选项1</a>
      <a class="am-dialog-button" role="button">选项2</a>
      <a class="am-dialog-button" role="button">选项3</a>
    </div>
  </div>
</div>
Loading 加载状态 Loading 加载状态
widget/loading

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/widget/loading.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/widget/loading.css
  • 默认 局部的小loading, 用于顶部刷新,底部上拉刷新
  • page 页面中大loading

页面加载中状态

<div class="am-loading page">
  <i class="am-icon loading" aria-hidden="true"></i>
  <div class="am-loading-text">加载中</div>
</div>

页面局部加载状态

<div class="am-loading" aria-label="加载中">
  <i class="am-icon loading" aria-hidden="true"></i>
</div>
Toast 信息提示 Toast 信息提示
widget/toast

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/widget/toast.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/widget/toast.css
class="am-toast {{type}}", 内部icon class="am-icon toast {{icon-type}}"

“{{type}}” 说明

  • 默认 带icon 的toast提示
  • text 纯文字 toast提示

“{{icon-type}}” 说明

  • loading 载入中
  • warn 警示
  • success 成功
  • network 网络错误
  • fail 失败

纯文字toast:

<div class="am-toast text">
  <div class="am-toast-text">
    自定义业务文案最多14个字符
  </div>
</div>

loading 载入中:

<div class="am-toast" role="alert" aria-live="assertive">
  <div class="am-toast-text">
    <span class="am-icon toast loading" aria-hidden="true"></span> 加载中...
  </div>
</div>

warn 警示:

<div class="am-toast" role="alert" aria-live="assertive">
  <div class="am-toast-text">
    <span class="am-icon toast warn" aria-hidden="true"></span> 警示
  </div>
</div>

success 成功:

<div class="am-toast" role="alert" aria-live="assertive">
  <div class="am-toast-text">
    <span class="am-icon toast success" aria-hidden="true"></span> 成功
  </div>
</div>

network 网络错误:

<div class="am-toast" role="alert" aria-live="assertive">
  <div class="am-toast-text">
    <span class="am-icon toast network" aria-hidden="true"></span> 网络不给力
  </div>
</div>

fail 失败:

<div class="am-toast" role=""alert">
  <div class="am-toast-text">
    <span class="am-icon toast fail" aria-hidden="true"></span> 失败
  </div>
</div>
Pop Menu 浮出菜单 Pop Menu 浮出菜单
widget/popmenu

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/widget/popmenu.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/widget/popmenu.css

样式:class="am-popmenu"class="am-popmenu icon-popmenu"

浮出菜单

<ul class="am-popmenu">
  <li class="am-popmenu-item">
    <div class="am-popmenu-content">选择一</div>
  </li>
  <li class="am-popmenu-item">
    <div class="am-popmenu-content">选择二</div>
  </li>
  <li class="am-popmenu-item hover">
    <div class="am-popmenu-content">点击效果</div>
  </li>
  <li class="am-popmenu-item">
    <div class="am-popmenu-content">选择四</div>
  </li>
  <li class="am-popmenu-item">
    <div class="am-popmenu-content">选择五</div>
  </li>
</ul>

带icon 红点 浮动菜单

widget/popmenu; widget/bubble

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/widget/bubble.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/widget/bubble.css
<ul class="am-popmenu">
  <li class="am-popmenu-item">
    <div class="am-popmenu-content">选择一</div>
  </li>
  <li class="am-popmenu-item">
    <div class="am-popmenu-content">选择二</div>
  </li>
  <li class="am-popmenu-item hover">
    <div class="am-popmenu-content">点击效果</div>
  </li>
  <li class="am-popmenu-item">
    <div class="am-popmenu-content">选择四</div>
  </li>
  <li class="am-popmenu-item">
    <div class="am-popmenu-content">选择五</div>
  </li>
</ul>
Card 卡片 Card 卡片
widget/card

rem版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/widget/card.css

px版本:

https://a.alipayobjects.com/g/h5-lib/antui/9.9.0-2/widget/card.css

文本样式,class="am-card"

若用 a 标签模拟,整条卡片可点击

<div class="am-card">
  <div class="am-card-item">
    <div class="am-card-item-header">
      <h3 class="am-card-item-title">标题</h3>
    </div>
    <div class="am-card-item-content">
      <div class="am-card-item-subject">文本内容文本内容</div>
      <div class="am-card-item-brief">文本说明文本说明文本说明文本说明文本说明文本说明文本说明</div>
      <div class="am-card-item-footnote">
        <div class="am-card-item-origin">邵逸夫医院</div>
        <div class="am-card-item-tims">14-8-21</div>
      </div>
    </div>
    <div class="am-card-item-footer">
      <!-- A11Y: 「更多」链接里添加针对无障碍设备的标签 -->
      <a class="am-card-item-more">更多<span aria-label="这里写链接的描述"></span></a>
    </div>
  </div>
  <a class="am-card-item">
    <div class="am-card-item-header">
      <h3 class="am-card-item-title">整块可点</h3>
    </div>
    <div class="am-card-item-content">
      <div class="am-card-item-subject">文本内容文本内容</div>
      <div class="am-card-item-brief">文本说明文本说明文本说明文本说明文本说明文本说明文本说明</div>
      <div class="am-card-item-footnote">
        <div class="am-card-item-origin">邵逸夫医院</div>
        <div class="am-card-item-tims">14-8-21</div>
      </div>
    </div>
    <div class="am-card-item-footer">
      <div class="am-card-item-more">更多</div>
    </div>
  </a>
</div>
Notes 其他
Change Log 更新日志

9.9.0 (2021-10-16)

  • 9.9规范中的所有蓝色线条,蓝色字体,蓝色icon(message,result,process控件中蓝色icon),蓝色背景等(#0ae色值改为#108ee9,press色值改为:#1284d6),
  • header模拟控件 底色以及字体颜色修改(采用#fff 白底, #111色title,蓝色按钮和返回);
  • 去除 am-mode ,采用规范化样式名称;
  • button,list 控件提供 android,iOS 多屏幕多分辨率适配方案;
  • 增加popmenu(浮出菜单),inform(临时通知),loading(页面中加载提示),单选框(radio)列表;
  • dialog控件增加图文样式规范;
  • 去除 whitespace, wing blank 基础样式;
  • list 控件增加:单行+双行图文列表展示,结果页面纯文字展示,下拉列表展示
  • 和9.0视觉风格基本保持一致,文字和线条颜色有变更*
  • 线条采用(#ddd)
  • 黑色文字加深 (#aaa -> #000)
  • switch按钮采用绿色背景

历史文档传送门

  • 和8.7视觉风格基本保持一致,增加一些新的样式**
  • 调整蓝色系为蚂蚁蓝(#0ae)
  • 调整按钮高度为43px
  • 调整搜索按钮居中
  • 新增底部新增按钮(bottom-button)
  • 新增错误结果页(page)
  • 新增支付流程
  • 新增服务协议页面
  • 新增广告条

历史文档传送门

  • 作为9.0风格临时版,业务急需先发布一版8.7,和9.0视觉风格保持统一
  • 调整蓝色系为蚂蚁蓝(#0af)
  • 新增结果页控件(am-result)
  • 调整顶部公告栏,去除icon,颜色风格保持一致
  • 调整表单icon、消息结果icon
  • 新增通栏按钮,作为警示按钮
  • 搜索框button简化样式

历史文档传送门

  • 和8.5视觉风格一致
  • 修复8.5一些兼容性问题
  • 引入特木提供的rem辅助方案

历史文档传送门

  • 适配钱包8.5视觉风格
  • 引入1px方案,优化主要UI组件
  • 新建文档站点

历史文档传送门

  • 适配钱包8.4视觉风格
  • 修复历史遗留问题,大幅重构
  • 引入属性选择器改进模块化
  • 新增Tab、Card、Top-notice等组建

8.3.0

  • 适配钱包8.3视觉风格
  • Anima项目共建
  • 引入属性选择器改进模块化
  • 不太建议使用
  • 8.2、8.1、8.0已弃用
AntUI9.9 升级手册

antUI9.0(9.5.3) 到 antUI 9.9 升级手册

此文档用来帮助开发者从AntUI老版本(9.5.3-)升级至9.9版本做参考,如果你在升级过程当中遇到任何问题,可以加我们地旺旺群:1358109297, 也可以到这里提issue.

从antui9.9版本起,规范样式中去除了 am-mode 属性,并使用补充样式(type-class)来代替am-mode属性; 整体的样式名称定义原则:am-{{控件名称}}+{{type-class}}

button控件

按钮控件。

  1. 单个基础按钮:class="am-button {{type}}"。

    type类别am-mode属性
    white白色次按钮white
    blue蓝色主按钮blue
    warn警示按钮warn
    tiny辅助按钮blue
    disabled按钮不可用disabled
    bottom底部按钮

    am-mode="red|black|little|small|middle|light|..."等未在替换表格中的button类型,antui9.9版本起不再推荐使用,单独归入button-old.css中, am-mode属性值替换为对应的样式:{{type}}="red|balck|little|samll|middle|light blue"

  2. 带icon的按钮(antui9.9新增):class="am-button {{type}} {{icon-type}}"

    icon type类别
    loading加载中
    loading付款成功

icon button 示例

<a class="am-button blue loading"><i class="icon"></i>加载中...</a>
<a class="am-button blue success"><i class="icon"></i>付款成功</a>
  1. 原组合按钮用法不变: class="am-button-group", 具体请参考demo中示例。

list控件

list控件是DOM机构较复杂的组合控件,总样式:class="am-list",DOM包含:表头(class="am-list-header"),表体(class="am-list-body"),表尾(class="am-list-footer")三部分,表头和表尾可不存在; 表体中包含列表项(class="am-list-item");当没有表头表尾时,可以不用表体标签包含列表项,直接写列表项DOM。具体写法请参考demo示例。

  1. 列表分类:class="am-list {{type}}" type为空,普通单行列表

    type类别am-mode属性
    默认列表flat chip 43px
    twoline双行文字列表flat chip 43px
    sicon小图标+单行列表flat chip iconlist icon29 43px
    info纯文字列表antui9.9新增
    formform表单flat chip form
  2. 列表项分类:class="am-list-item {{item-type}}" (列表项模拟标签建议:需要跳转的项使用 a标签 模拟,单选复选使用 label标签 模拟,其他使用 div标签;

    item-type类别am-mode属性
    twoline双行文字列表项
    sicon小图标+单行列表项
    check复选项check
    radio单选项antui9.9新增

    原来form表单上出错样式:am-list-item-error, 置顶对齐样式:am-list-4lb, am-list-5lb 等继续沿用

  3. 复选框样式: class="am-checkbox {{type}}"

    type类别am-mode属性
    为空复选框默认大小tiny
    mini小复选框mini
    middle较大复选项middle
    mini argument协议中复选框mini radio
  4. list表单中的icon: class="am-icon {{icon-type}}"

    icon-type类别am-mode属性
    arrow horizontal水平箭头arrow-horizontal
    arrow vertical垂直箭头arrow-vertical
    captcha-refresh校验码刷新captcha-refresh
    locklock
    listform表单iconform-list
    cameraform表单iconform-camera
    contacts-mobileform表单iconform-contacts-mobile
    billform表单iconform-bill
    contacts-alipayform表单iconform-contacts-alipay
    cardsform表单iconform-cards
    calculatorform表单iconform-calculator
    scanform表单iconform-scan

    其中,clear的样式没有变更:class="am-icon-clear am-icon",去掉am-mode="clear"属性;

list表单在demo中的示例比较丰富,建议升级时直接从demo中查找类似列表案例,参照demo中DOM结构和样式名称进行升级。

message

消息提示类控件;合并了原来的结果消息提示和页面消息提示,并增加了页面中较弱的单行文本提示; 消息提示样式:class="am-message {{message-type}} {{type}}"

message-type说明:

  1. 页面中提示class="am-message {{type}}",
  2. 结果提示class="am-message result {{type}}",
  3. 单行文本弱提示 class="am-message week {{type}}" antui9.9新增
type类别am-mode属性
pay支付成功pay
success成功success
fail/error失败error/fail
warn警告warn
wait等待wait
info信息提示info
question疑惑question

不同的消息提示使用的icon不同,icon样式:class="am-icon {{icon-type}}"

icon-type类别am-mode属性
message pay单行提示 支付成功message-pay
message success单行提示 成功message-success
message fail/error单行提示 失败message-error/fail
message warn单行提示 警告message-warn
message wait单行提示 等待message-wait
message info单行提示 信息提示message-info
message question单行提示 疑惑message-question
message-week fail/error弱提示 失败
message-week warn弱提示 警告
message-week info弱提示 信息提示
result pay结果提示 支付成功result-pay
result success结果提示 成功result-success
result fail/error结果提示 失败result-error/fail
result warn结果提示 警告result-warn
result wait结果提示 等待result-wait
result info结果提示 信息提示result-info
result question结果提示 疑惑result-question

搜索框控件,样式:class="am-search",基本与原样式一致,包含三种状态:初始状态,未输入文字,输入状态, 输入框状态标签上的am-mode="search-start" 变更为补充样式:class="am-search-input search-start"。详情请参照demo,搜索框动态效果js可参照 demo中js脚本。

tab

标签栏控件,样式:class="am-tab",选中时样式:class="am-tab selected",去掉原data-tab="selected" 属性;

process

支付进度控件,样式:class="am-process",

支付项进度样式class="am-process-item {{type}}",原标签上am-mode="result-pay"属性值,作为标签上的补充样式;

type类别am-mode属性
pay支付成功result-pay
success进度成功result-success
fail进度失败result-fail
unpay未付款result-unpay

process 控件对应的icon样式:class="am-icon {{icon-type}}"

icon-type类别am-mode属性
process pay支付进度result-pay
process success进度成功result-success
process fail进度失败result-fail
process unpay未支付result-unpay

notice

原顶部公告top-notice控件改为notice控件,样式:class="am-notice",

并增加临时通知inform控件,样式:class="am-inform"

card && article

卡片控件和常规文章控件,样式规则没有变更,只做样式升级;

toast

toast提示控件, class="am-toast",控件中icon带am-mode 属性,变更为补充样式。

对应的icon样式:class="am-icon {{icon-type}}"

icon-type类别am-mode属性
toast success成功toast-pay
toast loading加载中toast-success
toast fail失败toast-fail
toast warn警告toast-unpay
toast network异常toast-network

dialog

对话框控件,建议使用antbridge中提供的jsapi;

基础样式:class="am-dialog";原控件上am-mode="show",作为控件上补充样式:class="am-dialog show"

antui9.9版本起,增加图文对话框,样式:class="am-dialog image"

其他内部样式以及DOM结构样式未做变更;请参考demo中示例。

page-result

异常结果页面控件,样式:class="am-page-result",antui9.9中未对异常类型图片进行定义,暂继续沿用原定义的图片,标签(如icon上)的am-mode属性值,作为标签的补充样式;

对应的icon样式:class="am-icon {{icon-type}}"

icon-type类别am-mode属性
page-no-network网络连接异常am-page-no-network
page-network网络连接异常am-page-network
page-busy系统繁忙am-page-busy
page-err系统异常或出错am-page-err
page-error系统异常或出错am-page-error
page-blank空结果am-page-blank
page-empty空白页面am-page-empty
page-nofound404am-page-nofound
Offline Res 离线资源包

支付宝客户端提供一套离线缓存机制,来帮助静态资源提升加载速度。

AntUI也在其中,但是只提供了最核心的组件缓存,更多组件需要开发同学自己打包或采用 combo 方式来引用。

在页面上直接使用不会发起网络请求

<link rel="stylesheet" href="https://as.alipayobjects.com/g/h5-lib/antui/9.9.0-2/rem/antui.css"/>

当前客户端已缓存静态资源: H5 全局离线资源包

Accessibility 无障碍

支付宝 H5 无障碍指南已经初步形成,见:

无障碍指南相关问题、建议请联系 @陌诗

AntUI 文档示例代码中已经添加了 ARIA 属性,请留意 <!-- A11Y: 开头的注释以及 rolearia- 属性。我们持续关注、改进无障碍相关细节。

其他参考链接:

如果在使用过程当中,遇到任何问题,请给我们提 issue

License 授权协议

AntUI 是免费的、开源的第三方样式库,可以基于 MIT 许可协议进行二次开发。

查看源码: Gitlab

百度