单元格 Cell

单元格为列表中的单个展示项，可使用多个单元格可以组合成一个单元格组。

使用

基本用法

单独使用单元格

<ti-cell title="标题"></ti-cell>
<ti-cell title="标题" desc="居右详细内容文字"></ti-cell>
<ti-cell title="标题" label="标题下方附加信息"></ti-cell>
<ti-cell title="标题" desc="自定义左侧图标" icon="home"></ti-cell>
<ti-cell title="标题" desc="自定义图标颜色" icon="home" color="#ff0000"></ti-cell>
<ti-cell title="标题" desc="自定义右侧图标" right-icon="arrow-right"></ti-cell>
<ti-cell title="标题" desc="使用默认右侧箭头" arrow></ti-cell>
<ti-cell title="标题" desc="禁用单元格" disabled></ti-cell>
<ti-cell title="标题" desc="开启点击反馈" clickable></ti-cell>
<ti-cell title="标题" label="附加信息" desc="居上对齐" align-items="start"></ti-cell>
<ti-cell title="标题" label="附加信息" desc="居中对齐" align-items="center"></ti-cell>
<ti-cell title="标题" label="附加信息" desc="居下对齐" align-items="end"></ti-cell>
<ti-cell title="标题" desc="不展示下方分割线" divider="false"></ti-cell>

使用 `slot` 修改单元格内容

<ti-cell title="使用slot自定义左侧图标">
    <ti-icon name="home" slot="icon"></ti-icon>
</ti-cell>
<ti-cell title="使用slot自定义右侧图标">
    <ti-icon name="home" slot="right-icon"></ti-icon>
</ti-cell>
<ti-cell>
    <div slot="title">使用 slot 修改 title</div>
</ti-cell>
<ti-cell title="使用slot自定义label">
    <div slot="label">标题下方附加信息</div>
</ti-cell>
<ti-cell title="使用slot自定义desc">
    <div slot="desc">居右详细内容文字</div>
</ti-cell>

多个单元格组合在一起

<ti-cell-group title="单元格组标题">
  <ti-cell title="标题" desc="详细内容文字"></ti-cell>
  <ti-cell title="标题" desc="详细内容文字"></ti-cell>
  <ti-cell title="标题" desc="详细内容文字"></ti-cell>
</ti-cell-group>

<ti-cell-group title="单元格组标题" sub-title="单元格组副标题">
  <ti-cell title="标题" desc="详细内容文字"></ti-cell>
  <ti-cell title="标题" desc="详细内容文字"></ti-cell>
  <ti-cell title="标题" desc="详细内容文字"></ti-cell>
</ti-cell-group>

<ti-cell-group title="单元格组模式为卡片" mode="card">
  <ti-cell title="标题" desc="详细内容文字"></ti-cell>
  <ti-cell title="标题" desc="详细内容文字"></ti-cell>
  <ti-cell title="标题" desc="详细内容文字"></ti-cell>
</ti-cell-group>

为单元格绑定点击事件

index.html
index.js

code

<ti-cell title="标题1" onclick="handleClick()"></ti-cell>

function handleClick() {
  console.log('单元格点击事件');
}

ti-cell API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
title	`string`	否	-	标题	-
label	`string`	否	-	标题下方附加信息	-
desc	`string`	否	-	副标题，右侧描述信息	-
sub-desc	`string`	否	-	副标题下面附加信息	-
arrow	`boolean`	否	`false`	是否使用默认右侧向右箭头	-
required	`boolean`	否	`false`	是否显示表单必填星号	-
disabled	`boolean`	否	`false`	是否禁用单元格	-
icon	`string`	否	-	自定义左侧图标	-
icon-size	`string`	否	-	自定义左侧图标尺寸	-
right-icon	`string`	否	-	自定义右侧侧图标	-
right-icon-size	`string`	否	-	自定义右侧图标尺寸	-
color	`string`	否	-	所有图标颜色，如果需要修改某个单一图标颜色，可使用自定义类名	-
clickable	`boolean`	否	`false`	开启点击反馈	-
align-items	`string`	否	-	单元格的横向对齐方式, 具体值可见 align-items	-
ext-style	`string` \| `Record<string, string>`	否	-	根节点额外扩展样式	属性值如果是带单位的话，要带上单位，如：`{margin: '10px'}`
divider	`boolean`	否	-	是否展示分割线	-
direction	`top` \| `bottom` \| `left` \| `right` \| `all`	否	`bottom`	分割线方向线	-
title-width	`string`	否	-	标题宽度，须包含单位，例如：`100px`	-

