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

YDUI Touch Docs 返回首页

Cell

1、说明

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

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

2、分组

2.1、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>

2.2、效果如下:

3、添加箭头标识

3.1、标签.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>

3.2、效果如下:

4、添加图标

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

<div class="m-cell">
<a class="cell-item" href="javascript:;">
<div class="cell-left"><i class="cell-icon demo-icons-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="http://static.ydcss.com/app-icon144x144@2x.png" /></span>图标</div>
<div class="cell-right cell-arrow">图标是image</div>
</a>
</div>

4.2、效果如下:

5、给每组列表添加标题

5.1、添加<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 demo-icons-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="http://static.ydcss.com/app-icon144x144@2x.png" /></span>图标</div>
<div class="cell-right cell-arrow">图标是image</div>
</a>
</div>

5.2、效果如下:

6、使用文本框、下拉选择框

6.1、在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>

6.2、效果如下:

7、使用单选框、多选框

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

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

<label class="cell-item">
<span class="cell-left">单选一</span>
<span class="cell-right">
<input type="radio" name="radio" checked/>
<i class="cell-radio-icon"></i>
</span>
</label>
<label class="cell-item">
<span class="cell-left">单选二</span>
<span class="cell-right">
<input type="radio" name="radio"/>
<i class="cell-radio-icon"></i>
</span>
</label>
</div>

7.2、效果如下:

8、使用多行文本域

8.1、标签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>

8.2、效果如下:

9、其他

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

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

10、参与讨论

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