Getting Started 新手上路
Usage 使用方法

介绍

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

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

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

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

当前版本包含以下控件:

是否默认集成 模块名称 说明
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:

pc上查看 demo

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

include 引入方式

方式一:使用tnpm进行安装 [tnpm安装仅适用于阿里内部员工]

tnpm install @alipay/antui --save
安装后,只需要在页面中引入import "@alipay/antui/dist/dpl/antui.css"import "@alipay/antui/dist/dpl/antui.css":

[单独使用某个控件(list控件),引入import "@alipay/antui/dist/dpl/widget/search.css"import "@alipay/antui/dist/dpl/antui.css"]

import "@alipay/antui/dist/dpl/antui.css";
import "@alipay/antui/dist/dpl/widget/search.css";

方式二:CDN方式引入

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

普通px版本 推荐
<!-- 主文件 -->
<link rel="stylesheet" href="https://a.alipayobjects.com/g/antui/antui/{{ pxVersion }}/dpl/antui.css"/>

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

<!-- js -->
<script src="https://a.alipayobjects.com/g/antui/antui/{{ version }}/antui.js"></script>
rem版本 营销类页面使用
<!-- 主文件 -->
<link rel="stylesheet" href="https://a.alipayobjects.com/g/antui/antui/{{ version }}/rem/antui.css"/>

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

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

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

<!-- 普通版 -->
<link rel="stylesheet" href="https://a.alipayobjects.com/g/antui/antui/{{ pxVersion }}/dpl/antui-all.css"/>

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

html-template 推荐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-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" disabled>辅助按钮</button>

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

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

<a href="#" class="am-button tiny-blue" role="button">辅助按钮</a>
<a href="#" class="am-button disabled tiny-blue" 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>

多种状态按钮(初始化-提交中-提交成功后)

<div class="am-list am-list-twoline">
    <div 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 class="am-list-title">xx旅行</div>
            <div class="am-list-brief">服务由该生活号商户独家提供</div>
        </div>
        <a class="am-button dynamic">关注</a>
    </div>
</div>

<div class="am-list am-list-twoline">
    <div 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 class="am-list-title">xx旅行</div>
            <div class="am-list-brief">服务由该生活号商户独家提供</div>
        </div>
        <a class="am-button dynamic processing">关注</a>
    </div>
</div>

<div class="am-list am-list-twoline">
    <div 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 class="am-list-title">xx旅行</div>
            <div class="am-list-brief">服务由该生活号商户独家提供</div>
        </div>
        <a class="am-button dynamic processed">查看</a>
    </div>
</div>
Tab Bars 标签栏 Tab Bars 标签栏
widget/tab

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

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

tab组件的动态能力:滚动,选中切换,在 "dist/script/tab-nav.js" 下有提供,业务可以参考使用。

{{ antuiLinkPrex }}/{{ version }}/script/tab-nav.js

普通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>

带滚动的tab标签栏

<div class="am-tab" role="tablist">
  <div class="am-tab-scroll-nav" style="transform: translateX(0px);">
        <div class="am-tab-item selected">选项1</div>
        <div class="am-tab-item">选项2</div>
        <div class="am-tab-item ">选项3</div>
        <div class="am-tab-item">选项4</div>
        <div class="am-tab-item">选项5</div>
        <div class="am-tab-item">选项6</div>
        <div class="am-tab-item">选项7</div>
        <div class="am-tab-item">选项8</div>
    </div>
    <div class="am-tab-scroll-left"></div>
    <div class="am-tab-scroll-right show"></div>
</div>

可滚动且右边带操作icon的tab

<div class="am-tab" role="tablist">
    <div class="am-tab-wrap">
        <div class="am-tab-scroll-nav" style="transform: translateX(0px);">
            <div class="am-tab-item selected">选项1</div>
            <div class="am-tab-item">选项2</div>
            <div class="am-tab-item ">选项3</div>
            <div class="am-tab-item">选项4</div>
            <div class="am-tab-item">选项5</div>
            <div class="am-tab-item">选项6</div>
            <div class="am-tab-item">选项7</div>
            <div class="am-tab-item">选项8</div>
        </div>
        <div class="am-tab-scroll-left"></div>
        <div class="am-tab-scroll-right show"></div>
    </div>
    <a class="am-tab-btn" role="button"><i class="am-icon am-tab-dropdown"></i></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 分类说明(10.0.0版本中的type可继续使用, 推荐使用以下更精细的分类, icon750视觉稿单位px):

  • 空: 默认 单行列表(可带图标, 图标尺寸:58 x 58(ios) | 72 x 72(android))
  • am-list-twoline: 双行列表(带图标, 大图尺寸: 100 x 100 | 108 x 108)
  • am-list-twoline-text:双行纯文字
  • am-list-twoline-side: 左右双行(可带图标,圆图, 尺寸: 72 x 72 | 108 x 108)
  • am-list-users: 双行用户列表(头像大图尺寸: 100 x 100 | 108 x 108)
  • am-list-users-sm: 单行用户列表(头像大图尺寸: 72 x 72 | 96 x 96)
  • am-list-users-lg: 多行用户列表(头像大图尺寸: 120 x 120 | 144 x 144)
  • am-list-moreline: 多行列表(大图尺寸: 120 x 120 | 144 x 144)
  • am-list-ptext: 长图文组合的列表(可带图标, 大图尺寸: 120 x 120 | 180 x 180)
  • am-list-bank: 银行卡列表
  • am-list-info: 纯文字列表(结果页面)

列表单元格上使用flex伸缩, 文案默认单行+超长..., 可以设置不使用flex和多行换行显示:

  • am-list-cell-noellips 多行换行显示
  • am-list-cell-noflex 不使用flex伸缩

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>
  </div>
  <div class="am-list-footer">单行列表尾纯文字</div>
