嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

Cell

1、说明

1.1、示例:http://m.ydui.org/html/cell.html

1.2、列表视图,webapp 上最常用的内容结构,采用flex布局,轻松潇洒适应各类结构;

2、使用

基本使用(将列表分组)
左边内容一
右边内容一
左边内容二
右边内容二
左边内容一
右边内容一
左边内容二
右边内容二

Cell 使用 .m-cell 将每行列表 .cell-item 分组,每行列表都为左右结构 (.cell-left 和 .cell-right)。

<div class="m-cell">
<div class="cell-item">
<div class="cell-left">左边内容一</div>
<div class="cell-right">右边内容一</div>
</div>
<div class="cell-item">
<div class="cell-left">左边内容二</div>
<div class="cell-right">右边内容二</div>
</div>
</div>

<div class="m-cell">
<div class="cell-item">
<div class="cell-left">左边内容一</div>
<div class="cell-right">右边内容一</div>
</div>
<div class="cell-item">
<div class="cell-left">左边内容二</div>
<div class="cell-right">右边内容二</div>
</div>
</div>
添加箭头标识
左边内容一
右边内容一

标签 .cell-right 上添加 .cell-arrow 即可生成右向箭头。

<div class="m-cell">
<div class="cell-item">
<div class="cell-left">左边内容一</div>
<div class="cell-right cell-arrow">右边内容一</div>
</div>
</div>
添加图标

标签 .cell-left 内添加 .cell-icon 并放置你的图标。

<div class="m-cell">
<a class="cell-item" href="javascript:;">
<div class="cell-left"><i class="cell-icon icon-order></i>我的订单</div>
<div class="cell-right cell-arrow">查看全部订单</div>
</a>
<a class="cell-item" href="javascript:;">
<div class="cell-left"><span class="cell-icon"><img src="//static.ydcss.com/ydui/img/logo.png" /></span>图标</div>
<div class="cell-right cell-arrow">图标是image</div>
</a>
</div>
给每组列表添加标题

添加 <div class="m-celltitle">标题来的</div> 即可。

<div class="m-celltitle">这里是一个标题</div>
<div class="m-cell">
<a class="cell-item" href="javascript:;">
<div class="cell-left"><i class="cell-icon icon-order"></i>我的订单</div>
<div class="cell-right cell-arrow">查看全部订单</div>
</a>
<a class="cell-item" href="javascript:;">
<div class="cell-left"><i class="cell-icon icon-like-outline"></i>我的收藏</div>
<div class="cell-right cell-arrow"></div>
</a>
</div>

<div class="m-celltitle">这里是另外一个标题</div>
<div class="m-cell">
<a class="cell-item" href="javascript:;">
<div class="cell-left"><i class="cell-icon icon-order"></i>我的订单</div>
<div class="cell-right cell-arrow">查看全部订单</div>
</a>
<a class="cell-item" href="javascript:;">
<div class="cell-left"><i class="cell-icon icon-like-outline"></i>我的收藏</div>
<div class="cell-right cell-arrow"></div>
</a>
</div>
使用文本框、下拉选择框
手机号:
性别:

在input标签上添加 .cell-input,在select标签上添加 .cell-select 即可。

<div class="m-cell">
<div class="cell-item">
<div class="cell-left">手机号:</div>
<div class="cell-right"><input type="number" pattern="[0-9]*" class="cell-input" placeholder="请输入手机号" autocomplete="off" /></div>
</div>
<div class="cell-item">
<label class="cell-right cell-arrow">
<select class="cell-select">
<option value="">支付方式</option>
<option value="1">支付宝</option>
<option value="2">微信</option>
<option value="3">财付通</option>
</select>
</label>
</div>
<div class="cell-item">
<div class="cell-left">性别:</div>
<label class="cell-right cell-arrow">
<select class="cell-select">
<option value="">请选择性别</option>
<option value="1">男</option>
<option value="2">女</option>
<option value="3">未知</option>
</select>
</label>
</div>
</div>
使用单选框、多选框

单选框和多选框的样式通用,type="radio"改为type="checkbox"亦可。

<div class="m-cell">
<label class="cell-item">
<span class="cell-left">多选一</span>
<label class="cell-right">
<input type="checkbox" name="checkbox"/>
<i class="cell-checkbox-icon"></i>
</label>
</label>
<label class="cell-item">
<span class="cell-left">多选二</span>
<label class="cell-right">
<input type="checkbox" name="checkbox"/>
<i class="cell-checkbox-icon"></i>
</label>
</label>
<label class="cell-item">
<span class="cell-left">多选三</span>
<label class="cell-right">
<input type="checkbox" name="checkbox"/>
<i class="cell-checkbox-icon"></i>
</label>
</label>

<label class="cell-item">
<span class="cell-left">单选一</span>
<label class="cell-right">
<input type="radio" name="radio" checked/>
<i class="cell-radio-icon"></i>
</label>
</label>
<label class="cell-item">
<span class="cell-left">单选二</span>
<label class="cell-right">
<input type="radio" name="radio"/>
<i class="cell-radio-icon"></i>
</label>
</label>
</div>
使用多行文本域
文本域

标签textarea添加 .cell-textarea 即可。

<div class="m-celltitle">文本域</div>
<div class="m-cell">
<div class="cell-item">
<div class="cell-right">
<textarea class="cell-textarea" placeholder="请输入您的银行卡卡号和密码"></textarea>
</div>
</div>
</div>

3、其他

3.1、更多使用方法请查看示例代码;

3.2、列表视图的高度、字体字号、字体颜色等都可以通过这里定制属;

4、参与讨论

4.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。