Cell

Cell is used for information display and light interaction. Can be used independently or managed uniformly with wd-cell-group for layout and style.

Component Type

Basic Usage

html

<wd-cell-group>
  <wd-cell title="Title Text" value="Content" />
  <wd-cell title="Title Text" label="Description Info" value="Content" />
</wd-cell-group>

Group Title

html

<wd-cell-group title="Transaction Management" value="Content">
  <wd-cell title="Title Text" value="Content" />
  <wd-cell title="Title Text" label="Description Info" value="Content" />
</wd-cell-group>

Component State

Click Feedback

html

<wd-cell title="Title Text" value="Content" clickable @click="showToast" />

Component Variant

Placeholder

html

<wd-cell-group>
  <wd-cell title="Username" placeholder="Please enter username" />
  <wd-cell title="Phone" value="188****8888" placeholder="Please enter phone" />
  <wd-cell title="Left Align" placeholder="Please enter content" value-align="left" />
  <wd-cell title="Center Align" placeholder="Please enter content" value-align="center" />
</wd-cell-group>

html

<wd-cell-group>
  <wd-cell title="Help & Feedback" is-link to="/pages/index/Index" />
  <wd-cell title="Settings" value="Content" is-link to="/pages/button/Index" replace />
</wd-cell-group>

Arrow Direction

html

<wd-cell-group>
  <wd-cell title="Up Arrow" is-link arrow-direction="up" />
  <wd-cell title="Down Arrow" is-link arrow-direction="down" />
  <wd-cell title="Left Arrow" is-link arrow-direction="left" />
  <wd-cell title="Default Arrow (Right)" is-link />
</wd-cell-group>

Component Style

Icon Settings

Set prefix-icon to use built-in icons, or use prefix slot to customize leading icon.

html

<wd-cell-group>
  <wd-cell title="Title Text" value="Content" prefix-icon="settings" />
  <wd-cell title="Title Text" value="Content">
    <template #prefix>
      <view class="cell-icon"></view>
    </template>
  </wd-cell>
</wd-cell-group>

Large Size

html

<wd-cell-group>
  <wd-cell size="large" title="Title Text" value="Content" />
  <wd-cell size="large" title="Title Text" value="Content" prefix-icon="settings" is-link />
  <wd-cell size="large" title="Title Text" label="Description Info" value="Content" />
</wd-cell-group>

Vertical Center

html

<wd-cell-group>
  <wd-cell title="Title Text" value="Content" center />
  <wd-cell title="Title Text" label="Description Info" value="Content" center />
</wd-cell-group>

Rounded Card Style

html

<wd-cell-group insert>
  <wd-cell title="Title Text" value="Content" />
  <wd-cell title="Title Text" label="Description Info" value="Content" />
</wd-cell-group>

Special Style

Display Border

html

<wd-cell-group title="Transaction Management" border>
  <wd-cell title="Title Text" value="Content" />
  <wd-cell :border="false" title="Title Text" label="This cell doesn't want border" value="Content" />
  <wd-cell title="Title Text" label="Description Info" value="Content" />
</wd-cell-group>

Form Properties

html

<wd-cell-group border>
  <wd-cell title="Required" required>
    <wd-rate v-model="rate" />
  </wd-cell>
  <wd-cell title="Required Star on Right" required asterisk-position="end">
    <wd-rate v-model="rate1" />
  </wd-cell>
  <wd-cell title="Vertical Layout" layout="vertical" required asterisk-position="end">
    <wd-slider v-model="slider" />
  </wd-cell>
</wd-cell-group>

Set Left Width

html

<wd-cell
  title="Title Text"
  label="This is description text, this is description text, this is description text"
  title-width="200px"
  value="Content"
/>

Content Ellipsis

html

<wd-cell-group>
  <wd-cell title="Normal Display" value="This is a very long, very long, very long, very long, very long content" />
  <wd-cell title="Ellipsis Display" value="This is a very long, very long, very long, very long, very long content" ellipsis />
  <wd-cell title="Left Align Ellipsis" value="This is a very long, very long, very long, very long, very long content" value-align="left" ellipsis />