</div>

单行文字列表

<div class="am-list">
    <div href="#" class="am-list-item">
        <div class="am-list-content">标签文本</div>
        <div><button class="am-button tiny">辅助按钮</button></div>
    </div>
</div>

<div class="am-list">
    <a href="#" 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 class="am-list">
    <a class="am-list-item am-list-item-deletable">
        <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 am-list-item-deletable">
        <div class="am-list-content">删除列表</div>
        <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
    </a>
</div>

<div class="am-list">

    <a href="#" class="am-list-item">
        <div class="am-list-content">标签文本</div>
        <span class="am-bubble reddot"></span>
        <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 reddot"></span>
        <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
    </a>
</div>

<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">
                <label class="am-switch-label">
                    <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">
                <label class="am-switch-label">
                    <div class="am-switch-inner"></div>
                    <div class="am-switch-switch"></div>
                </label>
            </div>
        </div>
    </div>
    <div class="am-list-footer">辅助说明文案</div>
</div>

单元格中文案超长时调整显示

<div class="am-list">
    <div class="am-list-header">内容超长的情况</div>
    <div class="am-list-body">
        <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">
    <a class="am-list-item">
        <div class="am-list-content">标签文本内容尽量多往右显示</div>
        <div class="am-list-extra am-list-cell-noflex">辅助标签</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 am-list-cell-noflex">标签文本</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">
    <a class="am-list-item">
        <div class="am-list-content am-list-cell-noflex">标题内容</div>
        <div class="am-list-extra am-list-cell-noellips">辅助标签多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示</div>
        <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
    </a>
</div>

双行纯文字列表:

<div class="am-list am-list-twoline-text">
  <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尺寸:58 x 58(ios), 72 x 72(android) ):

<div class="am-list">
  <div class="am-list-header">图标+单行文字(icon尺寸:58x58, 72x72)</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">
  <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">
  <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>

两行文字 + 图标 (图标尺寸: 100 x 100(ios), 108 x 108(android)):

<div class="am-list am-list-twoline">
    <div class="am-list-header">图标+两行文字</div>
        <div class="am-list-body">
            <div 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 class="am-list-title">标签文本</div>
            <div class="am-list-brief">补充内容</div>
            </div>
        </div>
    </div>
</div>

<div class="am-list 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 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>

左右两行文字,图标72 x 72(ios),98 x 98(android):

<div class="am-list am-list-twoline-side">
    <div class="am-list-header-sp">左右文字组合列表</div>
    <div class="am-list-body">
        <a 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-extra">
                <div class="am-list-title">标题二</div>
                <div class="am-list-brief">内容二</div>
            </div>
        </a>
        <a 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-extra">
                <div class="am-list-title">标题二</div>
                <div class="am-list-brief">内容二</div>
            </div>
        </a>
    </div>
</div>
<div class="am-list am-list-twoline-side">
    <div class="am-list-header-sp">左右文字组合列表</div>
    <div class="am-list-body">
        <div 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-extra">
                <div class="am-list-title">标题二</div>
            </div>
        </div>
        <div 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-extra">
                <div class="am-list-title">标题二</div>
            </div>
        </div>
    </div>
</div>
<div class="am-list am-list-twoline-side">
    <div class="am-list-header-sp">左右文字组合列表</div>
    <div class="am-list-body">
        <div 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 class="am-list-title">标题一</div>
                <div class="am-list-brief">内容一</div>
            </div>
            <div class="am-list-extra">
                <div class="am-list-title">标题二</div>
                <div class="am-list-brief">内容二</div>
            </div>
        </div>
    </div>
</div>
<div class="am-list am-list-twoline-side">
    <div class="am-list-header-sp">左右文字组合列表</div>
    <div class="am-list-body">
        <div 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 class="am-list-title">标题一</div>
                <div class="am-list-brief">内容一</div>
            </div>
            <div class="am-list-extra">
                <div class="am-list-title">标题二</div>
            </div>
        </div>
    </div>
</div>

大图+双行(三行)文字,图标尺寸120 x 120(ios),144 x 144(android):

<div class="am-list am-list-twoline">
    <div class="am-list-header">大图标+多行文字 (图标尺寸: 120x120(ios), 144x144(android))</div>
    <div class="am-list-body">
        <a class="am-list-item am-list-moreline">
            <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-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
        </a>
        <a class="am-list-item am-list-moreline">
            <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 am-list-cell-noellips">摘要信息,以简明扼要为主,但建议文字不易过长,通常不超过两行。</div>
            </div>
            <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
        </a>
    </div>
</div>

联系人列表

<div class="am-list am-list-users-sm">
    <div class="am-list-header">联系人列表(尺寸: 72x72(ios), 96x96(android))</div>
    <div class="am-list-body">
        <div class="am-list-item">
            <div class="am-list-thumb"><img src="https://zos.alipayobjects.com/rmsportal/wMkOIiXzNqrSFSWYjDNe.png" alt=""></div>
            <div class="am-list-content">用户名</div>
        </div>
    </div>
</div>

<div class="am-list am-list-users">
    <div class="am-list-header">联系人列表(尺寸: 100x100(ios), 108x108(android))</div>
    <div class="am-list-body">
        <div class="am-list-item">
            <div class="am-list-thumb"><img src="https://zos.alipayobjects.com/rmsportal/wMkOIiXzNqrSFSWYjDNe.png" alt=""></div>
            <div class="am-list-content">
                <div class="am-list-title am-list-cell-twocolumn">
                    <label class="am-flexbox-item">用户列表</label>
                    <div class="am-list-right-brief">12:31</div>
                </div>
                <div class="am-list-brief">摘要信息</div>
            </div>
        </div>
    </div>
