/*! For license information please see 4628.3d9c325e.js.LICENSE.txt */
(self.webpackChunk=self.webpackChunk||[]).push([["4628"],{31793:function(t,s,n){"use strict";n.r(s);var a=n("80681");let l=["innerHTML"];s.default={setup:()=>({html:""}),render:()=>((0,a.wg)(),(0,a.iD)("div",{class:"van-doc-markdown-body",innerHTML:'Cell
\nIntro
\n
The cell is a single display item in the list.
\n
Install
\n
Register component globally via app.use, refer to Component Registration for more registration ways.
\n
import { createApp } from 'vue';\nimport { Cell, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Cell);\napp.use(CellGroup);\n
\n
Usage
\nBasic Usage
\n
<van-cell-group>\n <van-cell title="Cell title" value="Content" />\n <van-cell title="Cell title" value="Content" label="Description" />\n</van-cell-group>\n
\n
Inset Grouped
\n
<van-cell-group inset>\n <van-cell title="Cell title" value="Content" />\n <van-cell title="Cell title" value="Content" label="Description" />\n</van-cell-group>\n
\n
Size
\n
<van-cell-group>\n <van-cell title="Cell title" value="Content" size="large" />\n <van-cell\n title="Cell title"\n value="Content"\n size="large"\n label="Description"\n />\n</van-cell-group>\n
\n
Left Icon
\n
<van-cell-group>\n <van-cell title="Cell title" icon="location-o" />\n</van-cell-group>\n
\n
Link
\n
<van-cell-group>\n <van-cell title="Cell title" is-link />\n <van-cell title="Cell title" is-link value="Content" />\n <van-cell title="Cell title" is-link arrow-direction="down" value="Content" />\n</van-cell-group>\n
\n
Router
\n
<van-cell-group>\n <van-cell title="URL" is-link url="https://github.com" />\n <van-cell title="Vue Router" is-link to="index" />\n</van-cell-group>\n
\n
Group Title
\n
<van-cell-group title="Group 1">\n <van-cell title="Cell title" value="Content" />\n</van-cell-group>\n<van-cell-group title="Group 2">\n <van-cell title="Cell title" value="Content" />\n</van-cell-group>\n
\n
Use Slots
\n
<van-cell value="Content" is-link>\n \n <template #title>\n <span class="custom-title">Title</span>\n <van-tag type="primary">Tag</van-tag>\n </template>\n</van-cell>\n\n<van-cell title="Title" icon="shop-o">\n \n <template #right-icon>\n <van-icon name="search" class="search-icon" />\n </template>\n</van-cell>\n\n<style>\n .custom-title {\n margin-right: 4px;\n vertical-align: middle;\n }\n\n .search-icon {\n font-size: 16px;\n line-height: inherit;\n }\n</style>\n
\n
Vertical Center
\n
<van-cell center title="Cell title" value="Content" label="Description" />\n
\n
API
\nCellGroup Props
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| title | \nGroup title | \nstring | \n- | \n
\n\n| inset | \nWhether to be inset grouped | \nboolean | \nfalse | \n
\n\n| border | \nWhether to show outer border | \nboolean | \ntrue | \n
\n\n
\n
Cell Props
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| title | \nTitle | \nnumber | string | \n- | \n
\n\n| value | \nRight text | \nnumber | string | \n- | \n
\n\n| label | \nDescription below the title | \nnumber | string | \n- | \n
\n\n| size | \nSize, can be set to large normal | \nstring | \n- | \n
\n\n| icon | \nLeft Icon | \nstring | \n- | \n
\n\n| icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
\n\n| tag | \nCustom element tag | \nstring | \ndiv | \n
\n\n| url | \nLink URL | \nstring | \n- | \n
\n\n| to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
\n\n| replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
\n\n| border | \nWhether to show inner border | \nboolean | \ntrue | \n
\n\n| center | \nWhether to center content vertically | \nboolean | \nfalse | \n
\n\n| clickable | \nWhether to show click feedback when clicked | \nboolean | \nnull | \n
\n\n| is-link | \nWhether to show link icon | \nboolean | \nfalse | \n
\n\n| required | \nWhether to show required mark | \nboolean | \nfalse | \n
\n\n| arrow-direction | \nCan be set to left up down | \nstring | \nright | \n
\n\n| title-style | \nTitle style | \nstring | Array | object | \n- | \n
\n\n| title-class | \nTitle className | \nstring | Array | object | \n- | \n
\n\n| value-class | \nValue className | \nstring | Array | object | \n- | \n
\n\n| label-class | \nLabel className | \nstring | Array | object | \n- | \n
\n\n
\n
Cell Events
\n
\n\n\n| Event | \nDescription | \nArguments | \n
\n\n\n\n| click | \nEmitted when cell is clicked | \nevent: MouseEvent | \n
\n\n
\n
CellGroup Slots
\n
\n\n\n| Name | \nDescription | \n
\n\n\n\n| default | \nDefault slot | \n
\n\n| title | \nCustom title | \n
\n\n
\n
Cell Slots
\n
\n\n\n| Name | \nDescription | \n
\n\n\n\n| title | \nCustom title | \n
\n\n| value | \nCustom value | \n
\n\n| label | \nCustom label | \n
\n\n| icon | \nCustom left icon | \n
\n\n| right-icon | \nCustom right icon | \n
\n\n| extra | \nCustom extra content on the right | \n
\n\n
\n
Types
\n
The component exports the following type definitions:
\n
import type {\n CellSize,\n CellProps,\n CellGroupProps,\n CellArrowDirection,\n} from 'vant';\n
\n
Theming
\nCSS Variables
\n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n
\n\n\n| Name | \nDefault Value | \nDescription | \n
\n\n\n\n| --van-cell-font-size | \nvar(--van-font-size-md) | \n- | \n
\n\n| --van-cell-line-height | \n24px | \n- | \n
\n\n| --van-cell-vertical-padding | \n10px | \n- | \n
\n\n| --van-cell-horizontal-padding | \nvar(--van-padding-md) | \n- | \n
\n\n| --van-cell-text-color | \nvar(--van-text-color) | \n- | \n
\n\n| --van-cell-background | \nvar(--van-background-2) | \n- | \n
\n\n| --van-cell-border-color | \nvar(--van-border-color) | \n- | \n
\n\n| --van-cell-active-color | \nvar(--van-active-color) | \n- | \n
\n\n| --van-cell-required-color | \nvar(--van-danger-color) | \n- | \n
\n\n| --van-cell-label-color | \nvar(--van-text-color-2) | \n- | \n
\n\n| --van-cell-label-font-size | \nvar(--van-font-size-sm) | \n- | \n
\n\n| --van-cell-label-line-height | \nvar(--van-line-height-sm) | \n- | \n
\n\n| --van-cell-label-margin-top | \nvar(--van-padding-base) | \n- | \n
\n\n| --van-cell-value-color | \nvar(--van-text-color-2) | \n- | \n
\n\n| --van-cell-value-font-size | \ninherit | \n- | \n
\n\n| --van-cell-icon-size | \n16px | \n- | \n
\n\n| --van-cell-right-icon-color | \nvar(--van-gray-6) | \n- | \n
\n\n| --van-cell-large-vertical-padding | \nvar(--van-padding-sm) | \n- | \n
\n\n| --van-cell-large-title-font-size | \nvar(--van-font-size-lg) | \n- | \n
\n\n| --van-cell-large-label-font-size | \nvar(--van-font-size-md) | \n- | \n
\n\n| --van-cell-large-value-font-size | \ninherit | \n- | \n
\n\n| --van-cell-group-background | \nvar(--van-background-2) | \n- | \n
\n\n| --van-cell-group-title-color | \nvar(--van-text-color-2) | \n- | \n
\n\n| --van-cell-group-title-padding | \nvar(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) | \n- | \n
\n\n| --van-cell-group-title-font-size | \nvar(--van-font-size-md) | \n- | \n
\n\n| --van-cell-group-title-line-height | \n16px | \n- | \n
\n\n| --van-cell-group-inset-padding | \n0 var(--van-padding-md) | \n- | \n
\n\n| --van-cell-group-inset-radius | \nvar(--van-radius-lg) | \n- | \n
\n\n| --van-cell-group-inset-title-padding | \nvar(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl) | \n- | \n
\n\n
\n