---
layout: home
title: SUI Mobile
---

<div class="docs-header">
  {% include masthead.html %}
  <div class="docs-header-content">
    <p class="docs-subtitle">轻量，小巧且精美的UI库<br />方便迅速搭建手机H5应用</p>
    <a data-ignore="push" href="https://github.com/sdc-alibaba/SUI-Mobile" class="btn btn-primary" onClick="">访问Github</a>
    <p class="version">V{{ site.version }}</p>
  </div>
</div>

<div class="index-content docs-content">
  <h2>SUI Mobile</h2>
  <p>SUI Mobile 是一套基于 <a href='http://framework7.taobao.org/' target="_blank">Framework7</a> 开发的UI库。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。</p>

  <h3>轻量的UI库</h3>
  <p>SUI Mobile 是非常轻量的，核心库压缩后的JS和CSS文件都只有110+K，却提供了20+个常用的组件。</p>
  <p>对于只有HTML&CSS的组件，你只需要复制HTML代码既可以使用。他的大部分JS组件都是独立的 Zepto 插件，并且提供了 Zepto/jQuery 风格的API，你将会非常熟悉这种方式。</p>

  <div class="section clearfix">
    <div class="round">
      <img src="http://gtms01.alicdn.com/tps/i1/TB1IFKdIFXXXXcmaXXXLIffVVXX-640-1136.png" alt="">
    </div>
    <h3>炫酷的iOS风格</h3>
    <p>我们的组件都是按照iOS风格设计的，所有有很多组件都是iOS独有的炫酷设计。</p>
  </div>

  <div class="section clearfix">
    <h3>功能强大的组件</h3>
    <p>我们实现了下拉刷新、日历、省市区选择器等功能非常强大的组件，并且他们在安卓上也是同样好的体验。</p>
    <p>如果你还在为如何实现下拉刷新纠结，还在调试安卓日历输入框的bug，还在自己写收货地址选择，不如赶紧用SUI吧。</p>
    <div class="components-img">
      <img width='320' src="/img/docs-ptr-demo.gif" alt="">
      <img width='320' src="http://gtms02.alicdn.com/tps/i2/TB119uAIFXXXXcoaXXXehlzYXXX-388-690.gif" alt="">
      <img width='320' src="http://gtms03.alicdn.com/tps/i3/TB18A.DIFXXXXbmapXXehlzYXXX-388-690.gif" alt="">
    </div>
  </div>

  <div class="section clearfix">
    <h3>换肤</h3>
    <p>我们提供了四种主题色，以及夜间模式，<a href="/components/#themes" target="_blank">点击查看换肤文档</a>。</p>
  </div>
</div>
{% include footer.html %}
