单元格 Cell

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

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-cell": "@titian-design/weapp/cell/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-cell": "platform://titian-mp/ti-cell"
  }
}

基本用法

单独使用

附属信息

copy

code

<ti-cell
  required
  title="标题文字"
  desc="居右详细内容文字"
  label="内容文字"
  arrow
>
  <viiew slot="sub-desc">
    附属信息
  </viiew>
</ti-cell>

单元格组合

copy

code

<ti-cell-group>
  <ti-cell required title="标题文字" desc="内容文字" arrow />
  <ti-cell required title="标题文字">
    <ti-checkbox-group slot="desc">
      <ti-checkbox value="1" label="标签" />
      <ti-checkbox value="2" label="标签" />
    </ti-checkbox-group>
  </ti-cell>
  <ti-cell required title="标题文字">
    <ti-switch slot="desc" />
  </ti-cell>
</ti-cell-group>

使用slot

copy

code

<ti-cell required icon="default-pic" title="标题文字">
  <ti-switch slot="desc" />
</ti-cell>

通过 css 变量修改组件样式

copy

code

<view style="--cell-bg-color: red; --cell-title-text-color:#fff;">
  <ti-cell title="自定义 title 根节点样式" />
</view>

为单元格绑定点击事件

copy

code

<ti-cell title="标题文字" arrow @click="handle" />

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	否	center	单元格的横向对齐方式, 具体值可见 align-items	-
ext-style	string | Record<string, string>	否	-	根节点额外扩展样式	属性值如果是带单位的话，要带上单位，如：{margin: '10px'}
divider	boolean	否	-	是否展示分割线	-
direction	top | bottom | left | right | all	否	bottom	分割线方向线	-
title-width	string	否	-	标题宽度，须包含单位，例如：100px | 100rpx	-
link	string	否	-	跳转链接	当设置 link 后，会默认使用右侧箭头
jump-type	reLaunch | redirectTo | navigateTo | navigateBack	否	navigateTo	跳转方式	当设置为 navigateTo 时，getCurrentPages() 数量大于9时，会使用 redirectTo

插槽 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	-	-
--cell-padding-h	theme.spacing.horizontal.s8	-	-
--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	-	-
--cell-divider-gap	theme.spacing.horizontal.h7	-	-
--cell-icon-margin-right	theme.spacing.gap.g5	-	-
--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	-	-
--cell-group-margin-h	theme.spacing.gap.g0	-	-
--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	-	-