Cell 单元格

基础用法

<van-cell-group>
  <van-cell title="单元格" value="内容" />
  <van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>

单元格大小

通过size属性可以控制单元格的大小

<van-cell title="单元格" value="内容" size="large" />
<van-cell title="单元格" value="内容" size="large" label="描述信息" />

展示图标

通过icon属性在标题左侧展示图标

<van-cell value="内容" />

展示箭头

传入is-link属性则会在右侧显示箭头，并且可以通过传入arrow-direction属性控制箭头方向

<van-cell title="单元格" is-link />
<van-cell title="单元格" is-link value="内容" />
<van-cell title="单元格" is-link arrow-direction="down" value="内容" />

页面跳转

可以通过url属性进行页面跳转，或通过to属性进行 vue-router 跳转

分组标题

<van-cell-group title="分组1">
  <van-cell title="单元格" value="内容" />
<van-cell-group title="分组2">
  <van-cell title="单元格" value="内容" />
</van-cell-group>

如以上用法不能满足你的需求，可以使用对应的slot来自定义显示的内容

<van-cell value="内容" icon="shop-o" is-link>
  <template slot="title">
    <span class="custom-text">单元格</span>
    <van-tag type="danger">标签</van-tag>
  </template>
</van-cell>
<van-cell title="单元格" icon="location-o" is-link />
<van-cell title="单元格">
  <van-icon slot="right-icon" name="search" class="custom-icon" />
</van-cell>

API

CellGroup Props

Cell Props

Cell Events