Cell 单元格

引入

在或index.json中引入组件，详细介绍见快速上手。

基础用法

Cell可以单独使用，也可以与CellGroup搭配使用。CellGroup可以为Cell提供上下外边框。

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

单元格大小

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

展示图标

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

设置is-link属性后会在单元格右侧显示箭头，并且可以通过arrow-direction属性控制箭头方向。

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

页面跳转

  title="单元格"
  link-type="navigateTo"
  url="/pages/dashboard/index"
/>

分组标题

通过CellGroup的title属性可以指定分组标题。

使用插槽

如以上用法不能满足你的需求，可以使用插槽来自定义内容。

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

垂直居中

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

API

CellGroup 外部样式类

Cell Props

Cell Event

Cell Slot