uicompontent

按钮

普通按钮

添加类名 .disabled 增加不可点状态。

<div class="demo">
    <button class="ui-btn">普通按钮</button>
    <button class="ui-btn ui-btn-primary">主要按钮</button>
    <button class="ui-btn ui-btn-danger">警示按钮</button>
    <button class="ui-btn disabled">不可点击</button>
</div>

块状按钮

<div class="demo">
    <button class="ui-btn-lg">普通按钮</button>
    <button class="ui-btn-lg ui-btn-primary">主要按钮</button>
    <button class="ui-btn-lg ui-btn-danger">警示按钮</button>
    <button class="ui-btn-lg disabled">不可点击</button>
</div>

大按钮

<div class="demo">
    <button class="ui-btn-lg-nowhole">普通按钮</button>
    <button class="ui-btn-lg-nowhole ui-btn-primary">主要按钮</button>
    <button class="ui-btn-lg-nowhole ui-btn-danger">警示按钮</button>
    <button class="ui-btn-lg-nowhole ui-btn-danger disabled">不可点击</button>
</div>

菜单

同时会将我从对方的列表中删除

<div class="ui-actionsheet show">
    <div class="ui-actionsheet-cnt am-actionsheet-down">
        <h4>同时会将我从对方的列表中删除</h4>
        <button>分享</button>
        <button class="ui-actionsheet-del">删除</button>
        <div class="ui-actionsheet-split-line"></div>
        <button id="cancel">取消</button>
    </div>
</div>

提示

普通提示

无法连接服务器,请检查你的网络设置。
<div class="ui-tooltips">
    <div class="ui-tooltips-cnt ui-tooltips-cnt-link ui-border-b">
        无法连接服务器,请检查你的网络设置。
    </div>
</div>
<div class="ui-tooltips">
    <div class="ui-tooltips-cnt ui-border-b">
        无法连接服务器,请检查你的网络设置。<a class="ui-icon-close"></a>
    </div>
</div>

警示提示

无法连接服务器,请检查你的网络设置。
<div class="ui-tooltips ui-tooltips-warn">
    <div class="ui-tooltips-cnt ui-tooltips-cnt-link ui-border-b">
        <i></i>无法连接服务器,请检查你的网络设置。
    </div>
</div>
<div class="ui-tooltips ui-tooltips-warn">
    <div class="ui-tooltips-cnt ui-border-b">
        <i></i>无法连接服务器,请检查你的网络设置。<a class="ui-icon-close"></a>
    </div>
</div>

引导提示

新手引导、新功能推荐、广告推广等。新手引导、新功能推荐、广告推广等。
新手引导、新功能推荐、广告推广等。新手引导、新功能推荐、广告推广等。
<div class="ui-tooltips ui-tooltips-guide">
    <div class="ui-tooltips-cnt ui-tooltips-cnt-link ui-border-b">
        <i class="ui-icon-talk"></i>进行时状态相关进行时状态相关进行时状态相关进行时状态相关
    </div>
</div>
<div class="ui-tooltips ui-tooltips-guide">
    <div class="ui-tooltips-cnt ui-border-b">
        <i></i>新手引导、新功能推荐、广告推广等。新手引导、新功能推荐、广告推广等。<a class="ui-icon-close"></a>
    </div>
</div>
<div class="ui-tooltips ui-tooltips-guide ui-tooltips-function">
    <div class="ui-tooltips-cnt ui-border-b">
        <i></i>新手引导、新功能推荐、广告推广等。新手引导、新功能推荐、广告推广等。<button class="ui-btn-s">开通</button>
    </div>
</div>

底部提示

底部引导条
<div class="ui-tooltips ui-tooltips-guide ui-tooltips-action">
    <div class="ui-tooltips-cnt ui-border-b">
        <i></i>底部引导条<button class="ui-btn-s">开通</button><a class="ui-icon-close"></a>
    </div>
</div>

弹窗

文字提示(带标题)

下线通知

你的账号于17:00在一台Android手机登录。如非本人操作,密码可能已泄露,建议立即冻结账号。

