Taroify
Cell 单元格
代码演示
基础用法
Cell 可以单独使用，也可以与 Cell.Group 搭配使用，Cell.Group 可以为 Cell 提供上下外边框。
<Cell title="单元格">内容</Cell>
<Cell title="单元格" brief="描述信息">内容</Cell>单元格大小
通过 size 属性可以控制单元格的大小。
<Cell title="单元格">内容</Cell>
<Cell title="单元格" brief="描述信息" size="large">内容</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 v0.1.1-alpha.5 | 是否展示右侧箭头并开启点击反馈 | boolean | false |
arrowDirection v0.1.1-alpha.5 | 箭头方向，可选值为 left right up down | string | right |
| required | 是否显示表单必填星号 | boolean | false |
| align | 对齐方式，可选值为 start center end | string | - |
主题定制
样式变量
组件提供了下列 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) | - |