</wd-cell-group>

Custom Content

html

<wd-cell-group>
  <wd-cell title="Title Text" center>
    <wd-button size="small" plain>Button</wd-button>
  </wd-cell>
  <wd-cell title="Title Text" center>
    <wd-switch v-model="switchValue" />
  </wd-cell>
  <wd-cell title="Title Text" is-link to="/pages/index/index">
    <view class="custom-text">Order</view>
  </wd-cell>
  <wd-cell>
    <template #title>
      <view>
        <view style="display: inline-block">Title Text</view>
        <view class="end-time">Expires in 25 days</view>
      </view>
    </template>
  </wd-cell>
</wd-cell-group>

CellGroup Attributes

Parameter	Description	Type	Default Value
title	Group title	string	-
value	Group right content	string	-
border	Whether to show outer border	boolean	false
insert	Whether to display as rounded card style	boolean	false
center	Whether to center content vertically	boolean	false
size	Cell size, supports `large`	string	-
title-width	Left title width	`string \| number`	-
layout	Cell layout method, supports `horizontal / vertical`	string	-
value-align	Right content alignment, supports `left / right / center`	string	-
custom-class	Root node custom class name	string	`''`
custom-style	Root node custom style	string	`''`

Cell Attributes

Parameter	Description	Type	Default Value
title	Left title	string	-
value	Right content	`string \| number`	`''`
placeholder	Placeholder, only displayed when value is empty	string	-
label	Description info below title	string	-
prefix-icon	Leading icon name	string	-
suffix-icon	Trailing icon name	string	-
icon-size	Icon size	`string \| number`	-
icon-prefix	Icon class prefix	string	-
to	Navigation address	string	-
replace	Whether to replace current page history when navigating	boolean	false
clickable	Whether to enable click feedback	boolean	false
is-link	Whether to show right arrow and enable click feedback	boolean	false
arrow-direction	Arrow direction (only effective when is-link is true), supports `left / up / down / right`	string	right
size	Cell size, supports `large`	string	-
border	Whether to show inner border, priority is higher than cell-group same name attribute	boolean	Inherited from CellGroup
title-width	Left title width	`string \| number`	Inherited from CellGroup
center	Whether to center vertically	boolean	Inherited from CellGroup
layout	Cell layout method, supports `horizontal / vertical`	string	Inherited from CellGroup
value-align	Right content alignment, supports `left / right / center`	string	Inherited from CellGroup
required	Whether to show required asterisk	boolean	false
asterisk-position	Required asterisk position, supports `start / end`	string	start
hide-asterisk	Whether to hide required asterisk	boolean	false
ellipsis	Whether to truncate content with ellipsis when exceeding	boolean	false
use-title-slot	Whether to enable title slot	boolean	true
custom-class	Root node custom class name	string	`''`
custom-style	Root node custom style	string	`''`
custom-prefix-class	Leading icon custom style class	string	`''`
custom-suffix-class	Trailing icon custom style class	string	`''`
custom-label-class	Label area custom style class	string	`''`
custom-value-class	Value area custom style class	string	`''`
custom-title-class	Title area custom style class	string	`''`

Cell Events

Event Name	Description	Parameters
click	Triggered when clicking cell when clickable or is-link is true	-

CellGroup Slots

name	Description	Parameters
title	Group title	-
value	Group right content	-

Cell Slots