<div class="ui-dialog show">
    <div class="ui-dialog-cnt">
        <div class="ui-dialog-bd">
            <h3>下线通知</h3>
            <p>你的账号于17:00在一台Android手机登录。如非本人操作,密码可能已泄露,建议立即冻结账号。</p>
        </div>
        <div class="ui-dialog-ft">
            <button type="button" data-role="button">退出</button>
            <button type="button" data-role="button" class="btn-recommand">重新登录</button>
        </div>
    </div>
</div>

文字提示(不带标题)

将终止文件发送,确定返回?

<div class="ui-dialog show">
    <div class="ui-dialog-cnt">
        <div class="ui-dialog-bd">
            <p>将终止文件发送,确定返回?</p>
        </div>
        <div class="ui-dialog-ft">
            <button type="button" data-role="button">取消</button>
            <button type="button" data-role="button">确定</button>
        </div>
    </div>
</div>

结构化消息提示

发送到 seame芝麻

这是标题,加ui-nowrap可以超出长度截断

这是内容,加ui-nowrap可以超出长度截断

应用 开眼
<div class="ui-dialog ui-dialog-function show">
    <div class="ui-dialog-cnt">
        <div class="ui-dialog-bd">
            <h3>发送到 seame芝麻</h3>
            <div class="ui-dialog-item">
                <div class="ui-img">
                    <span style="background-image:url(http://placeholder.qiniudn.com/140x140)"></span>
                </div>
                <div class="ui-dialog-info">
                    <h5 class="ui-nowrap">这是标题,加ui-nowrap可以超出长度截断</h5>
                    <p class="ui-nowrap">这是内容,加ui-nowrap可以超出长度截断</p>
                    <span class="ui-nowrap">应用 开眼</span>
                </div>
            </div>
        </div>
        <div class="ui-dialog-ft">
            <button type="button" data-role="button">取消</button>
            <button type="button" data-role="button">确定</button>
        </div>
    </div>
</div>

运营提示(运营图展示类)(单按钮)

使用QQ钱包优惠购

参加天猫运动会,使用QQ钱包购买智能穿戴!分期0首付0手续费,放肆去浪!

<div class="ui-dialog ui-dialog-operate show">
  <div class="ui-dialog-cnt">
  	<div class="ui-dialog-hd">
  		<div class="ui-img">
  			<span style="background-image:url(http://placeholder.qiniudn.com/640x300)"></span>
  		</div>
  	</div>
  	<div class="ui-dialog-bd">
  		<h3>使用QQ钱包优惠购</h3>
  		<p>参加天猫运动会,使用QQ钱包购买智能穿戴!分期0首付0手续费,放肆去浪!</p>
  	</div>
  	<div class="ui-dialog-ft">
            <button class="ui-btn-lg">立即查看</button>
        </div>
        <i class="ui-dialog-close" data-role="button"></i>
  </div>
</div>

运营提示(运营图展示类)(双按钮)

按钮颜色根据运营氛围需要自行重置!

<div class="ui-dialog ui-dialog-operate show">
  <div class="ui-dialog-cnt">
  	<div class="ui-dialog-hd">
  		<div class="ui-img">
  			<span style="background-image:url(http://placeholder.qiniudn.com/640x300)"></span>
  		</div>
  	</div>
  	<div class="ui-dialog-bd">
  		<p>按钮颜色根据运营氛围需要自行重置!</p>
  	</div>
  	<div class="ui-dialog-ft">
            <button type="button" data-role="button" class="ui-btn">查看详情</button>
            <button type="button" data-role="button" class="ui-btn">下个任务</button>
        </div>
        <i class="ui-dialog-close" data-role="button"></i>
  </div>
</div>

运营提示(图标展示类)

恭喜你获得10个专属福袋!

