Getting Started 新手上路
Usage 使用方法

介绍

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

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

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

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

当前版本包含以下控件:

默认 模块 备注
base/reset Reset or Normalize 重置样式
base/smooth Smooth 默认全局属性
util/flexbox Flexbox 弹性布局
util/writing Writing 文字书写
util/whitespace Whitespace 上下留白
util/wingblank Wingblank 两翼留白
util/pricefont Fonts 特殊字体-金额字体
widget/button Button 按钮
widget/tab Tab Bars 标签栏
widget/list List 列表
widget/form Form 表单
widget/checkbox Checkbox 选择框
widget/switch Switch 开关
widget/message Message 信息状态
icon/message Message 信息状态-图标
widget/page-result Page Result 结果页面
icon/page-network Page Result 结果页面-图标-网络异常
icon/page-result-busy Page Result 结果页面-图标-系统繁忙;
icon/page-result-error; Page Result 结果页面-图标-业务异常
icon/page-result-empty Page Result 结果页面-图标-返回结果为空
icon/page-empty; Page Result 结果页面-图标-局部内容为空
widget/process Process 支付进度
widget/search Search 搜索栏
widget/search Search 搜索栏
widget/article Article 常规文章
widget/notice Notice 公告
widget/card Card 卡片
widget/loading Loading 加载状态
widget/toast Toast 信息提示
widget/dialog Dialog 对话框
widget/popmenu Pop Menu 浮出菜单
widget/agreement Agreement 协议页面
widget/filter Filter 筛选
widget/member-manage Member Manage 成员管理
widget/horizon-swiper Horizon 横向滚动
widget/footer Footer 页脚
widget/carousel Carousel 轮播滑块
widget/tips-favorite Tips 小提示

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

手机扫码查看demo:

px&rem 版本区别

px版

对于AntUI这类工具控件,需要保持与客户端native的尺寸一致性。在如下场景下,rem无法保持一致:

  • 在iPhone 6Plus 3x屏上,存在"设置"-"通用"-"视图",有2种模式,分别是"标准"和"放大"
    • 标准模式下,前端获取到的clientWidth = 414
    • 放大模式下,前端获取到的clientWidth = 375
  • 标准放大模式下,native显示的物理尺寸不一致,但是rem版本因为等比放缩,两个模式下一致。
    • 因此导致了一个问题,如果前后2个页面从native跳转到H5 rem,会有页面放缩的明显变化

基于上述问题,对于AntUI这类工具控件,在流式布局时,推荐采用px配置,如果业务对页面有特定需求,比如蚂蚁森林,对局部区域进行rem等比放缩。

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的使用效果。

fontsize推荐计算方式

<script>
  var docEl = document.documentElement;
  docEl.style.fontSize = 100 / 375 * docEl.clientWidth  + 'px';
  window.addEventListener('resize', function() {
    docEl.style.fontSize = 100 / 375 * docEl.clientWidth + 'px';
  });
</script>

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="{{ antuiLinkPrex }}/{{ version }}/dpl/antui.css"/>

<!-- 组件 -->
<link rel="stylesheet" href="{{ antuiLinkPrex }}/{{ version }}/??dpl/widget/message.css,dpl/icon/message.css,dpl/widget/search.css"/>

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

<!-- 组件 -->
<link rel="stylesheet" href="{{ antuiLinkPrex }}/{{ version }}/??rem/widget/message.css,rem/icon/message.css,rem/widget/search.css"/>

<!-- js -->
<script src="{{ antuiLinkPrex }}/{{ version }}/antui.js"></script>
全组件打包版本

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

<!-- 普通版 -->
<link rel="stylesheet" href="{{ antuiLinkPrex }}/{{ version }}/dpl/antui-all.css"/>

<!-- rem版 -->
<link rel="stylesheet" href="{{ antuiLinkPrex }}/{{ 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" />-->
  <script>
    var docEl = document.documentElement;
    docEl.style.fontSize = 100 / 375 * docEl.clientWidth  + 'px';
    window.addEventListener('resize', function() {
      docEl.style.fontSize = 100 / 375 * docEl.clientWidth + 'px';
    });
  </script>
  <link rel="stylesheet" href="{{ antuiLinkPrex }}/{{ version }}/dpl/antui.css"/>
  </head>
<body ontouchstart="">
  <!--你的html页面代码-->
</body>
</html>
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 浮动相关

