Cell

Cells are generally used in the case of a group of lists, such as personal center pages, settings pages, etc.

platform compatibility

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

Basic usage

This component needs to be used with cell-group, and it realizes the upper and lower borders of the list group. If the upper and lower borders are not required, configure the border parameter of cellGroup to false.
Use title to set the title on the left, and value to set the content on the right.
Set the icon or image link through the icon field (absolute URL is recommended for local files).

Note: Since the cell component needs to be provided with parameter values by the cellGroup component, these parent-child components inject dependencies through Vue's "provide/inject" feature, so you must wrap the cell component with cellGroup to Normal use.

vue

<template>
	<wu-cell-group>
		<wu-cell icon="setting-fill" title="Personal settings"></wu-cell>
		<wu-cell icon="integral-fill" title="membership level" value="new version"></wu-cell>
	</wu-cell-group>
</template>

<template>
	<wu-cell-group>
		<wu-cell icon="setting-fill" title="Personal settings"></wu-cell>
		<wu-cell icon="integral-fill" title="membership level" value="new version"></wu-cell>
	</wu-cell-group>
</template>

Custom content

The icon can be customized through the slot icon, and the content will replace the position of the icon on the left
Define the left title section via the slot title
Define the right content part through the slot right-icon

html

<wu-cell-group>
	<wu-cell  title="Magnificent sunset" arrow-direction="down">
		<wu-icon slot="icon" size="32" name="search"></wu-icon>
		<wu-switch slot="right-icon" v-model="checked"></wu-switch>
	</wu-cell>
	<wu-cell icon="setting-fill" title="just near dusk"></wu-cell>
</wu-cell-group>

<wu-cell-group>
	<wu-cell  title="Magnificent sunset" arrow-direction="down">
		<wu-icon slot="icon" size="32" name="search"></wu-icon>
		<wu-switch slot="right-icon" v-model="checked"></wu-switch>
	</wu-cell>
	<wu-cell icon="setting-fill" title="just near dusk"></wu-cell>
</wu-cell-group>

As shown above, you can use slot="right-icon" to set the badge or switch component that comes with the right wu-ui for the cell component:

If you are using the badge component, pay attention to set the absolute parameter to false to remove the absolute positioning, otherwise it will be in the right position on the right, see [Badge Logo Number](/en-US/components/badge. html).
If the switch component is used, be careful to bind a variable whose content is a Boolean value through v-model, otherwise the switch cannot be operated, see Switch switch selector for details.

Custom size

Set size to customize the size

html

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

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

Show right arrow

Set isLink to true, the arrow on the right will be displayed, and the direction of the arrow can be controlled by arrow-direction

html

<wu-cell-group>
	<wu-cell icon="share" title="停车坐爱枫林晚" :isLink="true" arrow-direction="down"></wu-cell>
	<wu-cell icon="map" title="霜叶红于二月花" :isLink="false"></wu-cell>
</wu-cell-group>

<wu-cell-group>
	<wu-cell icon="share" title="停车坐爱枫林晚" :isLink="true" arrow-direction="down"></wu-cell>
	<wu-cell icon="map" title="霜叶红于二月花" :isLink="false"></wu-cell>
</wu-cell-group>

Jump page

Set isLink to true, click on the cell to jump to the page, pass in url to set the jump address

html

<wu-cell-group>
	<wu-cell
	    title="open tab"
	    isLink
	    url="/pages/componentsB/tag/tag"
	></wu-cell>
	<wu-cell
	    title="open logo page"
	    isLink
	    url="/pages/componentsB/badge/badge"
	></wu-cell>
</wu-cell-group>

<wu-cell-group>
	<wu-cell
	    title="open tab"
	    isLink
	    url="/pages/componentsB/tag/tag"
	></wu-cell>
	<wu-cell
	    title="open logo page"
	    isLink
	    url="/pages/componentsB/badge/badge"
	></wu-cell>
</wu-cell-group>

Vertically center the content on the right

