• 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.Group 的 title 属性可以指定分组标题。

<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

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称 默认值 描述
—cell-font-size var(—font-size-md) -
—cell-line-height 24px * $hd -
—cell-color var(—text-color) -
—cell-background-color var(—white) -
—cell-border-color var(—border-color) -
—cell-value-color var(—gray-6) -
—cell-active-color var(—active-color) -
—cell-required-color var(—danger-color) -
—cell-icon-size 16px * $hd -
—cell-icon-margin-left 4px * $hd -
—cell-right-icon-margin-right 4px * $hd -
—cell-brief-margin-top var(—padding-base) -
—cell-brief-font-size var(—font-size-sm) -
—cell-brief-line-height var(—line-height-sm) -
—cell-brief-color var(—gray-6) -
—cell-vertical-padding 10px * $hd -
—cell-horizontal-padding var(—padding-md) -
—cell-vertical-padding-large var(—padding-sm) -
—cell-title-font-size-large var(—font-size-lg) -
—cell-subtitle-font-size-large var(—font-size-md) -
—cell-group-background-color var(—white) -
—cell-group-title-color var(—gray-6) -
—cell-group-title-padding var(—padding-md) var(—padding-md) var(—padding-xs) -
—cell-group-title-font-size var(—font-size-md) -
—cell-group-title-line-height 16px * $hd -
—cell-group-inset-padding 0 var(—padding-md) -
—cell-group-inset-border-radius var(—border-radius-lg) -
—cell-group-inset-title-padding var(—padding-md) var(—padding-md) var(—padding-xs) var(—padding-xl) -