Vant Cell cell

May 07, 2021 Vant

Introduced

import Vue from 'vue';
import { Cell, CellGroup } from 'vant';

Vue.use(Cell);
Vue.use(CellGroup);

Code demo

Basic usage

Cell can be used alone or in combination with CellGroup. CellGroup provides Cell with an upper and lower border

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

The cell size

Size of cells can be controlled by size properties

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

Show icons

Display the icon on the left side of the title with icon properties

<van-cell title="单元格" icon="location-o" />

Only value is set

When only value is set, the content is aligned to the left

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

Show arrows

When the is-link property is set, the arrow appears on the right side of the cell, and the arrow direction can be controlled by the arrow-direction property

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

Page navigation

URL jumps can be made through url properties, or routing jumps can be made through to properties

<van-cell title="URL 跳转" is-link url="/vant/mobile.html" />
<van-cell title="路由跳转" is-link to="index" />

Group the title

CellGroup's title can be specified through its title properties

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

Use a slot

If the above usage does not meet your needs, you can use slots to customize the content

<van-cell value="内容" is-link>
  <!-- 使用 title 插槽来自定义标题 -->
  <template slot="title">
    <span class="custom-title">单元格</span>
    <van-tag type="danger">标签</van-tag>
  </template>
</van-cell>

<van-cell title="单元格" icon="shop-o">
  <!-- 使用 right-icon 插槽来自定义右侧图标 -->
  <van-icon
    slot="right-icon"
    name="search"
    style="line-height: inherit;"
  />
</van-cell>

Vertical center

The centerer attribute allows Cell's left and right content to be centered vertically

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

Api

CellGroup Props

Parameters	Description	Type	The default
title	Group the title	string	`-`
border	Whether to display the outer border	boolean	`true`

Cell Props

Parameters	Description	Type	The default
icon	The icon name or picture link on the left	string	-
title	The title on the left	number \| string	-
value	The content on the right	number \| string	-
label	Description information below the title	string	-
size	Cell size, with an optional value of `large`	string	-
Url	Click on the link address that jumps	string	-
to	Click to jump the target routing object, with the to property of vue-router	string \| object	-
border	Whether to display the inner border	boolean	`true`
replace	Whether to replace the current page history when jumping	boolean	`false`
clickable	Whether to turn on click feedback	boolean	`false`
is-link	Show the arrow on the right and turn on tap feedback	boolean	`false`
required	Whether to display the required asterisk for the form	boolean	`false`
center	Whether to center the content vertically	boolean	`false`
arrow-direction	Arrow direction, the optional value `left` `up` `down`	string	`right`
title-style	The title on the left has an additional style	any	-
title-class	The title on the left has an additional class name	any	-
value-class	The content on the right has an additional class name	any	-
label-class	Describes the additional class name of the information	any	-

Cell Events

The name of the event	Description	Callback parameters
Click	Triggered when you click on a cell	event: Event

CellGroup Slots

Name	Description
default	The default slot
title	Custom grouping titles

Cell Slots

Name	Description
default	Customize the content on the right
title	Customize the title on the left
label	Describe below the custom title
icon	Customize the icon on the left
right-icon	Customize the right button, which defaults `arrow`