</div>

<div class="am-list am-list-users-lg">
    <div class="am-list-header">联系人列表(大图)(尺寸: 120x120(ios), 144x144(android))</div>
    <div class="am-list-body">
        <div class="am-list-item">
            <div class="am-list-thumb"><img src="https://zos.alipayobjects.com/rmsportal/wMkOIiXzNqrSFSWYjDNe.png" alt=""></div>
            <div class="am-list-content">
                <div class="am-list-title">用户名</div>
                <div class="am-list-brief">摘要信息</div>
            </div>
        </div>
    </div>
</div>

图文列表组合(图标尺寸: 120 x 120(ios), 180 x 180(android))

<div class="am-list am-list-ptext">
    <div class="am-list-header-sp">图文列表组合(图标尺寸: 120x120(ios), 180x180(android))</div>
    <div class="am-list-body">
        <div 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 class="am-list-title">标题</div>
                <div class="am-list-brief">“全球未来机场计划”是指未来游客在海外机场,通过支付宝使用航班提醒等服务。</div>
            </div>
        </div>

        <div 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 class="am-list-title">标题</div>
                <div class="am-list-brief">“全球未来机场计划”是指未来游客在海外机场,通过支付宝使用航班提醒等服务。</div>
            </div>
        </div>
        <a class="am-list-item am-list-item-more">查看更多</a>
    </div>
</div>

<div class="am-list am-list-ptext">
    <div class="am-list-header-sp">文字列表组合</div>
    <div class="am-list-body">
        <div class="am-list-item">
            <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-content">
                <div class="am-list-title">标题</div>
                <div class="am-list-brief">“全球未来机场计划”是指未来游客在海外机场,通过支付宝使用航班提醒等服务。</div>
            </div>
        </div>
        <a class="am-list-item am-list-item-more">查看更多</a>
    </div>
</div>

带时间来源其他信息的图文列表

<div class="am-list am-list-ptext">
    <div class="am-list-header-sp">图文列表组合, 附加来源</div>
    <div class="am-list-body">
        <div 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 class="am-list-title">标题</div>
                <div class="am-list-brief">“全球未来机场计划”是指未来游客在海外机场,通过支付宝使用航班提醒等服务。</div>
                <div class="am-list-sti">
                    <span>来源 </span>
                    <span>时间 </span>
                    <span>| </span>
                    <span>其他信息</span>
                </div>
            </div>
        </div>
    </div>
</div>

银行卡列表(圆图 72 x 72(ios), 108 x 108(ios))

<div class="am-list am-list-bank">
    <div class="am-list-header">银行卡列表(圆图 72x72(ios), 108x108(ios))</div>
    <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 class="am-list-title">招商银行</div>
                <div class="am-list-brief">尾号7785</div>
            </div>

            <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
        </a>
    </div>
</div>

单双行 图文组合:

<div class="am-list">
  <div class="am-list-header">单双行 图文组合</div>
  <div class="am-list-body">
    <div class="am-list-item am-list-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

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

Form控件依赖List列表模块

常规类:

<div class="am-list 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 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 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 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 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 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 am-list-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 am-list-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 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-label">身份证号码</div>
            <div class="am-list-control">
                <input type="text" placeholder="暗提示暗提示" value="33010220170101001XX">
            </div>
            <div class="am-list-clear"><i class="am-icon-clear am-icon"></i></div>
            <div class="am-list-thumb right"><i class="am-icon form am-error-tip" data-error="最长文案不超过15个字符"></i></div>
        </div>
    </div>
     <div class="am-list-footer">注意:表单出错时,首次自动出toast提示错误信息,2s后toast消失;点击右边icon再次toast提示。</div>
</div>

段落输入框

<div class="am-textarea">
    <textarea maxlength="240" rows="3" placeholder="输入内容"></textarea>
    <div class="am-textarea-footer">
        <span class="am-textarea-cur-num">0</span>/<span class="am-textarea-total-num">240</span>
    </div>
</div>

短信校验

<div class="am-list 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 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 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 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 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>

表单图标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 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="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/region-select

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/widget/region-select.css

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/widget/region-select.css
<div class="am-region-select">
    <div class="am-list current">
        <div class="am-list-header current">当前城市</div>
        <div class="am-list-item">
            <div class="am-img-wrap"><img src="https://zos.alipayobjects.com/rmsportal/ufefezSPciRBkTNWmIni.png"></div>
            <label>上海</label>
        </div>
    </div>
    <div class="am-list">
        <div class="am-list-header">热门城市</div>
        <div class="am-list-body">
            <label class="am-list-item radio">
                <div class="am-list-content">上海</div>
                <div class="am-checkbox">
                    <input type="radio" name="city" />
                    <span class="icon-check"></span>
                </div>
            </label>
            <label class="am-list-item radio">
                <div class="am-list-content">北京</div>
                <div class="am-checkbox">
                    <input type="radio" name="city"/>
                    <span class="icon-check"></span>
                </div>
            </label>
            <label class="am-list-item radio">
                <div class="am-list-content">杭州</div>
                <div class="am-checkbox">
                    <input type="radio" name="city"/>
                    <span class="icon-check"></span>
                </div>
            </label>
            <label class="am-list-item radio">
                <div class="am-list-content">深圳</div>
                <div class="am-checkbox">
                    <input type="radio" name="city"/>
                    <span class="icon-check"></span>
                </div>
            </label>
        </div>
    </div>
    <div class="am-list">
        <div class="am-list-header">A</div>
        <div class="am-list-body">

            <label class="am-list-item radio">
                <div class="am-list-content">阿克苏</div>
                <div class="am-checkbox">
                    <input type="radio" name="city"/>
                    <span class="icon-check"></span>
                </div>
            </label>
            <label class="am-list-item radio">
                <div class="am-list-content">澳门</div>
                <div class="am-checkbox">
                    <input type="radio" name="city"/>
                    <span class="icon-check"></span>
                </div>
            </label>
        </div>
    </div>
    <div class="am-list">
        <div class="am-list-header">B</div>
        <div class="am-list-body">
            <label class="am-list-item radio">
                <div class="am-list-content">北京</div>
                <div class="am-checkbox">
                    <input type="radio" name="city"/>
                    <span class="icon-check"></span>
                </div>
            </label>
            <label class="am-list-item radio">
                <div class="am-list-content">保定</div>
                <div class="am-checkbox">
                    <input type="radio" name="city"/>
                    <span class="icon-check"></span>
                </div>
            </label>
        </div>
    </div>
