单元格

介绍

单元格组件通常用于列表的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" />

Props

Events

Slots

Props

Slots