介绍
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 | Tips 小提示 | ||
| widget/grid | Grid 宫格 |
如果你要查看历史文档,请点击这里:AntUI 更新日志
手机扫码查看 demo:
px&rem 版本区别
px版
对于AntUI这类工具控件，需要保持与客户端native的尺寸一致性。在如下场景下，rem无法保持一致：
- 在iPhone 6Plus 3x屏上，存在"设置"-"通用"-"视图"，有2种模式，分别是"标准"和"放大"
- 在
标准模式下，前端获取到的clientWidth = 414 - 在
放大模式下，前端获取到的clientWidth = 375
- 在
- 在
标准与放大模式下，native显示的物理尺寸不一致，但是rem版本因为等比放缩，两个模式下一致。- 因此导致了一个问题，如果前后2个页面从
native跳转到H5 rem，会有页面放缩的明显变化
- 因此导致了一个问题，如果前后2个页面从
基于上述问题，对于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的使用效果。
rem 版本对应 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>
使用方式
方式一：使用 tnpm 进行安装 (仅适用于内部使用)
tnpm install @alipay/antui@{{ version }} --save
注意：由于历史原因，
@alipay/antui的版本号跟随支付宝版本号，不遵循 Semantic Versioning 2.0.0 规范，引用 npm 包时，务必写死版本号，避免新版本发布产生兼容性问题。
{
"dependencies": {
"@alipay/antui": "{{ version }}"
}
}
安装后，在页面中引入 AntUI 样式：
import "@alipay/antui/dist/dpl/antui.css";
// 或
import "@alipay/antui/dist/dpl/antui.css";
单独使用某个控件，以 list 为例：
import "@alipay/antui/dist/dpl/list.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>