.fn-clear { background: #4FC1E9; } .fn-left, .fn-right { background: #4A89DC; color: #fff; }
<div class="fn-clear">
    <div class="fn-left">fn-left 左浮动</div>
    <div class="fn-right">fn-right 右浮动</div>
</div>
Flexbox 弹性布局
util/flexbox

default 基础布局

body { font-size: 12px; } .am-flexbox { margin: 8px 0; } .am-flexbox-item { padding: 6px 0; background: #EBEBEB; border-radius: 2px; text-align: center; color: #333; }
<div class="am-flexbox">
    <div class="am-flexbox-item">2 col</div>
    <div class="am-flexbox-item">2 col</div>
</div>
<div class="am-flexbox">
    <div class="am-flexbox-item">3 col</div>
    <div class="am-flexbox-item">3 col</div>
    <div class="am-flexbox-item">3 col</div>
</div>
<div class="am-flexbox">
    <div class="am-flexbox-item">4 col</div>
    <div class="am-flexbox-item">4 col</div>
    <div class="am-flexbox-item">4 col</div>
    <div class="am-flexbox-item">4 col</div>
</div>
<div class="am-flexbox">
    <div class="am-flexbox-item">5 col</div>
    <div class="am-flexbox-item">5 col</div>
    <div class="am-flexbox-item">5 col</div>
    <div class="am-flexbox-item">5 col</div>
    <div class="am-flexbox-item">5 col</div>
</div>
<div class="am-flexbox">
    <div class="am-ft-center" style="width:70px;">70px</div>
    <div class="am-flexbox-item">auto</div>
</div>
<div class="am-flexbox">
    <div class="am-flexbox-item">3 col</div>
    <div class="am-flexbox-item am-ft-ellipsis">自定义文案自定义文案自定义文案</div>
    <div class="am-flexbox-item">3 col</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-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>
<div class="am-ft-white">
  【白色】仅用于标题按钮和深色内容
</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 基础样式

.am-whitespace { background: #108ee9; }
<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 基础样式

.am-wingblank { height: 20px; background: #108ee9; }
<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>
Fonts 特殊字体

金额字体

util/pricefont
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/util/pricefont.css
{{ antuiLinkPrex }}/{{ version }}/rem/util/pricefont.css
import "@alipay/antui/dist/dpl/util/pricefont.css"
import "@alipay/antui/dist/rem/util/pricefont.css"
<!-- 一般样式 -->
<div class="am-ft-price">
  123,456,789.00
</div>

<!-- 20px -->
<div class="am-ft-20 am-ft-price">
  123,456,789.00
</div>

<!-- 12px -->
<div class="am-ft-12 am-ft-price">
  123,456,789.00
</div>
导航
Tabs 选项卡
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"><span>标签栏1</span></a>
  <a class="am-tab-item" role="tab"><span>标签栏2</span></a>
  <a class="am-tab-item selected" role="tab"><span>标签栏3</span></a>
</div>

带滚动的tab标签栏

注意:需配合swiper使用,页面需引入下面两个静态资源。 `


```html-demo
<div class="am-tab demo-tab-scroll">
    <div class="am-tab-scroll-nav" style="transform: translateX(0px);">
        <div class="am-tab-item selected"><span>选项一</span></div>
        <div class="am-tab-item"><span>选项二</span></div>
        <div class="am-tab-item"><span>选项三</span></div>
        <div class="am-tab-item"><span>选项四</span></div>
        <div class="am-tab-item"><span>选项五</span></div>
        <div class="am-tab-item"><span>选项六</span></div>
        <div class="am-tab-item"><span>选项七</span></div>
        <div class="am-tab-item"><span>选项八</span></div>
    </div>
    <div class="am-tab-scroll-left show"></div>
    <div class="am-tab-scroll-right show"></div>
</div>
<script>
var mySwiper1 = new Swiper ('.demo-tab-scroll', {
    wrapperClass : 'am-tab-scroll-nav',
    slideClass : 'am-tab-item',
    slidesPerView: "auto",
    slidesOffsetAfter : 30,
    freeMode: true,
    freeModeMomentum: false,
    longSwipesRatio: .1,
    resistanceRatio: .7,
    onTap: function(swiper, e) {
        if(!!swiper.clickedSlide) {
            $(swiper.slides).removeClass('selected');
            $(swiper.clickedSlide).addClass('selected');
        }
    }
});
</script>

标签面板切换 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">
    <span>标签栏1</span>
  </a>
  <a id="tab-2" href="#profile" class="am-tab-item" role="tab" aria-controls="profile" aria-selected="false">
    <span>标签栏2</span>
  </a>
  <a id="tab-3" href="#messages" class="am-tab-item selected" role="tab" aria-controls="messages" aria-selected="true">
    <span>标签栏3</span>
  </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">
    <span>...</span>
  </div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="tab-2">
    <span>...</span>
  </div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="tab-3">
    <span>...</span>
  </div>
</div>

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

数据录入
Button 按钮
widget/button

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

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

分类说明:

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

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

普通按钮:

body { padding: 10px; } .am-button { margin-bottom: 20px; }
<button type="button" class="am-button">主要操作 Normal</button>
<button type="button" class="am-button hover">主要操作 Press</button>
<button type="button" disabled="disabled" class="am-button">主要操作 Disable</button>
<br /><br />
<a href="#" type="button" class="am-button" role="button">主要操作 Normal</a>
<a href="#" type="button" class="am-button hover" role="button">主要操作 Press</a>
<a href="#" type="button" disabled="disabled" class="am-button disabled" role="button">主要操作 Disable</a>

辅助按钮:

body { padding: 10px; } .am-button { margin-bottom: 20px; }
<button type="button" class="am-button white">辅助操作 Normal</button>
<button type="button" class="am-button white hover">辅助按钮 Press</button>
<button type="button" disabled="disabled" class="am-button white">辅助操作 Disable</button>
<br /><br />
<a href="#" type="button" class="am-button white" role="button">辅助操作 Normal</a>
<a href="#" type="button" class="am-button white hover" role="button">辅助按钮 Press</a>
<a href="#" type="button" disabled="disabled" class="am-button white disabled" role="button">辅助操作 Disable</a>

警示按钮:

body { padding: 10px; } .am-button { margin-bottom: 20px; }
<button type="button" class="am-button warn">警示类操作 Normal</button>
<button type="button" class="am-button warn hover">警示类操作 Press</button>
<button type="button" disabled="disabled" class="am-button warn disabled">警示类操作 Disable</button>
<br /><br />
<a href="#" type="button" class="am-button warn" role="button">警示类操作 Normal</a>
<a href="#" type="button" class="am-button warn hover" role="button">警示类操作 Press</a>
<a href="#" type="button" disabled="disabled" class="am-button warn disabled" role="button">警示类操作 Disable</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>

辅助类型小按钮:

body { padding: 10px; } .am-button { margin-bottom: 20px; }
<button class="am-button tiny-blue">小按钮</button>
<button class="am-button tiny-blue hover">小按钮-按下</button>
<button class="am-button tiny-blue">小按钮-不可点</button>
<br />
<button class="am-button tiny">小按钮</button>
<button class="am-button tiny hover">小按钮-按下</button>
<button class="am-button tiny">小按钮-不可点</button>
<br />
<a href="#" class="am-button tiny-blue" role="button">小按钮</a>
<a href="#" class="am-button tiny-blue hover" role="button">小按钮-按下</a>
<a href="#" class="am-button tiny-blue disabled" role="button">小按钮-不可点</a>
<br />
<a href="#" class="am-button tiny" role="button">小按钮</a>
<a href="#" class="am-button tiny hover" role="button">小按钮-按下</a>
<a href="#" class="am-button tiny disabled" role="button">小按钮-不可点</a>

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

一般用于按钮有异步交互的场景,比如点击按钮异步提交,可根据业务需要选择性使用。

body { padding: 10px; } .am-button { margin-bottom: 20px; }
<!-- A11Y: aria-live="assertive" 无障碍设备会将结果即时通知用户 -->
<button type="button" class="am-button loading">
  <div class="am-loading-indicator white" aria-hidden="true">
    <div class="am-loading-item"></div>
    <div class="am-loading-item"></div>
    <div class="am-loading-item"></div>
  </div>操作
</button>

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

按钮组:

<!-- 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>
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">
            <div class="am-list-label">普通输入</div>
            <div class="am-list-control">
                <input type="text" placeholder="暗提示" value="">
            </div>
            <div class="am-list-clear"><i class="am-icon-clear am-icon"></i></div>
        </div>
        <div class="am-list-item am-input-autoclear">
            <div class="am-list-label">选择器</div>
            <div class="am-list-control">
                <select>
                    <option>证件类型</option>
                    <option value="1">身份证</option>
                    <option value="2">学生证</option>
                    <option value="3">军官证</option>
                    <option value="4">驾驶证</option>
                </select>
            </div>
            <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
        </div>
        <div class="am-list-item am-input-autoclear">
            <div class="am-list-label">普通输入</div>
            <div class="am-list-control">
                <input type="text" placeholder="暗提示" value="">
            </div>
            <div class="am-list-clear"><i class="am-icon-clear am-icon"></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-input-autoclear">
            <div class="am-list-label">选择器</div>
            <div class="am-list-extra J-certificate">
                证件类型
            </div>
            <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></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-input-autoclear">
            <div class="am-list-label">选择器</div>
            <div class="am-list-extra">
                <select>
                    <option>证件类型</option>
                    <option value="1">身份证</option>
                    <option value="2">学生证</option>
                    <option value="3">军官证</option>
                    <option value="4">驾驶证</option>
                </select>
            </div>
            <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></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
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/icon/form.css
{{ antuiLinkPrex }}/{{ version }}/rem/icon/form.css
import "@alipay/antui/dist/dpl/icon/form.css"
import "@alipay/antui/dist/rem/icon/form.css"

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>
Checkbox 选择框
widget/checkbox

选择框控件包含: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>
    <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 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
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/switch.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/switch.css
import "@alipay/antui/dist/dpl/widget/switch.css"
import "@alipay/antui/dist/rem/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>
Search 搜索
widget/search
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/search.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/search.css
import "@alipay/antui/dist/dpl/widget/search.css"
import "@alipay/antui/dist/rem/widget/search.css"

搜索条样式 class: am-search

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

页面内搜索

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

<div class="am-search am-input-autoclear">
    <div class="am-search-input">
        <i class="am-icon search-inpage"></i>

        <input class="am-search-value" id="search" type="text" placeholder="搜索" value="">

        <div class="am-search-clear"><i class="am-icon-clear am-icon clear-tiny"></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>
Filter 筛选

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

widget/filter
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/filter.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/filter.css
import "@alipay/antui/dist/dpl/widget/filter.css"
import "@alipay/antui/dist/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>
Member Manage 成员管理

成员管理:通用业务组件

widget/member-manage
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/member-manage.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/member-manage.css
import "@alipay/antui/dist/dpl/widget/member-manage.css"
import "@alipay/antui/dist/rem/widget/member-manage.css"
<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://zos.alipayobjects.com/rmsportal/wMkOIiXzNqrSFSWYjDNe.png" 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://zos.alipayobjects.com/rmsportal/wMkOIiXzNqrSFSWYjDNe.png" 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://zos.alipayobjects.com/rmsportal/wMkOIiXzNqrSFSWYjDNe.png" 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://zos.alipayobjects.com/rmsportal/wMkOIiXzNqrSFSWYjDNe.png" 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://zos.alipayobjects.com/rmsportal/wMkOIiXzNqrSFSWYjDNe.png" 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">把通讯录的某个朋友放到该列表,Ta将不能查看你公开的动态</div>
</div>
数据展示
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)
  • am-list-twoline: 双行列表(带图标, 大图尺寸: 100 x 100)
  • am-list-twoline-text:双行纯文字
  • am-list-twoline-side: 左右双行(可带图标,圆图, 尺寸: 72 x 72)
  • am-list-users: 双行用户列表(头像大图尺寸: 100 x 100)
  • am-list-users-sm: 单行用户列表(头像大图尺寸: 72 x 72)
  • am-list-users-lg: 多行用户列表(头像大图尺寸: 120 x 120)
  • am-list-moreline: 多行列表(大图尺寸: 120 x 120)
  • am-list-ptext: 长图文组合的列表(可带图标, 大图尺寸: 120 x 120)
  • am-list-bank: 银行卡列表
  • am-list-info: 纯文字列表(结果页面)

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

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

单行列表

<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>
        <div class="am-list-item">
            <div class="am-list-content">标题文字</div>
            <div class="am-list-extra">说明信息</div>
        </div>
    </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-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 class="am-list-footer">单行列表尾纯文字</div>
</div>

双行列表

<div class="am-list am-list-twoline-text">
    <div class="am-list-header">描述列表项</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>
</div>
<div class="am-list am-list-twoline-text">
    <div class="am-list-header">带描述、跳转列表项</div>
    <div class="am-list-body">
        <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" 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>
    </div>
</div>

文字组合列表

<div class="am-list am-list-ptext">
    <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>
</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>
</div>
<div class="am-list am-list-ptext">
    <div class="am-list-header">带标题的文字组合列表项</div>
    <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>
        <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">
    <div class="am-list-header">带图片小图列表项</div>
    <div class="am-list-body ">
        <div class="am-list-item">
            <div class="am-list-thumb"><img src="https://gw.alipayobjects.com/zos/rmsportal/KXDIRejMrRdKlSEcLseB.png" alt=""></div>
            <div class="am-list-content">标题文字</div>
        </div>
    </div>
</div>

<div class="am-list">
    <div class="am-list-header">带图片小图、跳转的列表项</div>
    <div class="am-list-body ">
        <a href='javascript:void(0)' class="am-list-item am-list-item-indent line-thumb">
            <div class="am-list-thumb"><img src="https://gw.alipayobjects.com/zos/rmsportal/KXDIRejMrRdKlSEcLseB.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 href="javascript:void(0)" class="am-list-item am-list-item-indent line-thumb">
            <div class="am-list-thumb"><img src="https://gw.alipayobjects.com/zos/rmsportal/KXDIRejMrRdKlSEcLseB.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>
    </div>
</div>

<div class="am-list am-list-twoline-text">
    <div class="am-list-header">带描述、跳转列表项</div>
    <div class="am-list-body">
        <a href="javascript:void(0)" class="am-list-item am-list-item-indent line-thumb">
            <div class="am-list-thumb"><img src="https://gw.alipayobjects.com/zos/rmsportal/KXDIRejMrRdKlSEcLseB.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 href="javascript:void(0)" class="am-list-item am-list-item-indent line-thumb">
            <div class="am-list-thumb"><img src="https://gw.alipayobjects.com/zos/rmsportal/KXDIRejMrRdKlSEcLseB.png" alt=""></div>
            <div class="am-list-content">
                <div class="am-list-title">双行列表</div>
                <div class="am-list-brief">表述信息</div>
            </div>
            <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
        </a>
    </div>
</div>

中图文列表

<div class="am-list am-list-twoline">
    <div class="am-list-header">带图片中图,描述,跳转的列表项</div>
    <div class="am-list-body">
        <a href="javascript:void(0)" class="am-list-item am-list-item-indent line-twoline">
            <div class="am-list-thumb"><img src="https://gw.alipayobjects.com/zos/rmsportal/KXDIRejMrRdKlSEcLseB.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 href="javascript:void(0)" class="am-list-item am-list-item-indent line-twoline">
            <div class="am-list-thumb"><img src="https://gw.alipayobjects.com/zos/rmsportal/KXDIRejMrRdKlSEcLseB.png" alt=""></div>
            <div class="am-list-content">
                <div class="am-list-title">双行列表</div>
                <div class="am-list-brief">描述信息</div>
            </div>

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

<div class="am-list am-list-twoline">
    <div class="am-list-header">带图片中图,描述,跳转的列表项</div>
        <div class="am-list-body">
            <div class="am-list-item am-list-item-indent line-twoline">
                <div class="am-list-thumb"><img src="https://gw.alipayobjects.com/zos/rmsportal/KXDIRejMrRdKlSEcLseB.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 class="am-list-item am-list-item-indent line-twoline">
                <div class="am-list-thumb"><img src="https://gw.alipayobjects.com/zos/rmsportal/KXDIRejMrRdKlSEcLseB.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>

大图文列表

<div class="am-list am-list-ptext">
    <div class="am-list-header">带标题的文字组合列表项</div>
    <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://gw.alipayobjects.com/zos/rmsportal/KXDIRejMrRdKlSEcLseB.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://gw.alipayobjects.com/zos/rmsportal/KXDIRejMrRdKlSEcLseB.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://gw.alipayobjects.com/zos/rmsportal/KXDIRejMrRdKlSEcLseB.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>
        <a class="am-list-item am-list-item-more">查看更多</a>
    </div>
</div>

联系人列表

<div class="am-list am-list-users-sm">
    <div class="am-list-header">带头像小图、联系人的列表项</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">带头像中图、摘要的列表项</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">
                    <div class="am-list-title">用户名</div>
                    <div class="am-list-right-brief">12:21</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">带头像大图、摘要的列表项</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 class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
        </div>
    </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 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 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 am-list-item-indent line-twoline">
            <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 am-list-item-indent line-twoline">
            <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>

银行卡列表:

<div class="am-list am-list-bank">
    <div class="am-list-header">银行卡列表</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>
Steppers 步骤条
widget/process
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/process.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/process.css
import "@alipay/antui/dist/dpl/widget/process.css"
import "@alipay/antui/dist/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>
Article 常规文章
widget/article
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/article.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/article.css
import "@alipay/antui/dist/dpl/widget/article.css"
import "@alipay/antui/dist/rem/widget/article.css"

图文样式,class: am-article

<div class="am-article">
    <h2>标题文字可折行但不超过两行不超过两行</h2>
    <time><span class="am-ft-black">毒舌电影</span> 01-13</time>
    <p>
        <img src="https://gw.alipayobjects.com/zos/rmsportal/MNjjYWCroGUsYVFichMq.png" width="100%" />
    </p>
    <p>
        该片明显将战争的正义与非正义之分模糊化了。作为以第二次世界大战冲绳岛之战为背景的电影,如果避而不谈当时的国际形势、战争起因,仅讨论人性、信仰、恶魔等泛化元素,仅以一个大兵的个人信仰和好恶判断战争难免有为了反战而不顾一切地想掩饰什么之嫌。
    </p>
    <p>
        最近30多年来,美军几乎4-5年就要打一场局部战争,为了师出有名,他们打出的旗号往往是推翻独裁统治、解放受苦难人民等,他们不是总把杀戮别国人民、牺牲美军士兵的战争,标榜为正义战争吗?
    </p>
    <h4>1.2节标题</h4>
    <p>
        支付宝方面介绍,“全球未来机场计划”是指未来游客在海外机场,除了可用支付宝消费之外,还可以通过支付宝使用航班提醒、室内导航、一键叫电瓶车等服务。支付宝表示,希望未来可以覆盖30家接待中国出境游客最多的海外机场。
    </p>
    <blockquote>
        本内容由“第一财经”授权,如果有任何疑问请与“第一财经”联系。
    </blockquote>
    <div class="am-article-tags">
        <span class="am-tag-item">电影</span>
        <span class="am-tag-item">战争</span>
        <span class="am-tag-item">二战</span>
    </div>
</div>
Card 卡片
widget/card
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/card.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/card.css
import "@alipay/antui/dist/dpl/widget/card.css"
import "@alipay/antui/dist/rem/widget/card.css"

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

无图标卡片

<div class="am-card">
    <div class="am-card-header">无图标卡片</div>
    <div class="am-card-item am-card-minfo am-card-noicon">
        <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 am-card-noicon">
        <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>

带图标卡片

<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 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>
</div>

带图和描述文字卡片样式

<div class="am-card">
    <div class="am-card-header">带图和描述文字卡片样式</div>
    <div class="am-card-body">
        <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-title">100元代金券</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-footnote">
                <img src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png" />
                描述文字
            </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-title">100元代金券</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-footnote">
                <img src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png" />
                描述文字
            </div>
        </div>
    </div>
</div>
Horizon 横向滚动

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

widget/horizon-swiper
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/horizon-swiper.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/horizon-swiper.css
import "@alipay/antui/dist/dpl/widget/horizon-swiper.css"
import "@alipay/antui/dist/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>

Footer 页脚
widget/footer
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/footer.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/footer.css
import "@alipay/antui/dist/dpl/widget/footer.css"
import "@alipay/antui/dist/rem/widget/footer.css"

版权信息

<footer class="am-footer am-fixed am-fixed-bottom">
    <div class="am-footer-copyright">&copy; 2004-2017 Alipay.com. All rights reserved.</div>
</footer>

底部链接

<footer class="am-footer am-fixed am-fixed-bottom">
    <div class="am-footer-interlink">
        <a class="am-footer-link" href="javascript:;">底部链接</a>
    </div>
</footer>

版权信息 + 底部链接*1

<footer class="am-footer am-fixed am-fixed-bottom">
    <div class="am-footer-interlink">
        <a class="am-footer-link" href="javascript:;">底部链接</a>
    </div>
    <div class="am-footer-copyright">&copy; 2004-2017 Alipay.com. All rights reserved.</div>
</footer>

版权信息 + 底部链接*2

<footer class="am-footer am-fixed am-fixed-bottom">
    <div class="am-footer-interlink am-footer-top">
        <a class="am-footer-link" href="javascript:;">底部链接</a>
        <a class="am-footer-link" href="javascript:;">底部链接</a>
    </div>
    <div class="am-footer-copyright">&copy; 2004-2017 Alipay.com. All rights reserved.</div>
</footer>
Carousel 轮播滑块
widget/carousel
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/carousel.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/carousel.css
import "@alipay/antui/dist/dpl/widget/carousel.css"
import "@alipay/antui/dist/rem/widget/carousel.css"

注意:轮播滑块需配合swiper使用,页面需引入下面两个静态资源。

<link href="https://as.alipayobjects.com/g/component/swiper/3.2.7/swiper.min.css">
<script src="https://as.alipayobjects.com/g/component/swiper/3.2.7/swiper.min.js"></script>

分液器颜色通过am-sp-white控制。

浅色分页器

<style>
.demo-swiper.swiper-container {
    height: 150px;
    overflow: hidden;
    margin: 0 10px;
    padding-top: 10px;
}
.demo-swiper .swiper-slide {
    line-height: 140px;
    text-align: center;
    background: #108EE9;
    color: #ffffff;
}
</style>
<div class="swiper-container am-carousel demo-swiper" id="J-swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">A1</div>
        <div class="swiper-slide">A2</div>
        <div class="swiper-slide">A3</div>
        <div class="swiper-slide">A4</div>
        <div class="swiper-slide">A5</div>
    </div>
    <div class="swiper-pagination"></div>
</div>
<script>
var mySwiper1 = new Swiper ('#J-swiper', {
    pagination: '.swiper-pagination',
    loop: true,
    initialSlide: 2
});
</script>

深色分页器

<style>
.demo-swiper.swiper-container {
    height: 150px;
    overflow: hidden;
    margin: 0 10px;
    padding-top: 10px;
}
.demo-swiper .swiper-slide {
    line-height: 140px;
    text-align: center;
    background: #ffffff;
    color: #108EE9;
}
</style>
<div class="swiper-container am-carousel am-sp-white demo-swiper" id="J-swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">A1</div>
        <div class="swiper-slide">A2</div>
        <div class="swiper-slide">A3</div>
        <div class="swiper-slide">A4</div>
        <div class="swiper-slide">A5</div>
    </div>
    <div class="swiper-pagination"></div>
</div>
<script>
var mySwiper1 = new Swiper ('#J-swiper', {
    pagination: '.swiper-pagination',
    loop: true,
    initialSlide: 2
});
</script>
提示反馈
Notice 公告

关于公告,在支付宝客户端内,一般情况下建议使用投放平台来下发公告,投放平台下发公告为native控件,不影响页面布局,也和支付宝客户端公告交互效果保持统一。

顶部公告 am-notice

widget/notice
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/notice.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/notice.css
import "@alipay/antui/dist/dpl/widget/notice.css"
import "@alipay/antui/dist/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

widget/inform
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/inform.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/inform.css
import "@alipay/antui/dist/dpl/widget/inform.css"
import "@alipay/antui/dist/rem/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>
Loading 加载状态
widget/loading
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/loading.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/loading.css
import "@alipay/antui/dist/dpl/widget/loading.css"
import "@alipay/antui/dist/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">
    <div class="am-loading-indicator" aria-hidden="true">
        <div class="am-loading-item"></div>
        <div class="am-loading-item"></div>
        <div class="am-loading-item"></div>
    </div>
    <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">
    <div class="am-loading-indicator" aria-hidden="true">
        <div class="am-loading-item"></div>
        <div class="am-loading-item"></div>
        <div class="am-loading-item"></div>
    </div>
    <div class="am-loading-text">加载中...</div>
</div>

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

<div style="color:#F4333C;background-color: #fff; text-align: center; height: 300px;">内容显示区域</div>
<div class="am-loading am-loading-nomore">
    <span class="am-loading-text">没有更多了</span>
</div>
Toast 信息提示
widget/toast
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/toast.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/toast.css
import "@alipay/antui/dist/dpl/widget/toast.css"
import "@alipay/antui/dist/rem/widget/toast.css"

纯文字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">
    <div class="am-loading-indicator white">
      <div class="am-loading-item"></div>
      <div class="am-loading-item"></div>
      <div class="am-loading-item"></div>
    </div>
    加载中...
  </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 对话框
widget/dialog
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/dialog.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/dialog.css
import "@alipay/antui/dist/dpl/widget/dialog.css"
import "@alipay/antui/dist/rem/widget/dialog.css"

文本对话框-无标题

<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">
        <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>

文本对话框-有标题-普通弹框A

<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">
        <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>

文本对话框-有标题-普通弹框B

<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">
        <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>

文本对话框-有标题-多行列表弹框(行动点超过2个)

<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">
        <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 selection">
            <a class="am-dialog-button">确定</a>
            <a class="am-dialog-button">更多</a>
            <a class="am-dialog-button">取消</a>
        </div>
    </div>
</div>

文本对话框-有标题-多行列表弹框(行动点超过6个字符)

<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">
        <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 selection">
            <a class="am-dialog-button">去设置开启通知</a>
            <a class="am-dialog-button">取消</a>
        </div>
    </div>
</div>

文本对话框-配图弹窗-图标

<div class="am-dialog-mask show"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true",显示时设置 aria-hidden="false" -->
<div class="am-dialog image show" role="dialog" aria-hidden="false">
    <div class="am-dialog-wrap">
        <div class="am-dialog-img">
            <img src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png" width="75" height="75">
        </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 type="button" class="am-dialog-button" style="display: block;">确定</a>
        </div>
        <a class="am-dialog-close"></a>
    </div>
</div>

文本对话框-配图弹窗-图片

<div class="am-dialog-mask show"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true",显示时设置 aria-hidden="false" -->
<div class="am-dialog image show" role="dialog" aria-hidden="false">
    <div class="am-dialog-wrap">
        <div class="am-dialog-img">
            <img src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png" width="134" height="134">
        </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 type="button" class="am-dialog-button" style="display: block;">确定</a>
        </div>
        <a class="am-dialog-close"></a>
    </div>
</div>

文本对话框-配图弹窗-大图

<div class="am-dialog-mask show"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true",显示时设置 aria-hidden="false" -->
<div class="am-dialog image show" role="dialog" aria-hidden="false">
    <div class="am-dialog-wrap">
        <div class="am-dialog-img fill">
            <img src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png" width="100%" height="150">
        </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 type="button" class="am-dialog-button" style="display: block;">确定</a>
        </div>
        <a class="am-dialog-close white"></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">
        <div class="am-dialog-header">
            <h3>标题单行</h3>
        </div>
        <div class="am-dialog-body">
            <p class="am-dialog-brief">说明当前状态、提示用户解决方案,最好不要超过两行。</p>
            <input class="am-text-former" type="text" maxlength="6" size="6" value="" placeholder="给朋友留言">
        </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>
Pop Menu 浮出菜单
widget/popmenu
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/popmenu.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/popmenu.css
import "@alipay/antui/dist/dpl/widget/popmenu.css"
import "@alipay/antui/dist/rem/widget/popmenu.css"

建议使用容器jsapi: popMenu

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

浮出菜单

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

带icon 红点 浮动菜单

widget/popmenu; widget/bubble
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/bubble.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/bubble.css
import "@alipay/antui/dist/dpl/widget/bubble.css"
import "@alipay/antui/dist/rem/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>
        </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>
Tips 小提示
widget/tips-favorite
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/tips-favorite.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/tips-favorite.css
import "@alipay/antui/dist/dpl/widget/tips-favorite.css"
import "@alipay/antui/dist/rem/widget/tips-favorite.css"

添加到首页

<div class="am-tips-favorite">
    <div class="am-tips-favorite-wrap">
        <div class="am-tips-favorite-close">关闭</div>
        <div class="am-tips-favorite-icon">
            <img src="https://gw.alipayobjects.com/zos/rmsportal/xSwabLLMvBrwcANsqyYX.png">
        </div>
        <div class="am-tips-favorite-content am-ft-ellipsis">
            把 “城市服务” 添加到首页
        </div>
        <div class="am-tips-favorite-action" role="button">
            立即添加
        </div>
    </div>
</div>
其他
Region Select 区域选择

区域选择组件(城市选择,国家选择,地区选择)

widget/region-select
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/region-select.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/region-select.css
import "@alipay/antui/dist/dpl/widget/region-select.css"
import "@alipay/antui/dist/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>
Page Result 结果页面
widget/message; icon/message;
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/message.css
{{ antuiLinkPrex }}/{{ version }}/dpl/icon/message.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/message.css
{{ antuiLinkPrex }}/{{ version }}/rem/icon/message.css
import "@alipay/antui/dist/dpl/widget/message.css"
import "@alipay/antui/dist/dpl/icon/message.css"
import "@alipay/antui/dist/rem/widget/message.css"
import "@alipay/antui/dist/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">
    <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">
    <i class="am-icon result error"></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">
    <i class="am-icon result warn"></i>
    <div class="am-message-main">无法完成操作</div>
    <div class="am-message-sub">由于你的支付宝账户还未绑定淘宝账户请登<br />请登录www.taobao.com</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">
    <i class="am-icon result wait"></i>
    <div class="am-message-main">等待</div>
    <div class="am-message-sub">已提交申请,等待银行处理</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">
    <i class="am-icon result info"></i>
    <div class="am-message-main">提示</div>
    <div class="am-message-sub">辅助信息</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 pay" aria-hidden="true"></i>
  <div class="am-message-main">支付成功</div>
  <div class="am-message-sub">支付成功副提示</div>
</div>
<div class="am-button-wrap">
    <button class="am-button blue">主要操作</button>
    <button class="am-button white">辅助操作</button>
</div>

多行提示:

<div class="am-message multi">
    <i class="am-icon message pay"></i>
    <div class="am-message-main">支付成功</div>
    <div class="am-message-sub">副提示</div>
</div>
<div class="am-message multi">
    <i class="am-icon message success"></i>
    <div class="am-message-main">成功</div>
    <div class="am-message-sub">副提示</div>
</div>
<div class="am-message multi">
    <i class="am-icon message error"></i>
    <div class="am-message-main">失败</div>
    <div class="am-message-sub">副提示</div>
</div>
<div class="am-message multi">
    <i class="am-icon message warn"></i>
    <div class="am-message-main">警告</div>
    <div class="am-message-sub">副提示</div>
</div>
<div class="am-message multi">
    <i class="am-icon message info"></i>
    <div class="am-message-main">提示</div>
    <div class="am-message-sub">副提示</div>
</div>
<div class="am-message multi">
    <i class="am-icon message wait"></i>
    <div class="am-message-main">等待</div>
    <div class="am-message-sub">副提示</div>
</div>
Error Page 异常页面
widget/page-result

class: am-page-result

网络异常

icon/page-network
<div class="am-page-result">
    <div class="am-page-result-wrap">
        <div class="am-page-result-pic am-icon page-network"></div>
        <div class="am-page-result-title">网络无法连接</div>
        <div class="am-page-result-brief">世界上最遥远的距离莫过于此</div>
    </div>
    <div class="am-page-result-button">
        <a class="am-page-result-button">刷新</a>
    </div>
</div>

系统繁忙

icon/page-result-busy
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/icon/page-result-busy.css
{{ antuiLinkPrex }}/{{ version }}/rem/icon/page-result-busy.css
import "@alipay/antui/dist/dpl/icon/page-result-busy.css"
import "@alipay/antui/dist/rem/icon/page-result-busy.css"
<div class="am-page-result">
    <div class="am-page-result-wrap no-button">
        <div class="am-page-result-pic am-icon page-busy"></div>
        <div class="am-page-result-title">系统正忙,稍候再试</div>
        <div class="am-page-result-brief">耽误您的时候,我们深感歉意</div>
    </div>
    <div class="am-page-result-button">
        <a class="am-page-result-button">刷新</a>
    </div>
</div>

业务异常

icon/page-result-error
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/icon/page-result-error.css
{{ antuiLinkPrex }}/{{ version }}/rem/icon/page-result-error.css
import "@alipay/antui/dist/dpl/icon/page-result-error.css"
import "@alipay/antui/dist/rem/icon/page-result-error.css"
<div class="am-page-result">
    <div class="am-page-result-wrap">
        <div class="am-page-result-pic am-icon page-error"></div>
        <div class="am-page-result-title">系统出错,正在排查</div>
        <div class="am-page-result-brief">耽误您的时候,我们深感歉意</div>
    </div>
    <div class="am-page-result-button">
        <a class="am-page-result-button">操作选项一</a>
        <a class="am-page-result-button">操作选项二</a>
    </div>
</div>

返回结果为空

icon/page-result-empty
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/icon/page-result-empty.css
{{ antuiLinkPrex }}/{{ version }}/rem/icon/page-result-empty.css
import "@alipay/antui/dist/dpl/icon/page-result-empty.css"
import "@alipay/antui/dist/rem/icon/page-result-empty.css"
<div class="am-page-result">
    <div class="am-page-result-wrap">
        <div class="am-page-result-pic am-icon page-empty"></div>
        <div class="am-page-result-title">空白页</div>
    </div>
    <div class="am-page-result-button">
        <a class="am-page-result-button">刷新</a>
    </div>
</div>

局部内容为空

<div class="am-page-result empty-local-page">
    <div class="am-page-result-wrap">
        <div class="am-page-result-pic am-icon local-empty"></div>
        <div class="am-page-result-brief">暂无信息内容为空</div>
    </div>
 </div>
Agreement 协议页面
widget/agreement
引用方式:
CDN px
CDN rem
CSS px
CSS rem
{{ antuiLinkPrex }}/{{ version }}/dpl/widget/agreement.css
{{ antuiLinkPrex }}/{{ version }}/rem/widget/agreement.css
import "@alipay/antui/dist/dpl/widget/agreement.css"
import "@alipay/antui/dist/rem/widget/agreement.css"
<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>
Notes 其他
Change Log 更新日志

10.1.10 2017.12.15

此次升级修改点略多,我们也竭尽所能保证不出错,如果此次升级对业务产品造成困扰,请联系我们,我们一起探讨如何改进优化。

另外,以下标注Breaking Change的内容,对于原版有较大改动,一般情况下需要修改HTML dom结构来适应升级,如果你的页面有相关引用升级时请注意。

  • Button 按钮
    • 修改了按钮上的loading动画,按照新的loading规范(老版依然可以使用,但是仍建议升级至新版);Breaking Change
    • 调整了红色的警告按钮,变得和普通按钮更相似;Breaking Change
    • 调整了小按钮的内间距等细节;
    • 调整了所有按钮的圆角,由4px改为2px
    • 调整了所有按钮的按下状态的颜色以及按下状态的文字颜色;
  • Tabs 选项卡
    • 修改了选项卡的dom结构,以适应新的视觉规范,也更好的兼容后续升级。 Breaking Change
    • 调整了选中时下边蓝色线条的宽度,现在和文字一样长;
    • 调整了字体大小,以及未选中状态的字体颜色;
    • 调整了多个选项卡两侧的蒙层,渐变蒙层加宽了;
  • List 列表
    • 调整了左右padding为16px;
    • 调整了列表内所有图片的圆角,由4px改为2px
    • 调整了标题颜色,从#000改为#333
    • 调整了标题和描述之间的距离;
    • 调整了单个列表的最小高度,从44px调整为47px
    • 调整了列表缩略图的默认宽高,从最新demo可以看到效果;
    • 调整了带thumb块的下划线样式,添加am-list-item-indent line-thumb/line-twoline缩进 Breaking Change
  • Form 表单(部分修改和list一致)
    • 调整了switch开关的默认颜色,#4DD865->#108EE8,从绿色变成蓝色,同时适配iOS和Android;
    • 调整了选择器的两种使用场景,配合表单以及单独使用,你可以查看demo来确定如何使用;
    • 调整了textarea内边距,字号以及字体颜色;
  • Big number 大数字金额输入 新增组件
    • 新增了大数字金额输入样式;
  • Message 信息状态
    • 调整了绝大多数icon;
    • 调整了间距以及字体大小;
    • 调整了demo底部,按照规范新增了行动按钮。
  • Result 结果页
    • 新增了空页面的样式;
    • 调整了大部分页面的配图,现在变成了小蚂蚁的形象(常见四种配图);
    • 调整了结果页配图变大,间距重新做了调整;
    • 调整了结果页的一些字体大小颜色等等;
    • 调整了行动按钮在页面的位置,增加了div.am-page-result-button,由于action按钮沉底,我们不得不修改了页面布局(注:原来的布局不受影响);Breaking Change
  • Process 支付进度
    • 调整了成功状态icon图片;
  • Search 搜索
    • 调整了不再区分Android和iOS样式。
    • 调整了Searchbar的背景色;
    • 调整了Searchbar的内容对齐,由居中改为左侧对齐;
  • Article 图文
    • 调整了图文各个元素的间距,字体大小,颜色等;
    • 新增了引用(quote)和标签(tags)的样式;;
  • Card 卡片
    • 调整了各个元素的间距以及最小高度;
    • 调整了各种文本的字体大小和颜色;
    • 调整了缩略图的大小50*50->46*46,以及圆角从100%变更为2px;
    • 调整了页面demo,提供三种形式,根据使用场景选择。
  • Loading 加载状态
    • 新增了页面局部加载样式(还没有动画);
    • 调整了loading的动画,由图片旋转变为div色块;Breaking Change
    • 调整了字体颜色间距等;
  • Toast 信息提示
    • 调整了toast的宽高,圆角;
    • 调整了toast的一些图标,loading动画重做;Breaking Change
    • 调整了am-toast-text布局,从inline-block到inline-flex,多行垂直居中;
  • Dialog 对话框
    • 新增了大配图dialog;
    • 调整了dialog的字体颜色,圆角,间距,背景遮罩颜色等;
  • Pop Menu 浮出菜单
    • 调整了圆角,text最小宽度,img大小;
    • 调整了按下状态的颜色;
    • 调整了bubble摆放的DOM位置 Breaking Change
  • Filter 筛选
    • 调整了item选中样式
    • 调整了全屏按钮高度
  • Footer 页脚 新增组件
    • 新增了沉底链接模块
    • 新增了版权信息模块
  • Carousel 轮播滑块 新增组件
    • 新增了轮播滑块组件;
  • Tips 小提示 新增组件
    • 新增了应用添加到首页模块;
  • Fonts 字体 新增组件
    • 新增了金额数字专用字体,可以通过增加classam-ft-price来使用它;

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版本做参考.

从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