Cell 单元格

介绍

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

引入

import { Cell } from "@taroify/core"

代码演示

基础用法

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

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

卡片风格

通过 Cell.Group 的 inset 属性，可以将单元格转换为圆角卡片风格。卡片模式不会显示上下外边框。

<Cell.Group inset>
  <Cell title="单元格">内容</Cell>
  <Cell title="单元格">内容</Cell>
</Cell.Group>

单元格大小

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

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

展示图标

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

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

只设置内容

只设置 children 时，内容会靠左对齐。

<Cell>内容</Cell>

展示箭头

设置 isLink 属性后会在单元格右侧展示箭头，并且可以通过 arrowDirection 控制箭头方向。

<Cell title="单元格" isLink />
<Cell title="单元格" isLink children="内容" />
<Cell title="单元格" isLink arrowDirection="down" children="内容" />

页面导航 v1.0.1

使用 Cell.Link 可以通过 Taro Navigator 完成页面跳转。Cell.Link 默认展示右侧箭头并开启点击反馈。

<Cell.Link title="订单详情" url="/pages/order/detail/index">
  查看
</Cell.Link>
<Cell.Link title="返回上一页" openType="navigateBack" />

额外内容 v1.0.1

通过 extra 属性可以在右侧图标之后放置额外内容。

<Cell title="消息通知" isLink extra={<Switch checked />}>
  已开启
</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>

升级提示

Cell.Group 的标题和内容容器现在是同级节点，传入的原生 View 属性会作用于内容容器。
Cell.Group 在 inset 模式下不再显示上下外边框。
Cell 显式设置的 clickable 优先于 isLink 和 Cell.Group clickable。
icon 和 rightIcon 会被统一的布局节点包裹，自定义图标会自动获得标准间距和对齐。
size="large" 现在会正确应用大尺寸描述文字样式。

API

Cell.Group Props

参数	说明	类型	默认值
title	分组标题	ReactNode	`-`
inset	是否展示为圆角卡片风格	boolean	`false`
bordered	是否显示非卡片模式的外边框	boolean	`true`
clickable	是否为子单元格开启点击反馈	boolean	`false`

Cell Props

参数	说明	类型	默认值
title	左侧标题	ReactNode	`-`
children	右侧内容	ReactNode	`-`
brief	标题下方的描述信息	ReactNode	`-`
size v1.0.1	单元格大小，可选值为 `normal` `large`，`medium` 已废弃	string	`normal`
icon	左侧图标或图片	ReactNode	`-`
rightIcon	右侧自定义图标	ReactNode	`-`
extra v1.0.1	右侧图标之后的额外内容	ReactNode	`-`
bordered	是否显示内边框	boolean	`true`
clickable	是否开启点击反馈，显式值优先于分组和链接状态	boolean	`-`
isLink	是否展示右侧箭头并开启点击反馈	boolean	`false`
arrowDirection	箭头方向，可选值为 `left` `right` `up` `down`	string	`right`
required	是否显示表单必填星号	boolean	`false`
align	对齐方式，可选值为 `start` `center` `end`	string	`-`
titleStyle	左侧标题额外样式	CSSProperties	`-`
titleClass	左侧标题额外类名	string	`-`
valueClass	右侧内容额外类名	string	`-`
briefClass	标题下方的描述信息额外类名	string	`-`

Cell 还继承了 Taro View 的原生属性。

Cell.Link Props v1.0.1

Cell.Link 支持 Cell 内容与样式属性，并继承 Taro Navigator 的 url、openType、target 等原生属性。isLink 和 clickable 的默认值均为 true。

Cell Events

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

主题定制

样式变量

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

名称	默认值	描述
--cell-font-size	var(--font-size-md)	-
--cell-line-height	24px $hd*	-
--cell-color	var(--text-color)	-
--cell-background-color	var(--background-color-2)	-
--cell-border-color	var(--border-color)	-
--cell-value-color	var(--gray-6)	-
--cell-value-font-size v1.0.1	inherit	-
--cell-active-color	var(--active-color)	-
--cell-required-color	var(--danger-color)	-
--cell-required-padding-right	2px $hd*	-
--cell-icon-size	16px $hd*	-
--cell-left-icon-margin-right v1.0.1	4px $hd*	-
--cell-right-icon-margin-left v1.0.1	4px $hd*	-
--cell-right-icon-color v1.0.1	var(--cell-value-color)	-
--cell-extra-margin-left v1.0.1	var(--padding-base)	-
--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-brief-font-size-large v1.0.1	var(--font-size-md)	-
--cell-value-font-size-large v1.0.1	inherit	-
--cell-subtitle-font-size-large	var(--font-size-md)	即将废弃
--cell-group-background-color	var(--background-color-2)	-
--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)	-

#Cell 单元格

#介绍

#引入

#代码演示

#基础用法

#卡片风格

#单元格大小

#展示图标

#只设置内容

#展示箭头

#页面导航 v1.0.1

#额外内容 v1.0.1

#分组标题

#对齐方式

#升级提示

#API

#Cell.Group Props

#Cell Props

#Cell.Link Props v1.0.1

#Cell Events

#主题定制

#样式变量