</div>
Checkbox 选择框 Checkbox 选择框
widget/checkbox
widget/switch

选择框控件包含:checkbox,radio, switch

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

选择框可用在列表中 列表中的列表项class:am-list-item {{item-type}}

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

  • check: 复选框 列表
  • radio: 单选框 列表
  • switch switch 选择

其他说明: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 agreement">
    <label class="am-ft-md" style="margin-left: -10px">同意</label><a
      href="http://e.alipay.com" target="_blank">《信用支付服务合同》</a>
  </div>
  <div>
    <div class="am-checkbox mini agreement">
      <input id="agree1" type="checkbox" checked="checked">
      <span class="icon-check" aria-hidden="true"></span>
      <label class="am-ft-md" for="agree1">同意开通手机营业厅服务</label>
    </div>
  </div>
  <div>
    <div class="am-checkbox mini agreement">
      <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 agreement">
      <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>
    <div class="am-checkbox mini agreement" checked="checked">
        <input id="agree1" type="checkbox">
        <span class="icon-check"></span>
        <label for="agree1">开通手机营业厅服务</label>
    </div>
</div>
<div class="am-button-wrap"><button class="am-button blue">提交</button></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>

switch 开关:

widget/switch

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/widget/switch.css

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/widget/switch.css
<div class="am-list">
  <div class="am-list-header">switch开关</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;