<div class="ui-dialog ui-dialog-operate ui-dialog-operate-icon show">
  <div class="ui-dialog-cnt">
  	<div class="ui-dialog-hd">
  		<div class="ui-img">
  			<span style="background-image:url(http://placeholder.qiniudn.com/420x220)"></span>
  		</div>
  	</div>
  	<div class="ui-dialog-bd">
  		<h3>恭喜你获得10个专属福袋!</h3>
  	</div>
  	<div class="ui-dialog-ft">
            <button class="ui-btn-lg">发福袋</button>
        </div>
        <i class="ui-dialog-close" data-role="button"></i>
  </div>
</div>

信息流

单图展示

<div class="ui-feeds">
        <ul>
            <li>
                <img src="http://119.29.8.64/vipstyle/mobile/client/cartoon/v2/pic/community/item1.jpg" alt="">
            </li>
        </ul>
    </div>

两图展示

<div class="ui-feeds">
    <ul>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
    </ul>
</div>

三图展示

<div class="ui-feeds">
    <ul>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
    </ul>
</div>

四图展示

<div class="ui-feeds">
    <ul>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
    </ul>
</div>

五图展示

<div class="ui-feeds">
    <ul>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
    </ul>
</div>

六图展示

<div class="ui-feeds">
    <ul>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
    </ul>
</div>

七图展示

<div class="ui-feeds">
    <ul>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
    </ul>
</div>

八图展示

<div class="ui-feeds">
    <ul>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
    </ul>
</div>

九图展示

<div class="ui-feeds">
    <ul>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
      <li>
        <span style="background-image:url(http://placeholder.qiniudn.com/374x374)"></span>
      </li>
    </ul>
</div>

网格

float网格适合多行

  • 50
  • 50
  • 25
  • 75
  • 33
  • 67
  • 20
  • 80
  • 10
  • 90
<ul class="ui-row">
    <li class="ui-col ui-col-50">50</li>
    <li class="ui-col ui-col-50">50</li>
    <li class="ui-col ui-col-25">25</li>
    <li class="ui-col ui-col-75">75</li>
    <li class="ui-col ui-col-33">33</li>
    <li class="ui-col ui-col-67">67</li>
    <li class="ui-col ui-col-20">20</li>
    <li class="ui-col ui-col-80">80</li>
    <li class="ui-col ui-col-10">10</li>
    <li class="ui-col ui-col-90">90</li>
</ul>

flex网格

平均分
平均分
平均分
平均分
2/3
1/3
3/4
1/4
4/5
1/5
3/5
2/5
<div class="ui-row-flex ui-whitespace">
    <div class="ui-col ui-col">平均分</div>
    <div class="ui-col ui-col">平均分</div>
    <div class="ui-col ui-col">平均分</div>
    <div class="ui-col ui-col">平均分</div>
</div>
<div class="ui-row-flex ui-whitespace">
    <div class="ui-col ui-col-2">2/3</div>
    <div class="ui-col">1/3</div>
</div>
<div class="ui-row-flex ui-whitespace">
    <div class="ui-col ui-col-3">3/4</div>
    <div class="ui-col">1/4</div>
</div>
<div class="ui-row-flex ui-whitespace">
    <div class="ui-col ui-col-4">4/5</div>
    <div class="ui-col">1/5</div>
</div>
<div class="ui-row-flex ui-whitespace">
    <div class="ui-col ui-col-3">3/5</div>
    <div class="ui-col ui-col-2">2/5</div>
</div>

竖排flex

1/2
1/2
<div class="ui-row-flex ui-whitespace ui-row-flex-ver">
    <div class="ui-col">1/2</div>
    <div class="ui-col">1/2</div>
</div>

三列(无交界线)

  • 高尔夫2.3M

    辅助信息

  • 高尔夫2.3M

    辅助信息

  • 高尔夫2.3M

    辅助信息

  • 高尔夫2.3M

    辅助信息

<div class="ui-grid ui-grid-trisect">
    <ul class="ui-border-b">
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
    </ul>
</div>

三列

  • 高尔夫2.3M

    辅助信息

  • 高尔夫2.3M

    辅助信息

  • 高尔夫2.3M

    辅助信息

  • 高尔夫2.3M

    辅助信息

<div class="ui-grid ui-grid-trisect">
    <ul class="ui-border-b">
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
              <h4>高尔夫<span>2.3M</span></h4>
              <p>辅助信息</p>
            </div>
        </li>
    </ul>
