• Vant React

Cell 单元格

介绍

单元格为列表中的单个展示项。

引入

import { Cell } from "@taroify/core"

代码演示

基础用法

Cell 可以单独使用,也可以与 Cell.Group 搭配使用,Cell.Group 可以为 Cell 提供上下外边框。

<Cell title="单元格">内容</Cell>
<Cell title="单元格" brief="描述信息">内容</Cell>

单元格大小

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

<Cell title="单元格">内容</Cell>
<Cell title="单元格" brief="描述信息" size="large">内容</Cell>

展示图标

通过 icon 属性在标题左侧展示图标。

<Cell icon={<LocationOutlined />} title="单元格">内容</Cell>

只设置 value

只设置 value 时,内容会靠左对齐。

<Cell>内容</Cell>

展示箭头

通过 rightIcon 属性在标题右侧展示箭头,并且可以通过不同图标控制箭头方向。

<Cell title="单元格" rightIcon={<Arrow />} clickable />
<Cell title="单元格" rightIcon={<Arrow />} clickable>内容</Cell>
<Cell title="单元格" rightIcon={<ArrowDown />} clickable>内容</Cell>

分组标题

通过 Cell.Grouptitle 属性可以指定分组标题。

<Cell.Group title="分组 1">
  <Cell title="单元格">内容</Cell>
</Cell.Group>
<Cell.Group title="分组 2">
  <Cell title="单元格">内容</Cell>
</Cell.Group>

对齐方式

通过 align 属性可以改变 Cell 的左右内容的对齐方式。

<Cell title="单元格" brief="align start" size="large" align="start">内容</Cell>
<Cell title="单元格" brief="align center" size="large" align="center">内容</Cell>
<Cell title="单元格" brief="align end" size="large" align="end">内容</Cell>

API

Cell.Group Props

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

Cell Props

参数 说明 类型 默认值
title 左侧标题 number | string -
children 右侧内容 number | string -
brief 标题下方的描述信息 string -
size 单元格大小,可选值为 large string -
icon 左侧图标图片 ReactNode -
rightIcon 右侧图标图片 ReactNode -
bordered 是否显示内边框 boolean true
clickable 是否开启点击反馈 boolean false
required 是否显示表单必填星号 boolean false
align 对齐方式,可选值为 start center end string -

Cell Events

事件名 说明 回调参数
onClick 点击单元格时触发 event: MouseEvent