vant/src/cell/README.md

Cell

Intro

The cell is a single display item in the list.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

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

const app = createApp();
app.use(Cell);
app.use(CellGroup);

Usage

Basic Usage

<van-cell-group>
  <van-cell title="Cell title" value="Content" />
  <van-cell title="Cell title" value="Content" label="Description" />
</van-cell-group>

Inset Grouped

<van-cell-group inset>
  <van-cell title="Cell title" value="Content" />
  <van-cell title="Cell title" value="Content" label="Description" />
</van-cell-group>

Size

<van-cell-group>
  <van-cell title="Cell title" value="Content" size="large" />
  <van-cell
    title="Cell title"
    value="Content"
    size="large"
    label="Description"
  />
</van-cell-group>

Left Icon

<van-cell-group>
  <van-cell title="Cell title" icon="location-o" />
</van-cell-group>

Value only

<van-cell-group>
  <van-cell value="Content" />
</van-cell-group>

Link

<van-cell-group>
  <van-cell title="Cell title" is-link />
  <van-cell title="Cell title" is-link value="Content" />
  <van-cell title="Cell title" is-link arrow-direction="down" value="Content" />
</van-cell-group>

Router

<van-cell-group>
  <van-cell title="URL" is-link url="/vant/mobile.html" />
  <van-cell title="Vue Router" is-link to="index" />
</van-cell-group>

Group Title

<van-cell-group title="Group 1">
  <van-cell title="Cell title" value="Content" />
</van-cell-group>
<van-cell-group title="Group 2">
  <van-cell title="Cell title" value="Content" />
</van-cell-group>

Use Slots

<van-cell value="Content" is-link>
  <!-- Use the title slot to customize the title -->
  <template #title>
    <span class="custom-title">Title</span>
    <van-tag type="danger">Tag</van-tag>
  </template>
</van-cell>

<van-cell title="Title" icon="shop-o">
  <!-- Use the right-icon slot to customize the right icon -->
  <template #right-icon>
    <van-icon name="search" class="search-icon" />
  </template>
</van-cell>

<style>
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
</style>

Vertical Center

<van-cell center title="Cell title" value="Content" label="Description" />

API

CellGroup Props

Attribute	Description	Type	Default
title	Group title	string	-
inset v3.1.0	Whether to be inset grouped	boolean	false
border	Whether to show outer border	boolean	true

Cell Props

Attribute	Description	Type	Default
title	Title	number | string	-
value	Right text	number | string	-
label	Description below the title	string	-
size	Size，can be set to large	string	-
icon	Left Icon	string	-
icon-prefix	Icon className prefix	string	van-icon
border	Whether to show inner border	boolean	true
center	Whether to center content vertically	boolean	true
url	Link URL	string	-
to	Target route of the link, same as to of vue-router	string | object	-
replace	If true, the navigation will not leave a history record	boolean	false
clickable	Whether to show click feedback when clicked	boolean	null
is-link	Whether to show link icon	boolean	false
required	Whether to show required mark	boolean	false
arrow-direction	Can be set to left up down	string	right
title-style	Title style	string | Array | object	-
title-class	Title className	string | Array | object	-
value-class	Value className	string | Array | object	-
label-class	Label className	string | Array | object	-

Cell Events

Event	Description	Arguments
click	Emitted when cell is clicked	event: MouseEvent

CellGroup Slots

Name	Description
default	Default slot
title	Custom title

Cell Slots

Name	Description
title	Custom title
value v3.1.1	Custom value
label	Custom label
icon	Custom left icon
right-icon	Custom right icon
extra	Custom extra content on the right

Types

The component exports the following type definitions:

import type { CellArrowDirection } from 'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-cell-font-size	var(--van-font-size-md)	-
--van-cell-line-height	24px	-
--van-cell-vertical-padding	10px	-
--van-cell-horizontal-padding	var(--van-padding-md)	-
--van-cell-text-color	var(--van-text-color)	-
--van-cell-background-color	var(--van-white)	-
--van-cell-border-color	var(--van-border-color)	-
--van-cell-active-color	var(--van-active-color)	-
--van-cell-required-color	var(--van-danger-color)	-
--van-cell-label-color	var(--van-gray-6)	-
--van-cell-label-font-size	var(--van-font-size-sm)	-
--van-cell-label-line-height	var(--van-line-height-sm)	-
--van-cell-label-margin-top	var(--van-padding-base)	-
--van-cell-value-color	var(--van-gray-6)	-
--van-cell-icon-size	16px	-
--van-cell-right-icon-color	var(--van-gray-6)	-
--van-cell-large-vertical-padding	var(--van-padding-sm)	-
--van-cell-large-title-font-size	var(--van-font-size-lg)	-
--van-cell-large-label-font-size	var(--van-font-size-md)	-
--van-cell-group-background-color	var(--van-white)	-
--van-cell-group-title-color	var(--van-gray-6)	-
--van-cell-group-title-padding	var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)	-
--van-cell-group-title-font-size	var(--van-font-size-md)	-
--van-cell-group-title-line-height	16px	-
--van-cell-group-inset-padding	0 var(--van-padding-md)	-
--van-cell-group-inset-border-radius	var(--van-border-radius-lg)	-
--van-cell-group-inset-title-padding	var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl)	-