name	Description	Parameters
prefix	Leading icon area	-
title	Title area	-
label	Description info area	-
default	Right content area	-
suffix	Trailing icon area (effective when is-link is false)	-

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-cell-bg	$filled-oppo	单元格背景色
--wot-cell-bg-active	$filled-bottom	单元格激活态背景色
--wot-cell-title-color	$text-main	标题文字颜色
--wot-cell-label-color	$text-auxiliary	标签文字颜色
--wot-cell-value-color	$text-secondary	值文字颜色
--wot-cell-icon-color	$icon-secondary	图标颜色
--wot-cell-theme-color	$primary-6	主题色
--wot-cell-arrow-color	$icon-auxiliary	箭头颜色
--wot-cell-border-color	$border-main	边框颜色
--wot-cell-clear-color	$icon-disabled	清除图标颜色
--wot-cell-tap-bg	$primary-1	点击态背景色
--wot-cell-required-color	$danger-main	必填标记颜色
--wot-cell-placeholder-color	$text-placeholder	占位符颜色
--wot-cell-arrow-size	$n-20	箭头图标尺寸
--wot-cell-icon-size	$n-20	图标尺寸
--wot-cell-title-font-size	$typography-body-size-main	标题字号
--wot-cell-title-line-height	$typography-body-line--height-size-main	标题行高
--wot-cell-label-font-size	$typography-body-size-main	标签字号
--wot-cell-label-line-height	$typography-body-line--height-size-main	标签行高
--wot-cell-value-font-size	$typography-body-size-main	值字号
--wot-cell-value-line-height	$typography-body-line--height-size-main	值行高
--wot-cell-value-font-size-large	$typography-body-size-extra-large	大尺寸值字号
--wot-cell-value-line-height-large	$typography-body-line--height-size-extra-large	大尺寸值行高
--wot-cell-title-font-size-large	$typography-body-size-extra-large	大尺寸标题字号
--wot-cell-title-line-height-large	$typography-body-line--height-size-extra-large	大尺寸标题行高
--wot-cell-label-font-size-large	$typography-body-size-extra-large	大尺寸标签字号
--wot-cell-label-line-height-large	$typography-body-line--height-size-extra-large	大尺寸标签行高
--wot-cell-required-font-size	$typography-body-size-main	必填标记字号
--wot-cell-required-line-height	$typography-body-line--height-size-main	必填标记行高
--wot-cell-placeholder-font-size	$typography-body-size-main	占位符字号
--wot-cell-placeholder-line-height	$typography-body-line--height-size-main	占位符行高
--wot-cell-padding	$padding-loose	单元格内边距
--wot-cell-padding-large	$padding-extra-loose	大尺寸单元格内边距
--wot-cell-vertical-padding-top	$padding-extra-loose	纵向布局右侧顶部内边距
--wot-cell-required-margin	$padding-super-tight	必填标记外边距
--wot-cell-icon-spacing-right	$spacing-super-tight	前缀图标右侧间距
--wot-cell-margin-horizontal	$spacing-loose	水平布局左右区域间距
--wot-cell-arrow-margin-left	$spacing-tight	箭头左侧间距
--wot-cell-label-margin-top	$spacing-super-tight	标签顶部间距

Source Code

Documentation

• Component

Cell ​

Component Type ​

Basic Usage ​

Group Title ​

Component State ​

Click Feedback ​

Component Variant ​

Placeholder ​

Page Navigation ​

Arrow Direction ​

Component Style ​

Icon Settings ​

Large Size ​

Vertical Center ​

Rounded Card Style ​

Special Style ​

Display Border ​

Form Properties ​

Set Left Width ​

Content Ellipsis ​

Custom Content ​

CellGroup Attributes ​

Cell Attributes ​

Cell Events ​

CellGroup Slots ​

Cell Slots ​

主题定制 ​

CSS 变量 ​

Source Code ​

Cell

Component Type

Basic Usage

Group Title

Component State

Click Feedback

Component Variant

Placeholder

Page Navigation

Arrow Direction

Component Style

Icon Settings

Large Size

Vertical Center

Rounded Card Style

Special Style

Display Border

Form Properties

Set Left Width

Content Ellipsis

Custom Content

CellGroup Attributes

Cell Attributes

Cell Events

CellGroup Slots

Cell Slots

主题定制

CSS 变量

Source Code