</div>

两列

<div class="ui-grid ui-grid-bisect">
    <ul>
        <li>
            <div class="ui-img-horizontal">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
            </div>
        </li>
        <li>
            <div class="ui-img-horizontal">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
            </div>
        </li>
        <li>
            <div class="ui-img-horizontal">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
            </div>
        </li>
        <li>
            <div class="ui-img-horizontal">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
            </div>
        </li>
    </ul>
</div>

两列文字

  • 主要信息

    辅助信息

  • 主要信息

    辅助信息

  • 主要信息

    辅助信息

  • 主要信息

    辅助信息

<div class="ui-grid ui-grid-bisect">
    <ul>
        <li>
            <div class="ui-img-horizontal">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
              <h4>主要信息</h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img-horizontal">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
              <h4>主要信息</h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x290)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
              <h4>主要信息</h4>
              <p>辅助信息</p>
            </div>
        </li>
        <li>
            <div class="ui-img">
                <span style="background-image:url(http://placeholder.qiniudn.com/290x290)"></span>
            </div>
            <div class="ui-grid-info">
              <h4>主要信息</h4>
              <p>辅助信息</p>
            </div>
        </li>
    </ul>
</div>

图文左右排列

  • 标题

  • 标题

<div class="ui-grid-icon ui-grid-icon-horizontal">
    <ul>
      <li>
        <div class="ui-img-icon">
          <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
        </div>
          <h4>标题</h4>
      </li>
      <li>
        <div class="ui-img-icon">
          <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
        </div>
       <h4>标题</h4>
      </li>
    </ul>
</div>

图文上下排列

  • 标题

    副标题

  • 标题

    副标题

  • 标题

    副标题

<div class="ui-grid-icon ">
    <ul>
        <li>
          <div class="ui-img-icon">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
          </div>
          <h5>标题</h5>
          <p>副标题</p>
        </li>
        <li>
          <div class="ui-img-icon">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
          </div>
          <h5>标题</h5>
          <p>副标题</p>
        </li>
        <li>
          <div class="ui-img-icon">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
          </div>
          <h5>标题</h5>
          <p>副标题</p>
        </li>
    </ul>
</div>

列表

单行列表(纯文字)

<ul class="ui-list ui-list-single ui-list-link ui-border-tb">
    <li class="ui-border-t">
        <div class="ui-list-info">
            <h4 class="ui-nowrap">性别</h4>
            <div class="ui-txt-info"></div>
        </div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-info">
            <h4 class="ui-nowrap">生日</h4>
            <div class="ui-reddot ui-reddot-static"></div>
        </div>
    </li>
</ul>

单行头像

<ul class="ui-list ui-list-link ui-list-single ui-border-tb">
    <li>
        <div class="ui-avatar-s">
            <span style="background-image:url(http://placeholder.qiniudn.com/68x68)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-avatar-s单行头像</h4>
        </div>
    </li>
    <li>
        <div class="ui-avatar-s">
            <span style="background-image:url(http://placeholder.qiniudn.com/68x68)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-avatar-s单行头像</h4>
        </div>
    </li>
    <li>
        <div class="ui-avatar-s">
            <span style="background-image:url(http://placeholder.qiniudn.com/68x68)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-avatar-s单行头像</h4>
        </div>
    </li>
</ul>

单行小缩略图

<ul class="ui-list ui-list-single ui-list-link ui-border-tb">
    <li>
        <div class="ui-list-thumb-s ui-border-t">
            <span style="background-image:url(http://placeholder.qiniudn.com/68x68)"></span>
        </div>
        <div class="ui-list-info">
            <h4 class="ui-nowrap">性别</h4>
            <div class="ui-txt-info"></div>
        </div>
    </li>
    <li>
        <div class="ui-list-thumb-s">
            <span style="background-image:url(http://placeholder.qiniudn.com/68x68)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">生日</h4>
            <div class="ui-reddot ui-reddot-static"></div>
        </div>
    </li>
</ul>

单行缩略图

