Cell 单元格

手机扫码预览

01:50



---

组件名：rice-cell

cell单元格一般用于一组列表的情况。

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

• 通过 title 设置单元格的标题
• 通过 value 设置单元格的内容
• 通过 label 设置单元的描述信息

<rice-cell-group border>
  <rice-cell title="单元格" value="内容" />
  <rice-cell title="单元格" value="内容" label="这是一段描述信息" :border="false" />
</rice-cell-group>

展示箭头

设置 arrow 为 true 即可显示右侧箭头，可以通过 arrow-direction 设置箭头的方向，可选 top left right

<rice-cell title="单元格" arrow />
<rice-cell title="单元格" value="下箭头" arrow arrow-direction="down" />

展示图标

通过 icon 属性设置单元格左侧的图标

<rice-cell icon="location" title="单元格" value="内容" />

页面导航

设置 url 属性即可进行页面跳转

<rice-cell title="页面跳转" url="/pages/components/display/collapse" />

内容垂直居中

center 属性可以让 Cell 的内容垂直居中

<rice-cell center title="单元格" value="内容" label="这是一段描述信息" arrow />

单元格大小

通过 size 属性可以设置单元格的大小，可选 medium large

<rice-cell size="medium" title="单元格" label="这是一段描述信息" value="内容" />
<rice-cell size="large" title="单元格" label="这是一段描述信息" value="内容" />

使用插槽

<rice-cell title="单元格" label="这是一段描述信息" center>
  <template #leftIcon>
    <image src="/static/images/avatar.png" class="left-cion"></image>
  </template>
  <template #rightIcon>
    <rice-icon name="search" />
  </template>
  <template #value>
    <text class="demo-cell__value">辅助信息</text>
  </template>
</rice-cell>

分组标题

设置 CellGroup 的 title 即可实现分组标题

<rice-cell-group title="分组1">
  <rice-cell title="单元格" value="内容" />
</rice-cell-group>

<rice-cell-group title="分组2">
  <rice-cell title="单元格" value="内容" />
</rice-cell-group>

卡片风格

<rice-cell-group radius="8px" :custom-style="{margin:'0 16px'}">
  <rice-cell title="单元格" value="内容" />
  <rice-cell title="单元格" value="这是超长的文本内容区域这是超长的文本内容区域这是超长的文本内容区域" :border="false" />
</rice-cell-group>

API

Props

属性名	类型	说明	默认值
title	String|Number	左侧标题	-
value	String|Number	右侧内容	-
label	String|Number	标题下方的描述信息	-
size	String	单元格大小，可选 large medium，可选值：large、medium	-
icon	String	左侧图标的名称或图片链接	-
url	String	点击跳转的页面地址	-
border	Boolean	是否显示下边框	-
clickable	Boolean	是否开启点击反馈	-
arrow	Boolean	是否显示右侧箭头	-
arrow-direction	String	右侧箭头方向，可选值：up、down、left、right	-
center	Boolean	内容是否垂直居中	-
title-style	Object	自定义标题样式	-
value-style	Object	自定义value样式	-
label-style	Object	自定义label样式	-
custom-style	Object	自定义样式	-

Events

事件名	说明	回调参数
click	单元格点击

Slot

名称	说明
leftIcon	左侧图标
title	标题
value	右侧内容
label	标题下方的描述
rightIcon	右侧图标

类型定义

组件导出如下类型

const cellGroupRef=ref<RiceCellGroupComponentPublicInstance|null>(null)
const cellRef=ref<RiceCellComponentPublicInstance|null>(null)