插槽 Slots

名称	说明	备注
icon	自定义右侧图标块展示	传入 `icon` 属性会忽略此 `slot`
title	自定义标题块展示	传入 `title` 属性会忽略此 `slot`
label	自定义附加信息块展示	传入 `label` 属性会忽略标题此 `slot`
desc	自定义描述信息块展示	传入 `desc` 属性会忽略此 `slot`
sub-desc	自定义描述信息附加信息展示	传入 `sub-desc` 属性会忽略此 `slot`
right-icon	自定义右侧图标块展示	传入 `right-icon` 或者设置 `arrow` 属性会忽略此 `slot`

可扩展样式名 External Class

类名	说明	备注
ext-class	根节点可扩展的类名	-
hover-class	单元格被点击时的自定义类名	-
title-class	单元格附加信息的自定义类名	-
label-class	单元格标题的自定义类名	-
desc-class	单元格描述信息的自定义类名	-
desc-content-class	单元格描述信息的附加信息的自定义类名	-
sub-desc-class	单元格描述信息的附加信息的自定义类名	-

CSS 变量 CSS Variables

变量	默认值	说明	备注
`--cell-word-break`	break-word	-
`--cell-padding-v`	`theme.spacing.vertical.s8`	单元格上下padding	-
`--cell-padding-h`	`theme.spacing.horizontal.s8`	单元格左右padding	-
`--cell-text-color`	`theme.color.gray.texticon.900`	-	-
`--cell-title-text-color`	`theme.color.gray.texticon.900`	标题文字颜色	-
`--cell-label-text-color`	`theme.color.gray.texticon.400`	标题附加信息颜色	-
`--cell-desc-text-color`	`theme.color.gray.texticon.900`	内容文字颜色	-
`--cell-bg-color`	`theme.color.gray.background.default`	单元格背景颜色	-
`--cell-right-icon-color`	`theme.color.gray.texticon.250`	内容右侧图标颜色	-
`--cell-text-disabled-color`	`theme.color.gray.texticon.400`	-	-
`--cell-hover-bg-color`	`rgba(0, 0, 0, 0.1)`	-	-
`--cell-required-color`	`theme.color.function.error.1000`	必填星号颜色	-
`--cell-required-margin-left`	`theme.spacing.gap.g1`	必填星号距离左侧文字gap	-
`--cell-divider-gap`	`theme.spacing.horizontal.h7`	单元格分割线左右两边距离	-
`--cell-title-font-size`	`theme.fontSize.t6`	标题文字字号	-
`--cell-title-font-weight`	`theme.fontWeight.regular`	标题文字字重	-
`--cell-title-line-height`	`theme.lineHeight.multiline.t5`	标题文字行高	-
`--cell-label-font-size`	`theme.fontSize.t4`	标题附加信息字号	-
`--cell-label-font-weight`	`theme.fontWeight.regular`	标题附加信息字重	-
`--cell-label-line-height`	`theme.lineHeight.multiline.t3`	标题附加信息行高	-
`--cell-desc-font-size`	`theme.fontSize.t6`	内容文字字号	-
`--cell-title-wrap-width`	`auto`	-	-
`--cell-title-wrap-min-width`	`100px`	-	-
`--cell-title-wrap-padding`	`0`	-	-
`--cell-icon-line-height`	`theme.lineHeight.multiline.t5`	标题左侧图标行高	-
`--cell-icon-padding-right`	`theme.spacing.gap.g5`	标题距离左侧图标	-
`--cell-required-font-size`	`theme.fontSize.t4`	必填星号字号	-
`--cell-required-line-height`	`theme.lineHeight.multiline.t5`	必填星号行高	-
`--cell-desc-line-height`	`theme.lineHeight.multiline.t5`	内容文字行高	-
`--cell-desc-font-weight`	`theme.fontWeight.regular`	内容文字字重	-
`--cell-right-icon-line-height`	`theme.lineHeight.multiline.t5`	内容右侧图标行高	-
`--cell-right-icon-padding-left`	`theme.spacing.gap.g1`	内容距离右侧图标	-
`--cell-sub-desc-font-size`	`theme.fontSize.t4`	内容下方文字大小	-
`--cell-sub-desc-line-height`	`theme.lineHeight.multiline.t3`	内容下方文字行高	-
`--cell-sub-desc-font-weight`	`theme.fontWeight.regular`	内容下方文字字重	-