<ul class="ui-list ui-list-link ui-border-tb">
    <li>
        <div class="ui-list-thumb">
            <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-list-thumb缩略图</h4>
        </div>
    </li>
    <li>
        <div class="ui-list-thumb">
            <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-list-thumb缩略图</h4>
        </div>
    </li>
    <li>
        <div class="ui-list-thumb">
            <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-list-thumb缩略图</h4>
        </div>
    </li>
</ul>

双行文字头像+按钮

  • ui-avatar

    双行头像

    PK
  • ui-avatar

    双行头像

    PK
  • ui-avatar

    双行头像

    PK
<ul class="ui-list ui-list-function ui-border-tb">
    <li>
        <div class="ui-avatar">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-avatar</h4>
            <p>双行头像</p>
        </div>
        <div class="ui-btn">PK</div>
    </li>
    <li>
        <div class="ui-avatar">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-avatar</h4>
            <p>双行头像</p>
        </div>
        <div class="ui-btn-s">PK</div>
    </li>
    <li>
        <div class="ui-avatar">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">ui-avatar</h4>
            <p>双行头像</p>
        </div>
        <div class="ui-btn">PK</div>
    </li>
</ul>

图片在右列表

  • ui-list-icon

    两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两

  • ui-list-icon

    两行

<ul class="ui-list ui-list-nospace ui-border-tb">
    <li class="ui-border-t ui-arrowlink">
        <div class="ui-list-info">
            <h4 class="ui-nowrap">ui-list-icon</h4>
            <p class="ui-nowrap">两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行</p>
        </div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-info">
            <h4 class="ui-nowrap">ui-list-icon</h4>
            <p class="ui-nowrap">两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两</p>
        </div>
        <div class="ui-list-img-square">
            <span style="background-image:url(http://placeholder.qiniudn.com/188x188)"></span>
        </div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-info">
            <h4 class="ui-nowrap">ui-list-icon</h4>
            <p>两行</p>
        </div>
        <div class="ui-list-img-square">
            <span style="background-image:url(http://placeholder.qiniudn.com/188x188)"></span>
        </div>
    </li>
</ul>

图文列表正方形固定大小

  • 这是标题,加ui-nowrap可以超出长度截断

    这是内容,加ui-nowrap可以超出长度截断

  • 这是标题,加ui-nowrap可以超出长度截断

    这是内容,加ui-nowrap可以超出长度截断

<ul class="ui-list ui-border-tb ">
    <li>
        <div class="ui-list-img-square">
            <span style="background-image:url(http://placeholder.qiniudn.com/188x188)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">这是标题,加ui-nowrap可以超出长度截断</h4>
            <p class="ui-nowrap">这是内容,加ui-nowrap可以超出长度截断</p>
        </div>
    </li>
    <li>
        <div class="ui-list-img-square">
            <span style="background-image:url(http://placeholder.qiniudn.com/188x188)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">这是标题,加ui-nowrap可以超出长度截断</h4>
            <p class="ui-nowrap">这是内容,加ui-nowrap可以超出长度截断</p>
        </div>
    </li>
</ul>

图文列表(垂直)

  • 这是标题,加ui-nowrap可以超出长度截断

    这是内容,加ui-nowrap可以超出长度截断

  • 标题标题标题标题标题标题标题标题标题标题标题

<ul class="ui-list ui-border-tb">
    <li>
        <div class=" ui-list-img-vertical">
            <span style="background-image:url(http://placeholder.qiniudn.com/216x308)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">这是标题,加ui-nowrap可以超出长度截断</h4>
            <p class="ui-nowrap">这是内容,加ui-nowrap可以超出长度截断</p>
        </div>
    </li>
    <li>
        <div class="ui-list-img-vertical">
            <span style="background-image:url(http://placeholder.qiniudn.com/216x308)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4>标题标题标题标题标题标题标题标题标题标题标题</h4>
        </div>
    </li>
</ul>

图文列表(水平)

  • 这是标题,加ui-nowrap可以超出长度截断

    这是内容

  • 标题标题标题标题

    这是内容

