Cell cell

introduce

A cell is a single display item in the list.

Basic usage

Cell can be used alone or in combination with CellGroup. CellGroup can provide upper and lower outer borders for Cell.

<z-cell-group>
   <z-cell title="cell" value="content" />
   <z-cell title="cell" value="content" label="description information" />
</z-cell-group>

Card style

Cells can be converted to rounded card style through the inset property of CellGroup.

<z-cell-group inset>
   <z-cell title="cell" value="content" />
   <z-cell title="cell" value="content" label="description information" />
</z-cell-group>

Cell size

The size of the cell can be controlled through the size property.

<z-cell title="cell" value="content" size="large" />
<z-cell title="cell" value="content" size="large" label="description information" />

Display icon

Display the icon to the left of the title via the icon attribute.

<z-cell-group>
   <z-cell title="cell" value="content" icon="appstore" />
   <z-cell title="cell" value="content" icon="setting" />
</z-cell-group>

Show arrow

After setting the is-link property, an arrow will be displayed on the right side of the cell, and the arrow direction can be controlled through the arrow-direction property.

<z-cell title="cell" is-link />
<z-cell title="cell" is-link value="content" />
<z-cell title="cell" is-link arrow-direction="down" value="content" />

Group title

The group title can be specified through the title attribute of CellGroup.

<z-cell-group title="Group 1">
   <z-cell title="cell" value="content" />
</z-cell-group>
<z-cell-group title="Group 2">
   <z-cell title="cell" value="content" />
</z-cell-group>

Using slots

If the above usage does not meet your needs, you can use slots to customize the content.

<z-cell value="content" is-link>
   <!-- Use the title slot to customize the title -->
   <template #title>
     <text class="custom-title">Cell</text>
     <z-tag type="primary">tag</z-tag>
   </template>
</z-cell>

<z-cell title="cell" icon="creditcard">
   <!-- Use the right-icon slot to customize the right icon -->
   <template #right-icon>
     <z-icon name="search" class="search-icon" />
   </template>
</z-cell>

<style lang="scss" scoped>
.demo-cell {
   .custom-title {
     margin-right: 10rpx;
   }
}
</style>

Vertically centered

The left and right contents of the Cell can be vertically centered through the center attribute.

<z-cell center title="cell" value="content" label="description information" />

CellGroup Props

Cell Props

Cell Events

CellGroup Slots

Cell Slots

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.