Cell Component

The cell component is generally used for groups of list items, such as personal center pages, settings pages, etc.

📌 Platform Differences

APP(vue)	H5	WeChat Mini Program	Alipay Mini Program
✔	✔	✔	✔

🏯 Basic Usage

Tip

If you want to use click events on hy-cell, you must set a unique name value for each hy-cell-item to distinguish which child element is clicked

<template>
    <!-- Global usage -->
    <hy-cell @click="onClick">
        <hy-cell-item
            title="Toolbox"
            name="tools"
            :icon="{ name: IconConfig.SETTING, color: 'red' }"
        ></hy-cell-item>
        <hy-cell-item title="Mine" name="my" sub="I am a magical little box" value="Back"></hy-cell-item>
        <hy-cell-item title="Disabled" name="disabled" disabled></hy-cell-item>
    </hy-cell>
</template>

Setting the icon content

<template>
    <hy-cell>
        <hy-cell-item
            title="Toolbox"
            :icon="{ name: IconConfig.SETTING, color: 'red' }"
        ></hy-cell-item>
    </hy-cell>

    <!-- Custom icon -->
    <hy-cell>
        <hy-cell-item title="Toolbox">
            <template #icon>
                <hy-icon name="tools" />
            </template>
        </hy-cell-item>
    </hy-cell>
</template>

Right-side content positioning

• Change the position of the value by setting arrange
  • left: Left
  • center: Center
  • right: Right

<template>
    <hy-cell arrange="left"></hy-cell>
    <hy-cell arrange="center"></hy-cell>
    <hy-cell arrange="right"></hy-cell>
</template>

Cell size

• Set the cell size via size
  • small: Small
  • medium: Default
  • large: Large

<template>
    <hy-cell size="small"></hy-cell>
    <hy-cell size="medium"></hy-cell>
    <hy-cell size="large"></hy-cell>
</template>

Rotating the right arrow

• Set the arrow direction via arrow-direction
  • up: Up
  • right: Right
  • down: Down
  • left: Left

<template>
    <hy-cell arrow-direction="up"></hy-cell>
    <hy-cell arrow-direction="right"></hy-cell>
    <hy-cell arrow-direction="down"></hy-cell>
    <hy-cell arrow-direction="left"></hy-cell>
</template>

Page navigation

<template>
    <hy-cell>
        <hy-cell-item url="/page/index/tools"></hy-cell-item>
    </hy-cell>
</template>

API

Cell Props

Parameter	Description	Type	Default
border	Whether to show the cell's bottom border	boolean	true
disabled	Whether to disable the cell	boolean	false
clickable	Whether to enable click feedback (shown as a gray background on click)	boolean	false
size	Size of the cell, numbers use px as the default unit	string|number	medium
arrange	Whether the content is centered (mainly for the right-side value part)	string	right
isRightIcon	Whether to show the right icon	boolean	true
arrowDirection	Direction of the right arrow	string	right
customStyle	Define external styles to be applied	CSSProperties	-
customClass	Custom external class name	string	-

CellItem Props

Parameter	Description	Type	Default
title	Header title	string	-
sub	Small hint below the title	string	-
disabled	Whether to disable the cell	boolean	false
value	Right-side content	string|number	-
icon	Left icon, see Icon API	HyIconProps	-
rightIcon	Right icon, see Icon API	HyIconProps	-
arrowDirection	Direction of the right arrow	string	right
url	URL to navigate to after clicking	string	-
stop	Whether clicking the cell stops event propagation	boolean	true
name	Identifier returned in the click event	string|number	-
customStyle	Define external styles to be applied	CSSProperties	-
customClass	Custom external class name	string	-

Events

Cell Emits

Event Name	Description	Callback Parameter
click	Triggered when the cell list is clicked	name: unique identifier

CellItem Emits

Event Name	Description	Callback Parameter
click	Triggered when the cell list is clicked	name: unique identifier

Cell Slots

Slot Name	Description	Received Value
default	Default slot for CellItem components	title

CellItem Slots

Slot Name	Description	Received Value
title	Custom cell title content	title
icon	Custom left icon	icon
sub	Custom subtitle content	sub
value	Custom right-side value content	record
right-icon	Custom right icon content	icon

CSS Variables

Variable Name	Description	Default Value
--hy-cell-item-icon-margin	Right margin of the icon	10px
--hy-cell-item-value-max-width	Max width of the right-side value	90%
--hy-cell-item-font-size-large	Title font size for large	Follows --hy-font-size-lg (36rpx)
--hy-cell-item-font-size-medium	Title font size for medium	Follows --hy-font-size-base (28rpx)
--hy-cell-item-font-size-small	Title font size for small	Follows --hy-font-size-sm (24rpx)
--hy-cell-item-sub-color	Description text color	Follows --hy-text-color--grey
--hy-cell-item-sub-font-size	Description text font size	Follows --hy-font-size-sm (24rpx)
--hy-cell-item-value-color	Right-side value text color	Follows --hy-text-color--grey
--hy-cell-item-arrow-color	Right arrow color	Follows --hy-text-color--3
--hy-cell-item-disabled-color	Disabled text color	Follows --hy-text-color--disabled

12:33