<ul class="ui-list  ui-border-tb">
    <li class="active">
        <div class=" ui-list-img-horizontal">
            <span style="background-image:url(http://placeholder.qiniudn.com/268x188)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">这是标题,加ui-nowrap可以超出长度截断</h4>
            <p>这是内容</p>
            <p></p>
            <p></p>
        </div>
    </li>
    <li>
        <div class="ui-list-img-horizontal">
            <span style="background-image:url(http://placeholder.qiniudn.com/268x188)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4>标题标题标题标题</h4>
             <p>这是内容</p>
            <p></p>
            <p></p>
        </div>
    </li>
</ul>

图文列表图片不固定大小

  • 这是标题,加ui-nowrap可以超出长度截断

    这是内容,加ui-nowrap可以超出长度截断

  • 这是标题,加ui-nowrap可以超出长度截断

    这是内容,加ui-nowrap可以超出长度截断

<ul class="ui-list ui-list-nospace ui-border-tb ">
    <li>
        <div class="ui-list-img">
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/248x352)"></span>
            </div>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">这是标题,加ui-nowrap可以超出长度截断</h4>
            <p class="ui-nowrap">这是内容,加ui-nowrap可以超出长度截断</p>
        </div>
    </li>
    <li>
        <div class="ui-list-img">
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/248x352)"></span>
            </div>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">这是标题,加ui-nowrap可以超出长度截断</h4>
            <p class="ui-nowrap">这是内容,加ui-nowrap可以超出长度截断</p>
        </div>
    </li>
</ul>

局部加载中

正在加载中...

<div class="ui-loading-wrap">
    <p>正在加载中...</p>
    <i class="ui-loading"></i>
</div>

页面加载中

正在加载中...

<div class="ui-loading-block show">
    <div class="ui-loading-cnt">
        <i class="ui-loading-bright"></i>
        <p>正在加载中...</p>
    </div>
</div>

表单

通用设置类输入框

<div class="ui-form ui-border-t">
    <form action="">
        <div class="ui-form-item ui-border-b">
            <label>
                列表标题
            </label>
            <input type="text" placeholder="18位身份证号码">
            <a href="#" class="ui-icon-close">
            </a>
        </div>
        <div class="ui-form-item ui-form-item-link ui-border-b">
            <label>
                列表标题
            </label>
        </div>
        <div class="ui-form-item ui-form-item-link ui-border-b">
            <label>
                标题
            </label>
        </div>
        <div class="ui-btn-wrap">
            <button class="ui-btn-lg ui-btn-primary">
                确定
            </button>
        </div>
    </form>
</div>

4/20

<div class="ui-form ui-border-t">
    <form action="">
        <div class="ui-form-item ui-form-item-pure ui-border-b">
            <input type="text" placeholder="列表标题">
            <a href="#" class="ui-icon-close"></a>
        </div>
        <p class="ui-form-tips">4/20</p>
    </form>
</div>

强引导类输入框

<section class="ui-input-wrap ui-border-t">
    <div class="ui-input ui-border-radius">
        <input type="text" name="" value="" placeholder="我也说一句...">
    </div>
    <button class="ui-btn">评论</button>
</section>
<section class="ui-input-wrap ui-border-t">
    <div class="ui-input ui-border-radius ui-input-text">
        <input type="text" name="" value="" placeholder="我也说一句...">
    </div>
</section>

表单开关项

对附近的人可见

对附近的人可见

<form action="">
      <div class="ui-form-item ui-form-item-switch ui-border-b">
          <p>
              对附近的人可见
          </p>
          <label class="ui-switch">
              <input type="checkbox">
          </label>
      </div>
      <div class="ui-form-item ui-form-item-switch ui-border-b">
          <p>
              对附近的人可见
          </p>
          <label class="ui-switch">
              <input type="checkbox" checked="">
          </label>
      </div>
  </form>

表单下拉框

