介绍
AntUI 是蚂蚁金服无线H5样式库，是对外开放的一套支付宝APP视觉交互规范。旨在帮助用户快速完成H5页面开发，并提供给用户在支付宝APP内一致的体验；
目前AntUI只提供静态的规范样式，业务场景中的复杂效果以及配合js完成的交互效果需要业务自己控制；
目前AntUI组件只覆盖支付宝App中常用的业务场景，并随钱包版本更新而更新，样式库更新发布后需要各业务手动更新样式库版本；
AntUI提供的交互组件, 你可以根据自己的业务情况进行二次开发.
当前版本包含以下控件：
| 是否默认集成 | 模块名称 | 说明 |
|---|---|---|
| ✔ | Flexbox | 弹性布局 |
| ✔ | Writing | 文字书写 |
| ✔ | Whitespace | 上下留白 |
| ✔ | Wingblank | 两翼留白 |
| ✔ | button | 按钮 |
| ✔ | list | 列表 |
| ✔ | form | 表单 |
| ✔ | tab | 选项卡 |
| ✘ | message | 提示 |
| ✘ | popmenu | 浮动菜单 |
| ✘ | notice | 公告 |
| ✘ | process | 支付进度 |
| ✘ | card | 卡片 |
| ✘ | article | 常规文章 |
| ✘ | search | 搜索 |
| ✘ | dialog | 对话框 |
| ✘ | page-result | 通用异常结果页 |
如果你要查看历史文档,请点击这里:AntUI更新日志
注意: 9.9版本较之前版本AntUI(9.6-)有较大改动,版本升级需要手动修改部分代码,具体修改方式请参见: AntUI9.9 升级手册
手机扫码查看demo:
pc上查看 demo
https://render.alipay.com/p/f/antui/demo.html
include 引入方式
方式一：使用tnpm进行安装 [tnpm安装仅适用于阿里内部员工]
tnpm install @alipay/antui --save
安装后，只需要在页面中引入import "@alipay/antui/dist/rem/antui.css" 或 import "@alipay/antui/dist/dpl/antui.css":
[单独使用某个控件(list控件)，引入import "@alipay/antui/dist/rem/widget/search.css" 或 import "@alipay/antui/dist/dpl/antui.css"]
import "@alipay/antui/dist/rem/antui.css";
import "@alipay/antui/dist/rem/widget/search.css";
方式二：CDN方式引入
在页面上引入支付宝CDN地址即可.
rem版本 推荐
<!-- 主文件 -->
<link rel="stylesheet" href="https://a.alipayobjects.com/g/antui/antui/{{ version }}/rem/antui.css"/>
<!-- 组件 -->
<link rel="stylesheet" href="https://a.alipayobjects.com/g/antui/antui/{{ version }}/rem/??widget/message.css,widget/notice.css,widget/page-result.css"/>
<!-- js -->
<script src="https://a.alipayobjects.com/g/antui/antui/{{ version }}/antui.js"></script>
普通px版本
<!-- 主文件 -->
<link rel="stylesheet" href="https://a.alipayobjects.com/g/antui/antui/{{ pxVersion }}/dpl/antui.css"/>
<!-- 组件 -->
<link rel="stylesheet" href="https://a.alipayobjects.com/g/antui/antui/{{ pxVersion }}/dpl/??widget/message.css,widget/notice.css,widget/page-result.css"/>
<!-- js -->
<script src="https://a.alipayobjects.com/g/antui/antui/{{ version }}/antui.js"></script>
全组件打包版本
组件全部打包之后,单个CSS文件较大,对于H5页面来说并不适合,所以我们不推荐直接引用全部资源的样式版本.
<!-- rem版 -->
<link rel="stylesheet" href="https://a.alipayobjects.com/g/antui/antui/{{ version }}/rem/antui-all.css"/>
<!-- 普通版 -->
<link rel="stylesheet" href="https://a.alipayobjects.com/g/antui/antui/{{ pxVersion }}/dpl/antui-all.css"/>
html-template 推荐HTML
<!DOCTYPE html>
<!-- A11Y：注意设置页面的 lang 属性 -->
<html lang="zh">
<head>
<meta charset="utf-8" />
<!-- A11Y：打开页面时，屏幕阅读器会首先阅读 title 的内容，确保 title 准确描述页面 -->
<title>Examples</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<!-- A11Y：如果有无障碍方面的需求，建议使用下面的 viewport 设置，不要禁止页面缩放 -->
<!--<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />-->
<link rel="stylesheet" href="path/to/antui/dist/antui.min.css" />
<script src="path/to/antui/dist/antui.min.js"></script>
</head>
<body ontouchstart="">
<!--你的html页面代码-->
</body>
</html>
rem版本说明
antui已对ios，android进行适配，会自动根据ios，android分辨率设置不同rem基准值。
为750为基准尺寸，且已设置 html｛fontSize： 100px；｝
不足750的ios机型（如iphone4，4s，5，5s 目前按设计规范要求都是使用的750尺寸，如需要不同适配，需要再重写基准设置）；
其他机型（包含android） 已经按 document.documentElement['clientWidth']*100/375 进行了自动换算和设置不同基准值
注意：antui 未修改meta的倍数，采用meta默认设置（width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no），
如果页面中设置meta＝0.5（1倍以下）会影响antui的使用效果。
答疑&&交流
钉钉群
旺旺群: 1358109297