px版本cdn:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/widget/message.css
{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/icon/message.css

rem版本cdn:

{{ antuiLinkPrex }}/{{ version }}/rem/widget/message.css
{{ antuiLinkPrex }}/{{ version }}/rem/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 result">
    <i class="am-icon result success"></i>
    <div class="am-message-main">成功</div>
    <div class="am-message-sub">内容详情,根据实际文案安排<br />如果换行不超过两行</div>
</div>

<div class="am-bottom-wrap" style="padding: 0 15px;">
    <button class="am-button blue">主操作</button>
</div>

成功结果页

<div class="am-message result">
    <i class="am-icon result success"></i>
    <div class="am-message-main">成功</div>
    <div class="am-message-sub">内容详情,根据实际文案安排<br />如果换行不超过两行</div>
</div>

<div class="am-button-wrap">
    <button class="am-button blue">主操作</button>
    <button class="am-button white">辅助操作</button>
</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 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 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>
Page Result 结果页面 Page Result 结果页面
widget/page-result (10.0.18起打包了无网络样式)

px版本:

{{ antuiLinkPrex }}/{{ version }}/widget/page-result.css

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/widget/page-result.css

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

class: am-page-result

本地网络超时

icon/page-network (10.0.18起)

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/icon/page-network.css
px版本: {{ antuiLinkPrex }}/{{ pxVersion }}/dpl/icon/page-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-network

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/icon/page-result-network.css

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/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版本:

{{ antuiLinkPrex }}/{{ version }}/rem/icon/page-result-busy.css

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/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版本:

{{ antuiLinkPrex }}/{{ version }}/rem/icon/page-result-busy.css

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/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版本:

{{ antuiLinkPrex }}/{{ version }}/rem/icon/page-result-error.css

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/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版本:

{{ antuiLinkPrex }}/{{ version }}/rem/icon/page-error.css

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/icon/page-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-result-error

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/icon/page-result-error.css

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/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-result-empty

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/icon/page-result-empty.css

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/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版本:

{{ antuiLinkPrex }}/{{ version }}/rem/icon/page-result-nofound.css

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/icon/page-result-nofound.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>

返回结果为空(较老的用法)

icon/page-empty

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/icon/page-empty.css

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/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-network

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/icon/page-network.css

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/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">刷新</a>
        </div>
    </div>
Process 支付进度 Process 支付进度
widget/process

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/widget/process.css

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/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 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 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 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

px版本:

https://a.alipayobjects.com/g/antui/antui/{{ pxVersion }}/dpl/widget/search.css

rem版本:

https://a.alipayobjects.com/g/antui/antui/{{ version }}/rem/widget/search.css

搜索条样式 class: am-search

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

页面内搜索

页面内搜索: 动态搜索组件, 目前ios/android页面中都统一使用此 "页面内搜索" 规范

<div class="am-search-inpage am-input-autoclear">
  <div class="am-search-input">
    <div class="am-search-icon" aria-hidden="true">
      <i class="am-icon search-inpage"></i>
    </div>
    <input 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>
</div>

搜索入口(ios专用,点击后跳专用搜索页面,配合容器统一的搜索控件接口使用)

搜索入口: 点击后应跳转去专门的搜索页面, ios/android 使用与系统原生一致的搜索入口.

android搜索入口, 在titlebar的位置, 钱包内H5页面未涉及, 实际使用请调用native搜索控件;

ios搜索入口, 请使用此 "搜索入口(ios专用)" 规范, 点击后去专用的搜索页面

<a class="am-search-link" aria-label="搜索" href="alipays://platformapi/startApp?appId=20000238&target=searchHome&showSwitch=[YES|NO]&latitude=xxx&longitude=xxx&menus=xxx">
  <div class="am-search-input" aria-hidden="true">
    <i class="am-icon search"></i>
    <span class="am-search-ph">搜索</span>
  </div>
</a>
Article 常规文章 Article 常规文章
widget/article

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/widget/article.css

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/widget/article.css

图文样式,class: am-article

<div class="am-article" role="article">
  <h2>中石化加油卡办卡章程</h2>
  <time>2013-11-23 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>
Notice 公告 Notice 公告
widget/notice; widget/inform

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

顶部公告 am-notice

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/widget/notice.css

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/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版本:

{{ antuiLinkPrex }}/{{ version }}/rem/widget/inform.css

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/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>
Card 卡片 Card 卡片
widget/card

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/widget/card.css

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/widget/card.css

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

无图标卡片

<div class="am-card am-card-noicon">
    <div class="am-card-header">无图标卡片</div>

    <div class="am-card-item am-card-minfo">
        <div class="am-card-content">
            <div class="am-card-title">卡片标题</div>
            <div class="am-card-subtitle">副标题非必填</div>
        </div>

        <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
    </div>

    <div class="am-card-item am-card-minfo">
        <div class="am-card-content">
            <div class="am-card-title">卡片标题</div>
            <div class="am-card-subtitle">副标题非必填</div>
        </div>
    </div>
</div>

带图标卡片

<div class="am-card">
    <div class="am-card-header">带图标卡片</div>
    <div class="am-card-body">
        <div class="am-card-item am-card-minfo">
            <div class="am-card-thumb"><img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" /></div>
            <div class="am-card-content">
                <div class="am-card-subtitle">手工水饺</div>
                <div class="am-card-title">100元代金券</div>
            </div>

            <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
        </div>

        <div class="am-card-item">
            <div class="am-card-minfo">
                <div class="am-card-thumb"><img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" /></div>
                <div class="am-card-content">
                    <div class="am-card-subtitle">手工水饺</div>
                    <div class="am-card-title">100元代金券</div>
                </div>
                <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
            </div>
            <div class="am-card-footnote">483米有门店</div>
        </div>

        <div class="am-card-item am-card-minfo">
            <div class="am-card-thumb"><img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" /></div>
            <div class="am-card-content">
                <div class="am-card-subtitle">手工水饺</div>
                <div class="am-card-title">100元代金券</div>
            </div>
        </div>

        <div class="am-card-item">
            <div class="am-card-minfo">
                <div class="am-card-thumb"><img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" /></div>
                <div class="am-card-content">
                    <div class="am-card-subtitle">手工水饺</div>
                    <div class="am-card-title">100元代金券</div>
                </div>
            </div>
            <div class="am-card-footnote">483米有门店</div>
        </div>

    </div>
</div>
Loading 加载状态 Loading 加载状态
widget/loading

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/widget/loading.css

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/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 am-loading-refresh" aria-label="加载中">
    <i class="am-icon loading" aria-hidden="true"></i>
    <div class="am-loading-text">上次更新 2016-06-23 11:47</div>
</div>

页面底部加载

<div style="color:#F4333C;background-color: #fff; text-align: center; height: 300px;">内容显示区域</div>
<div class="am-loading" aria-label="加载中">
    <i class="am-icon loading" aria-hidden="true"></i>
    <span class="am-loading-text">加载中...</span>
</div>

页面底部加载更多时没有数据

<div style="color:#F4333C;background-color: #fff; text-align: center; height: 300px;">内容显示区域</div>
<div class="am-loading am-loading-nomore" aria-label="加载中">
    <i class="am-icon loading" aria-hidden="true"></i>
    <span class="am-loading-text">没有更多了</span>
</div>
Toast 信息提示 Toast 信息提示
widget/toast

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/widget/toast.css

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/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>
Dialog 对话框 Dialog 对话框
widget/dialog

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/widget/dialog.css

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/widget/dialog.css

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

对话框控件建议使用容器接口:alert,limitAlert,prompt

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>

对话框 标题 (纯文本弹窗无标题 或者无描述文字,字体大小都统一成30px,最小高度限制为84px)

<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-body">
        <p class="am-dialog-brief am-dialog-sline-content">纯文本弹窗</p>
    </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>

对话框 内容(纯文本弹窗无标题 或者无描述文字,字体大小都统一成30px)

<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-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-dialog-button" role="button">行动按钮</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 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 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>

带输入框 对话框(不推荐使用,可直接调用容器接口:prompt)

<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" 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>
<div class="am-dialog show">
    <div class="am-dialog-wrap">
        <div class="am-dialog-body">
            <p class="am-dialog-brief">内容说明当前状态、提示用户解决方案,最好不要超过两行。</p>
        </div>
        <div class="am-dialog-footer selection">
            <a class="am-dialog-button">选项1</a>
            <a class="am-dialog-button">选项2</a>
        </div>
    </div>
</div>

业务通用对话框:发送成功

<div class="am-dialog-mask show"></div>
<div class="am-dialog show">
    <div class="am-dialog-wrap">
        <div class="am-dialog-body">
            <div class="am-dialog-send-img">
                <img src="https://zos.alipayobjects.com/rmsportal/hkzwYezdQOqZfseGofgP.png" width="45px" height="29px">
            </div>
            <p class="am-dialog-brief">已发送</p>
        </div>
        <div class="am-dialog-footer selection">
            <a class="am-dialog-button">返回手机淘宝</a>
            <a class="am-dialog-button">留在支付宝</a>
        </div>
    </div>
</div>
Pop Menu 浮出菜单 Pop Menu 浮出菜单
widget/popmenu

建议使用容器jsapi: popMenu

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/widget/popmenu.css

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/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版本:

{{ antuiLinkPrex }}/{{ version }}/rem/widget/bubble.css

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/widget/bubble.css
<ul class="am-popmenu icon-popmenu">
    <li class="am-popmenu-item">
        <div class="am-popmenu-content">
            <img class="icon" src="https://os.alipayobjects.com/rmsportal/XMnADSCLrqbfbjW.png">
            <span class="text">添加朋友</span>
            <span class="am-bubble reddot"></span>
        </div>
    </li>
    <li class="am-popmenu-item">
        <div class="am-popmenu-content">
            <img class="icon" src="https://os.alipayobjects.com/rmsportal/VuLlWdHvIWaCYgy.png">
            <span class="text">菜单超长由业务把控</span>
            <span class="am-bubble">2</span>
        </div>
    </li>
    <li class="am-popmenu-item">
        <div class="am-popmenu-content">
            <img class="icon" src="https://os.alipayobjects.com/rmsportal/ihcqXRqhVtcNebY.png">
            <span class="text">扫一扫</span>
            <span class="am-bubble new"></span>
        </div>
    </li>
    <li class="am-popmenu-item">
        <div class="am-popmenu-content">
            <img class="icon" src="https://os.alipayobjects.com/rmsportal/gKcOuuUqKWuYwkx.png">
            <span class="text">我的二维码/收款</span>
            <span class="am-bubble two-num">24</span>
        </div>
    </li>
    <li class="am-popmenu-item">
        <div class="am-popmenu-content">
            <img class="icon" src="https://os.alipayobjects.com/rmsportal/ptFMjUsIhfDyAfp.png">
            <span class="text">帮助</span>
            <span class="am-bubble dot"></span>
        </div>
    </li>
</ul>
Agreement 协议页面 Agreement 协议页面

协议页面Demo

<div class="am-agreement">
    <h2 class="am-agreement-title">支付宝服务协议</h2>
    <div class="am-agreement-content">
        <p>支付宝服务是由支付宝网络技术有限公司向支支付宝服务是由支付宝网络技术有限公司向支支付宝服务是由支付宝网络技术有限公司向支</p>
        <h4>一、声明与承诺</h4>
        <p>1.1  本协议已对与您的权益有或可能具有重大关系的条款,及对本公司具有或可能具有及对本公司具有或可能具有及对本公司具有或可能具有</p>
        <p>1.2  本协议已对与您的权益有或可能具有重大<span class="am-agreement-strong">已满十八周岁才可申请</span></p>
        <h4>二、定义和理解</h4>
        <p>2.1 支付宝账户:本公司向您提供的唯一编号。您可自行为该支付宝账户设置密码,并用以查询或计量您的预付,应收或应付款。</p>
        <p>2.2 更多协议:<span class="blue">《争议处理规则》、《支付宝交易通用规则》您提供的唯一编号</span>《争议处理规则》、《支付宝交易通用规则》您提供的唯一编号。您可自行为该支付宝账户设置密码,并用以查询或计量您的预付,应收或应付款。</p>
    </div>
</div>
Filter 筛选 Filter 筛选
widget/filter

筛选组件:筛选项目一般一行三列,默认纯文字,可以有icon,需自定义样式;筛选项目可以有推荐类项目,以及项目分类名称; 如果是多选类型的筛选建议使用全局页面筛选,筛选组件自带确认和重置按钮。 筛选可以搭配tab右边下拉操作一起使用

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/widget/filter.css

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/widget/filter.css

常规类:

<div class="am-filter-mask show"></div>
<div class="am-filter show">
    <ul class="am-filter-list">
        <li class="am-filter-item-wrap">
            <label class="am-filter-item am-filter-item-selected">
                筛选项
            </label>
        </li>
        <li class="am-filter-item-wrap">
            <label class="am-filter-item">
                筛选项
            </label>
        </li>
        <li class="am-filter-item-wrap">
            <label class="am-filter-item">
                筛选项
            </label>
        </li>
        <li class="am-filter-item-wrap">
            <label class="am-filter-item">
                筛选项
            </label>
        </li>
        <li class="am-filter-item-wrap">
            <label class="am-filter-item">
                筛选项
            </label>
        </li>
        <li class="am-filter-item-wrap">
            <label class="am-filter-item">
                筛选项
            </label>
        </li>
        <li class="am-filter-item-wrap">
            <label class="am-filter-item">
                筛选项
            </label>
        </li>
        <li class="am-filter-item-wrap">
            <label class="am-filter-item">
                筛选项
            </label>
        </li>
        <li class="am-filter-item-wrap">
            <label class="am-filter-item">
                筛选项
            </label>
        </li>
        <li class="am-filter-item-wrap">
            <label class="am-filter-item">
                筛选项
            </label>
        </li>
        <li class="am-filter-item-wrap">
            <label class="am-filter-item">
                筛选项
            </label>
        </li>
        <li class="am-filter-item-wrap">
            <label class="am-filter-item">
                筛选项
            </label>
        </li>
        <li class="am-filter-item-wrap">
            <label class="am-filter-item">
                筛选项
            </label>
        </li>
    </ul>

</div>

与tab一起使用,并带有推荐项和分类名称:

<div class="am-tab">
    <div class="am-tab-wrap">
        <div class="am-tab-scroll-nav" style="transform: translateX(0px);">
            <div class="am-tab-item selected">分段1</div>
            <div class="am-tab-item">分段2</div>
            <div class="am-tab-item">分段3</div>
            <div class="am-tab-item">分段4</div>
            <div class="am-tab-item">分段分段分段5</div>
            <div class="am-tab-item">分段6</div>
            <div class="am-tab-item">分段7</div>
            <div class="am-tab-item">分段8</div>
        </div>
        <div class="am-tab-scroll-left show"></div>
        <div class="am-tab-scroll-right show"></div>
    </div>
    <a class="am-tab-btn"><i class="am-icon am-tab-dropdown"> </i></a>
</div>
<div class="am-filter-mask show"></div>
    <div class="am-filter show">
        <ul class="am-filter-list am-filter-recomend">
            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    推荐项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    推荐项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    推荐项
                </a>
            </li>
        </ul>
        <div class="am-filter-class-title">分类名称</div>
        <ul class="am-filter-list">

            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    筛选项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    筛选项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    筛选项
                </a>
            </li>
        </ul>
        <div class="am-filter-class-title">分类名称</div>
        <ul class="am-filter-list">

            <li class="am-filter-item-wrap">
                <a class="am-filter-item am-filter-item-selected">
                    筛选项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    筛选项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    筛选项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    筛选项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    筛选项
                </a>
            </li>
        </ul>

    </div>

全局页面的筛选(多选)

<div class="am-filter am-filter-full-page show">
        <ul class="am-filter-list">
            <li class="am-filter-item-wrap">
                <a class="am-filter-item am-filter-item-selected">
                    筛选项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item am-filter-item-selected">
                    筛选项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    筛选项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    筛选项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    筛选项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item am-filter-item-selected">
                    筛选项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    筛选项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    筛选项
                </a>
            </li>
            <li class="am-filter-item-wrap">
                <a class="am-filter-item">
                    筛选项
                </a>
            </li>
        </ul>

        <div class="am-filter-button-wrap">
            <button class="am-filter-button-clear">重置</button>
            <button class="am-filter-button-confirm">确定</button>
        </div>

    </div>
成员添加删除 成员添加删除
widget/member-manage

成员添加删除组件:通用业务组件

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/widget/member-manage.css

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/widget/member-manage.css

Demo

<div class="am-member-manage">
    <ul class="am-member-list">
        <li class="am-member-item">
            <div class="am-member-img-wrap">
                <img class="am-member-head-img" src="https://gw.alipayobjects.com/zos/rmsportal/iztxjnnTiBkXbbzeICAj.jpg" onerror="this.style.display='none'" title="微微"/>
                <a class="am-member-delete-icon show" role="button" aria-label="删除微微"></a>
            </div>
            <div class="am-member-info">微微</div>
        </li>
        <li class="am-member-item">
            <div class="am-member-img-wrap">
                <img class="am-member-head-img" src="https://gw.alipayobjects.com/zos/rmsportal/iztxjnnTiBkXbbzeICAj.jpg" onerror="this.style.display='none'" title="微微"/>
                <a class="am-member-delete-icon" role="button" aria-label="删除微微"></a>
            </div>
            <div class="am-member-info">微微</div>
        </li>
        <li class="am-member-item">
            <div class="am-member-img-wrap">
                <img class="am-member-head-img" src="https://gw.alipayobjects.com/zos/rmsportal/iztxjnnTiBkXbbzeICAj.jpg" onerror="this.style.display='none'" title="微微"/>
                <a class="am-member-delete-icon" role="button" aria-label="删除微微"></a>
            </div>
            <div class="am-member-info">微微</div>
        </li>
        <li class="am-member-item">
            <div class="am-member-img-wrap">
                <img class="am-member-head-img" src="https://gw.alipayobjects.com/zos/rmsportal/iztxjnnTiBkXbbzeICAj.jpg" onerror="this.style.display='none'" title="微微"/>
                <a class="am-member-delete-icon" role="button" aria-label="删除微微"></a>
            </div>
            <div class="am-member-info">微微</div>
        </li>
        <li class="am-member-item">
            <div class="am-member-img-wrap">
                <img class="am-member-head-img" src="https://gw.alipayobjects.com/zos/rmsportal/iztxjnnTiBkXbbzeICAj.jpg" onerror="this.style.display='none'" title="笑笑"/>
                <a class="am-member-delete-icon" role="button" aria-label="删除笑笑"></a>
            </div>
            <div class="am-member-info">笑笑</div>
        </li>
        <li class="am-member-item">
            <div class="am-member-img-wrap">
                <img class="am-member-head-img" src="https://gw.alipayobjects.com/zos/rmsportal/iztxjnnTiBkXbbzeICAj.jpg" onerror="this.style.display='none'" title="小仙"/>
                <a class="am-member-delete-icon" role="button" aria-label="删除小仙"></a>
            </div>
            <div class="am-member-info">小仙</div>
        </li>

        <li class="am-member-btn"><a class="am-member-add" role="button" aria-label="添加成员"></a></li>
        <li class="am-member-btn"><a class="am-member-delete" role="button" aria-label="删除成员"></a></li>
    </ul>
    <div class="am-member-footer">把通讯录的某个朋友放到该列表,他(她)将不能查看你公开的动态</div>
</div>
横向滚动 横向滚动
widget/horizon-swiper

HorizonSwiper横向滚动:图像列表的横向滚动组件, 可配合swiper.js实现动态滚动效果。

px版本:

{{ antuiLinkPrex }}/{{ pxVersion }}/dpl/widget/horizon-swiper.css

rem版本:

{{ antuiLinkPrex }}/{{ version }}/rem/widget/horizon-swiper.css

默认

<div class="am-horizon-swiper swiper-container swiper-container-horizontal">
    <div class="am-hswiper-title">标题</div>
    <div class="am-hswiper-list swiper-wrapper">
        <div class="am-hswiper-item swiper-slide">
            <img class="am-hswiper-img" src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png"/>
            <div class="am-hswiper-item-title">标题</div>
            <div class="am-hswiper-item-des">描述信息允许双行</div>
        </div>
        <div class="am-hswiper-item swiper-slide">
            <img class="am-hswiper-img" src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png"/>
            <div class="am-hswiper-item-title">标题</div>
            <div class="am-hswiper-item-des">描述信息允许双行</div>
        </div>
        <div class="am-hswiper-item swiper-slide">
            <img class="am-hswiper-img" src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png"/>
            <div class="am-hswiper-item-title">标题</div>
            <div class="am-hswiper-item-des">描述信息允许双行</div>
        </div>
        <div class="am-hswiper-item swiper-slide">
            <img class="am-hswiper-img" src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png"/>
            <div class="am-hswiper-item-title">标题</div>
            <div class="am-hswiper-item-des">描述信息允许双行</div>
        </div>
        <div class="am-hswiper-item swiper-slide">
            <img class="am-hswiper-img" src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png"/>
            <div class="am-hswiper-item-title">标题</div>
            <div class="am-hswiper-item-des">描述信息允许双行</div>
        </div>
        <div class="am-hswiper-item swiper-slide">
            <img class="am-hswiper-img" src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png"/>
            <div class="am-hswiper-item-title">标题</div>
            <div class="am-hswiper-item-des">描述信息允许双行</div>
        </div>
        <div class="am-hswiper-item swiper-slide">
            <img class="am-hswiper-img" src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png"/>
            <div class="am-hswiper-item-title">标题</div>
            <div class="am-hswiper-item-des">描述信息允许双行</div>
        </div>
        <a class="am-hswiper-item am-hswiper-more swiper-slide">
            查看更多
        </a>
    </div>
</div>

长图类型

<div class="am-horizon-swiper swiper-container swiper-container-horizontal">
    <div class="am-hswiper-title">标题</div>
    <div class="am-hswiper-list am-hswiper-longimg-list swiper-wrapper">
        <div class="am-hswiper-item swiper-slide">
            <img class="am-hswiper-img" src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png"/>
            <div class="am-hswiper-item-title">标题</div>
            <div class="am-hswiper-item-des">描述信息允许双行</div>
        </div>
        <div class="am-hswiper-item swiper-slide">
            <img class="am-hswiper-img" src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png"/>
            <div class="am-hswiper-item-title">标题</div>
            <div class="am-hswiper-item-des">描述信息允许双行</div>
        </div>
        <div class="am-hswiper-item swiper-slide">
            <img class="am-hswiper-img" src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png"/>
            <div class="am-hswiper-item-title">标题</div>
            <div class="am-hswiper-item-des">描述信息允许双行</div>
        </div>
        <div class="am-hswiper-item swiper-slide">
            <img class="am-hswiper-img" src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png"/>
            <div class="am-hswiper-item-title">标题</div>
            <div class="am-hswiper-item-des">描述信息允许双行</div>
        </div>
        <div class="am-hswiper-item swiper-slide">
            <img class="am-hswiper-img" src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png"/>
            <div class="am-hswiper-item-title">标题</div>
            <div class="am-hswiper-item-des">描述信息允许双行</div>
        </div>
        <div class="am-hswiper-item swiper-slide">
            <img class="am-hswiper-img" src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png"/>
            <div class="am-hswiper-item-title">标题</div>
            <div class="am-hswiper-item-des">描述信息允许双行</div>
        </div>
        <a class="am-hswiper-item am-hswiper-more swiper-slide">
            查看更多
        </a>
    </div>
</div>
Notes 其他
Change Log 更新日志

10.0.18 2017.06.16

  • checkbox复选框icon样式调整
  • form 表单 错误样式调整为toast提示
  • button 增加业务通用的多状态的按钮(初始化-提交中-提交成功后)
  • dialog 增加并列按钮引导对话框和业务通用对话框(发送成功对话框)
  • loading 列表中底部loading没有数据时样式规范
  • filter 业务通用控件-筛选控件;
  • member-manage 业务通用控件-成员添加删除控件
  • horizon-swiper 业务通用控件-图像列表的横向左右滚动

10.0.12 历史文档传送门

  • list控件 分类更精细: 增加用户列表, 左右图文列表, 长图文列表, 多行列表, 银行卡列表等,表单元色素增加取消flex, 取消单行...等样式
  • form 表单 间距调整
  • button 辅助小按钮增加蓝色类型;
  • dialog 统一只有标题或内容的弹出框样式
  • loading loading图标颜色调整, 页面全局加载loading尺寸调整;
  • am-bubble 气泡调整, 增加new气泡;
  • article 常规文章字体样式调整
  • agreement 协议字体样式调整

10.0.0 历史文档传送门

  • list控件 间距以及字号调整,
  • button ios button控件高度调整为47px;
  • dialog 控件梳理:间距,字号,字体颜色,线条颜色,点击button效果调整
  • searchbar 统一:区分页面内搜索,和搜索入口;
  • 增加区域选择region-select控件,基于list控件的组合控件;
  • antui.js提供基础样式对应的js:input框内自动清除:amAutoClear,点击效果:amTouchActive;

9.9.0 历史文档传送门

  • 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控件增加图文样式规范;
  • list 控件增加:单行+双行图文列表展示,结果页面纯文字展示,下拉列表展示
  • 和9.0视觉风格基本保持一致,文字和线条颜色有变更*
  • 线条采用(#ddd)
  • 黑色文字加深 (#aaa -> #000)
  • switch按钮采用绿色背景

9.0.0 历史文档传送门

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

8.7.0 历史文档传送门

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

8.6.0 历史文档传送门

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

8.5.0 历史文档传送门

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

8.4.0 历史文档传送门

  • 适配钱包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://a.alipayobjects.com/g/antui/antui/10.0.12/rem/antui.css"/>

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

Accessibility 无障碍

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

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

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

其他参考链接:

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

License 授权协议

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