<form action="">
    <div class="ui-form-item ui-border-b">
        <label>日期</label>
        <div class="ui-select-group">
            <div class="ui-select">
                <select>
                    <option>2014</option>
                    <option selected="">2015</option>
                    <option>2016</option>
                </select>
            </div>
            <div class="ui-select">
                <select>
                    <option>03</option>
                    <option selected="">04</option>
                    <option>05</option>
                </select>
            </div>
            <div class="ui-select">
                <select>
                    <option>21</option>
                    <option selected="">22</option>
                    <option>23</option>
                </select>
            </div>
        </div>
    </div>
    <div class="ui-form-item ui-border-b">
        <label>日期</label>
        <div class="ui-select">
            <select>
                <option>2014</option>
                <option selected="">2015</option>
                <option>2016</option>
            </select>
        </div>
    </div>
</form>

表单单选项

表单中用于单选操作

表单中用于单选操作

<form action="">
    <div class="ui-form-item ui-form-item-radio ui-border-b">
        <label class="ui-radio" for="radio">
            <input type="radio" name="radio">
        </label>
        <p>表单中用于单选操作</p>
    </div>
    <div class="ui-form-item ui-form-item-radio ui-border-b">

        <label class="ui-radio" for="radio">
            <input type="radio" checked="" name="radio">
        </label>
        <p>表单中用于单选操作</p>
    </div>
</form>

表单多选项

表单中用于多选操作

表单中用于多选操作

<form action="">
    <div class="ui-form-item ui-form-item-checkbox ui-border-b">
        <label class="ui-checkbox">
            <input type="checkbox">
        </label>
        <p>表单中用于多选操作</p>
    </div>
    <div class="ui-form-item ui-form-item-checkbox ui-border-b">
        <label class="ui-checkbox">
            <input type="checkbox" checked="">
        </label>
        <p>表单中用于多选操作</p>
    </div>
</form>

普通列表中单选项

  • 普通列表中用于单选操作

  • 普通列表中用于单选操作

<ul class="ui-list ui-list-text ui-list-radio ui-border-tb">
    <li class="ui-border-t">
        <label class="ui-radio" for="radio">
            <input type="radio" name="radio">
        </label>
        <p>普通列表中用于单选操作</p>
    </li>
    <li class="ui-border-t">
        <label class="ui-radio" for="radio">
            <input type="radio" checked="" name="radio">
        </label>
        <p>普通列表中用于单选操作</p>
    </li>
</ul>

普通列表中多选项

  • 普通列表中用于多选操作

  • 普通列表中用于多选操作

<ul class="ui-list ui-list-text ui-list-checkbox ui-border-b">
    <li class="ui-border-t">
        <label class="ui-checkbox">
            <input type="checkbox">
        </label>
        <p>普通列表中用于多选操作</p>
    </li>
    <li class="ui-border-t">
        <label class="ui-checkbox">
            <input type="checkbox" checked="">
        </label>
        <p>普通列表中用于多选操作</p>
    </li>
</ul>

通知

请检查网络

<section class="ui-notice">
    <i></i>
    <p>请检查网络</p>
    <div class="ui-notice-btn">
        <button class="ui-btn-primary ui-btn-lg">按钮</button>
    </div>
</section>

面板

默认面板

  • 我是主标题

    这里是副标题

  • 我是主标题

    这里是副标题

  • 我是主标题

    这里是副标题

查看全部
<section class="ui-panel ui-grid ui-grid-trisect">
    <h2 class="ui-arrowlink">猜你喜欢<span class="ui-panel-subtitle">1328条</span></h2>
    <ul>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
                <h4 class="ui-nowrap-multi">我是主标题</h4>
                <p class="ui-nowrap">这里是副标题</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
                <h4 class="ui-nowrap-multi">我是主标题</h4>
                <p class="ui-nowrap">这里是副标题</p>
            </div>
        </li>
        <li>
            <div class="ui-img-vertical">
                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
            </div>
            <div class="ui-grid-info ui-border-r">
                <h4 class="ui-nowrap-multi">我是主标题</h4>
                <p class="ui-nowrap">这里是副标题</p>
            </div>
        </li>
    </ul>
    <div class="ui-panel-more ui-border-tb">
        <span class="ui-arrowlink">查看全部</span>
    </div>