Set center to true to vertically center the content on the right

html

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

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

Custom slots

Set slot to title to customize the content of the left area. Set slot to value to customize the content of the right area

html

<wu-cell-group>
    <wu-cell value="内容">
        <template #title>
            <view class="wu-slot-title">
    		<text class="wu-cell-text">Cell</text>
    		<wu-tag
    		    text="Label"
    		    plain
    		    size="mini"
    		    type="warning"
    		>
    		</wu-tag>
    	</view>
        </template>
    </wu-cell>
    <wu-cell
        title="Cell"
    	isLink
    >
        <template #value>
            <text class="wu-slot-value">99</text>
        </template>
    </wu-cell>
</wu-cell-group>

<wu-cell-group>
    <wu-cell value="内容">
        <template #title>
            <view class="wu-slot-title">
    		<text class="wu-cell-text">Cell</text>
    		<wu-tag
    		    text="Label"
    		    plain
    		    size="mini"
    		    type="warning"
    		>
    		</wu-tag>
    	</view>
        </template>
    </wu-cell>
    <wu-cell
        title="Cell"
    	isLink
    >
        <template #value>
            <text class="wu-slot-value">99</text>
        </template>
    </wu-cell>
</wu-cell-group>

API

CellGroup Props

property name	description	type	default value	optional values
title	group title	String	-	-
border	Whether to display the outer border	Boolean	true	true / false
customStyle	user-defined external style, object form, such as {'font-size': '12px'} or {'fontSize': '12px'}	Object / String	-	-

Cell Props

property name	description	type	default value	optional values
title	left title	String / Number	-	-
label	description information below the title	String / Number	-	-
value	content on the right side	String / Number	-	-
icon	Left icon name, or image link (absolute address is recommended for local files)	String	-	-
disabled	Whether to disable the cell	Boolean	false	true / false
border	Whether to display the bottom border	Boolean	true	true / false
center	Whether the content is vertically centered (mainly for the value part on the right)	Boolean	false	true / false
url	URL address to jump after clicking	String	-	-
linkType	The way of link jumping, internally uses the route method encapsulated by wu-ui, which may be intercepted	String	navigateTo	-
clickable	Whether to enable click feedback (appears as a gray background when clicked)	Boolean	false	true / false
isLink	Whether to show the right arrow and enable click feedback	Boolean	false	true / false
required	Whether to display the required asterisk in the form state (this component may embed the input component)	Boolean	false	true / false
rightIcon	right icon arrow	String	arrow-right	-
arrowDirection	The direction of the right arrow, the optional values are: left, up, down	String	right	left / right / up /down
iconStyle	left icon style	Object / String	-	-
rightIconStyle	style of right arrow icon	Object / String	-	-
titleStyle	style of title	Object / String	-	-
size	The size of the unit, the optional value is large	String	-	-
stop	Whether to stop event propagation when cell is clicked	Boolean	true	true / false
name	Identifier, used to return in `click` event	String / Number	-	-

Cell Slot

Slot Name	Description
title	Customize the content of the title part on the left. If you want to use it, please do not define the `title` parameter, or just assign `null`
value	Customize the content of the title part on the right. If you want to use it, please do not define the `value` parameter, or just assign `null`
icon	Customize the left icon
right-icon	Customize the content of the right icon, you need to set `arrow` to `false` to work
label	Customize `label` content

Cell Events

Event Name	Description	Callback Parameters
click	Triggered when the cell list is clicked	name: name parameter identifier of props

Cell ​

platform compatibility ​

Basic usage ​

Custom content ​

Custom size ​

Show right arrow ​

Jump page ​

Vertically center the content on the right ​

Custom slots ​

API ​

CellGroup Props ​

Cell Props ​

Cell Slot ​

Cell Events ​

Cell

platform compatibility

Basic usage

Custom content

Custom size

Show right arrow

Jump page

Vertically center the content on the right

Custom slots

API

CellGroup Props

Cell Props

Cell Slot

Cell Events