ti-cell-group API

属性 Properties

名称	类型	默认值	说明	备注
title	`string`	-	标题	-
sub-Title	`string`	-	副标题	只有 `title` 存在时，才会展示此选项。
mode	`default` \| `card`	`default`	单元格组展示的模式	支持：默认样式（`default`）, 卡片模式（`card`）

插槽 Slots

名称	说明	备注
title	自定义标题块展示	-

可扩展样式名 External Class

类名	说明	备注
ext-Class	根节点可扩展的类名	-
title-wrap-class	分组标题的可扩展的类名	-
title-Class	标题可扩展类名	-
sub-title-class	副标题可扩展类名	-

CSS 变量 CSS Variables

变量	默认值	说明	备注
`--cell-group-margin-v`	`theme.spacing.gap.g0`	单元格组为card 模式时上下间距	-
`--cell-group-margin-h`	`theme.spacing.gap.g4`	单元格组为card 模式时左右间距	-
`--cell-group-radius`	`theme.borderRadius.r2`	单元格组圆角	-
`--cell-group-title-padding-v`	`theme.spacing.gap.g7`	单元格组标题的上下间距	-
`--cell-group-title-padding-h`	`theme.spacing.gap.g7`	单元格组标题的水平间距	-
`--cell-group-title-color`	`theme.color.gray.texticon.900`	-	-
`--cell-group-title-font-size`	`theme.fontSize.t6`	-	-
`--cell-group-title-font-weight`	`theme.fontWeight.semibold`	单元格组的标题字重	-
`--cell-group-title-line-height`	`theme.lineHeight.single.t6`	单元格组标题行高	-
`--cell-group-sub-title-color`	`theme.color.gray.texticon.550`	-	-
`--cell-group-sub-title-font-size`	`theme.fontSize.t2`	单元格组的副标题文字大小	-
`--cell-group-sub-title-font-weight`	`theme.fontWeight.regular`	单元格组副标题文字字重	-
`--cell-group-sub-title-line-height`	`theme.lineHeight.single.t2`	单元格组副标题文字行高	-
`--cell-group-sub-title-margin-left`	`theme.spacing.gap.g2`	单元格组副标题左侧间距	-
`--cell-group-body-bg-color`	`theme.color.gray.background.default`	-	-

单元格 Cell

基本用法​

单独使用单元格​

使用 slot 修改单元格内容​

多个单元格组合在一起​

为单元格绑定点击事件​

ti-cell API​

属性 Properties​

插槽 Slots​

可扩展样式名 External Class​

CSS 变量 CSS Variables​

ti-cell-group API​

属性 Properties​

插槽 Slots​

可扩展样式名 External Class​

CSS 变量 CSS Variables​

基本用法

单独使用单元格

使用 `slot` 修改单元格内容

多个单元格组合在一起

为单元格绑定点击事件

ti-cell API

属性 Properties

插槽 Slots

可扩展样式名 External Class

CSS 变量 CSS Variables

ti-cell-group API

属性 Properties

插槽 Slots

可扩展样式名 External Class

CSS 变量 CSS Variables