Taroify

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="单元格" isLink  />
<Cell title="单元格" isLink children="内容" />
<Cell title="单元格" isLink arrowDirection="down" children="内容" />

分组标题

通过 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`
clickable	是否开启点击反馈	boolean	`false`

Cell Props

参数	说明	类型	默认值
title	左侧标题	number \| string	-
children	右侧内容	number \| string	-
brief	标题下方的描述信息	string	-
size	单元格大小，可选值为 `large`	string	-
icon	左侧图标或图片	ReactNode	-
rightIcon	右侧图标或图片	ReactNode	-
bordered	是否显示内边框	boolean	`true`
clickable	是否开启点击反馈	boolean	`false`
isLink	是否展示右侧箭头并开启点击反馈	boolean	`false`
arrowDirection	箭头方向，可选值为 `left` `right` `up` `down`	string	`right`
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-required-padding-right	2px $hd*	-
—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)	-