单元格

介绍

单元格组件通常用于列表的item或者一些跳转的入口操作。cell可以与cell-group搭配使用,通常用来渲染列表,使用cell-group后,每个子项将会携带边框。

基本使用

<z-cell title="基本使用" value="内容" />

搭配使用

<z-cell-group>
	<z-cell title="单元格" value="内容" />
	<z-cell title="单元格" value="内容" :label="详情" :border="false" />
</z-cell-group>

单元格大小

通过size属性可以控制单元格的大小。

<z-cell title="单元格" value="内容" icon="user" size="large" />
<z-cell title="单元格" value="内容" size="large" label="详情" :border="false" />

展示图标

通过icon属性指定一个图标名称后,即可显示图标。

<z-cell title="单元格" value="内容" icon="user" :border="false" />

展示箭头

通过设置is-link属性即可显示向右的箭头,如需控制箭头方向,需要传入up,down,left

<z-cell title="单元格" is-link />
<z-cell title="单元格" is-link value="内容" />
<z-cell title="单元格" is-link arrow-direction="chevron_big_down" value="内容" :border="false" />

分组

在使用cell-group后,可以通过指定title属性来设置分组标题。

<z-cell-group title="分组 1">
	<z-cell title="单元格" value="内容" :border="false" />
</z-cell-group>
<z-cell-group title="分组 2">
	<z-cell title="单元格" value="内容" :border="false" />
</z-cell-group>

使用插槽

组件中提供了多个插槽,可以满足高度自定义的需求。

<z-cell title="这是一段文字" :value="new Date().getFullYear()+''" :label="详情" clickable>
	<template #icon>
		<view style="margin-right:10rpx;display: flex;">
			<z-image width="100" height="100" src="https://cdn.520ztc.com/zebra-ui/images/dog.jpg" />
		</view>
	</template>
</z-cell>
<z-cell value="内容" is-link>
	<template #title>
		<span class="custom-title">单元格</span>
		<z-tag type="danger">单元格</z-tag>
	</template>
</z-cell>
<z-cell icon="user" title="单元格" :border="false">
	<template #right-icon>
		<z-icon name="search" class="search-icon" />
	</template>
</z-cell>

垂直居中

通过设置属性center即可实现垂直居中

<z-cell center title="单元格" value="内容" label="详情" :border="false" />

API

Props

参数 说明 类型 可选值 默认值
size 单元格大小 string large -
center 是否使内容垂直居中 boolean false
required 是否显示表单必填星号 boolean false
border 是否显示下边框 boolean true
clickable 是否开启点击反馈 boolean false
is-link 是否展示右侧箭头并开启点击反馈 boolean false
custom-style 自定义样式 object -
icon 左侧图标名称或图片链接,可选值见 Icon 组件 string -
title-width 标题宽度,须包含单位 string -
title-style 标题样式 string -
title 左侧标题 string -
label 标题下方的描述信息 string -
use-label-slot 是否使用 label slot boolean false
value 右侧内容 string -
arrow-direction 箭头方向 string left up down -

Events

事件名 回调参数 说明
click event object - event 点击事件,点击单元格触发此事件

Slots

名称 说明 Bindings
icon 自定义图标插槽
title 自定义标题插槽
label 自定义 label 插槽
default 自定义 value 插槽
right-icon 自定义右侧图标插槽
extra 备用插槽

by cell-group

Props

参数 说明 类型 可选值 默认值
title 分组标题 string -
inset 是否展示为圆角卡片风格 boolean false
border 是否显示外边框 boolean true

Slots

名称 说明 Bindings
default 默认插槽