vant/packages/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>

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="https://github.com" />
  <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="primary">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	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	number | string	-
size	Size, can be set to large normal	string	-
icon	Left Icon	string	-
icon-prefix	Icon className prefix	string	van-icon
tag	Custom element tag	string	div
url	Link URL	string	-
to	The target route should navigate to when clicked on, same as the to prop of Vue Router	string | object	-
replace	If true, the navigation will not leave a history record	boolean	false
border	Whether to show inner border	boolean	true
center	Whether to center content vertically	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	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 {
  CellSize,
  CellProps,
  CellGroupProps,
  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	var(--van-background-2)	-
--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-text-color-2)	-
--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-text-color-2)	-
--van-cell-value-font-size	inherit	-
--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-large-value-font-size	inherit	-
--van-cell-group-background	var(--van-background-2)	-
--van-cell-group-title-color	var(--van-text-color-2)	-
--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-radius	var(--van-radius-lg)	-
--van-cell-group-inset-title-padding	var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl)	-