</section>

居中面板

ui-panel-center 居中

<section class="ui-panel ui-panel-center ui-border-tb">
    <h2 class="ui-arrowlink"><span>标题文字</span><span class="ui-panel-title-tips">分类更多</span></h2>
</section>

多行居中面板

ui-panel-center-multi 居中两行

<section class="ui-panel ui-panel-center-multi ui-border-tb">
    <h2 class="ui-arrowlink"><span>标题文字</span><span class="ui-panel-subtitle">副标题文字</span><span class="ui-panel-title-tips">分类更多</span></h2>
</section>

进度条

进度条

<div class="ui-progress">
    <span style="width:50%"></span>
</div>

图片上进度条

<ul class="ui-grid-halve">
    <li>
        <div class="ui-grid-halve-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
            <div class="ui-progress">
                <span style="width:50%"></span>
            </div>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
</ul>

搜索栏

<div  class="ui-searchbar-wrap ui-border-b">
    <div class="ui-searchbar ui-border-radius">
        <i class="ui-icon-search"></i>
        <div class="ui-searchbar-text">搜索号码(2-10位)</div>
        <div class="ui-searchbar-input"><input value="" type="tel" placeholder="搜索号码(2-10位)" autocapitalize="off"></div>
        <i class="ui-icon-close"></i>
    </div>
    <button class="ui-searchbar-cancel">取消</button>
</div>

角标

红色角标

  • 最新
<ul class="ui-grid-halve">
    <li>
        <div class="ui-grid-halve-img" style="overflow:hidden;">
            <i class="ui-subscript ui-subscript-red">最新</i>
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
</ul>

橙色角标

  • 活动
<ul class="ui-grid-halve">
  <li>
      <div class="ui-grid-halve-img" style="overflow:hidden;">
          <i class="ui-subscript ui-subscript-orange">活动</i>
          <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
      </div>
  </li>
</ul>

绿色角标

  • 限免
<ul class="ui-grid-halve">
    <li>
        <div class="ui-grid-halve-img" style="overflow:hidden;">
            <i class="ui-subscript ui-subscript-green">限免</i>
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
</ul>

蓝色角标

  • 免费
<ul class="ui-grid-halve">
    <li>
        <div class="ui-grid-halve-img" style="overflow:hidden;">
            <i class="ui-subscript ui-subscript-blue">免费</i>
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
</ul>

三字角标

  • 小表情
<ul class="ui-grid-halve">
    <li>
        <div class="ui-grid-halve-img" style="overflow:hidden;">
            <i class="ui-subscript ui-subscript-red ui-subscript-trisection">小表情</i>
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
</ul>

选项卡

两个tab

  • 热门
  • 热门
  • 内容1
  • 内容2
<div class="ui-tab ">
    <ul class="ui-tab-nav ui-border-b ">
        <li class="current"><span>热门</span></li>
        <li><span>热门</span></li>
    </ul>
    <ul class="ui-tab-content" style="width:200%">
        <li>内容1</li>
        <li>内容2</li>
    </ul>
</div>

三个tab

  • 热门直播类
  • 热门直播类
  • 热门直播类
  • 内容1
  • 内容2
  • 内容2
<div class="ui-tab">
    <ul class="ui-tab-nav ui-border-b">
        <li class="current"><span>热门直播类</span></li>
        <li><span>热门直播类</span></li>
        <li><span>热门直播类</span></li>
    </ul>
    <ul class="ui-tab-content" style="width:300%">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容2</li>
    </ul>
</div>

四个tab

  • 热门直播类
  • 热门直播类
  • 热门直播类
  • 热门直播类
  • 内容1
  • 内容2
  • 内容3
  • 内容4
<div class="ui-tab">
    <ul class="ui-tab-nav ui-border-b">
        <li class="current"><span>热门直播类</span></li>
        <li><span>热门直播类</span></li>
        <li><span>热门直播类</span></li>
        <li><span>热门直播类</span></li>
    </ul>
    <ul class="ui-tab-content" style="width:400%">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
    </ul>
</div>