SUI Mobile

1 介绍

1.1 概念

SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美，只需要引入CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，适合开发跨平台Web App。

SUI Mobile 是阿里巴巴一个UED团队的作品，目的是为了手机H5页面提供一个常用的组件库，减少重复工作。

1.2 特点

• 轻量级

  SUI Mobile 非常轻量，核心库压缩zip后的体积总共只有52K

• iOS风格

  组件是按照iOS风格设计的

• 组件库丰富

  提供了20+个常用的组件

2 使用步骤

2.1 引用资源

• CDN 地址（建议）

<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>

• 压缩版与未压缩版

  如 sm.min.css 是压缩后的版本，体积会比较小。
  而 sm.css 是未压缩版本，在开发时方便调试代码。

• 拓展包

  部分组件属于拓展组件，需要引用拓展地址才可以使用。

<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>

2.2 组件库

SUI Mobile 官网：http://m.sui.taobao.org/components/
（具体使用可见 Demo）