单元格 Cell

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

使用

API

安装使用

import { TiCell, TiCellGroup } from '@titian-design/mobile-vue';

基本用法

单独使用

附属信息

codesanbox

copy

code

<template>
  <div class="content">
    <TiCell required title="标题文字" desc="居右详细内容文字" label="内容文字" alignItems="flex-end" arrow>
      <div :style="{ color: 'red', paddingRight: '16px' }" slot="sub-desc">附属信息</div>
    </TiCell>
  </div>
</template>

<script lang="ts" setup>
import { TiCell } from 'titian-h5-vue';
</script>

单元格组合

codesanbox

copy

code

<template>
  <div class="content">
    <TiCellGroup>
      <TiCell required title="标题文字" desc="内容文字" arrow />
      <TiCell required title="标题文字">
        <TiCheckboxGroup extStyle="{ display: 'flex', gap: '14px' }" slot="desc">
          <TiCheckbox :value="1" label="标签" />
          <TiCheckbox :value="2" label="标签" />
        </TiCheckboxGroup>
      </TiCell>
      <TiCell required title="标题文字">
        <TiSwitch slot="desc" />
      </TiCell>
    </TiCellGroup>
  </div>
</template>

<script lang="ts" setup>
import { TiCell, TiCellGroup, TiCheckbox, TiCheckboxGroup, TiSwitch } from 'titian-h5-vue';
</script>

通过 part 修改组件样式

codesanbox

copy

code

<template>
  <div class="content">
    <TiCell title="自定义 title 根节点样式" extClass="custom-cell-ext-class" />
  </div>
</template>

<script lang="ts" setup>
import { TiCell } from 'titian-h5-vue';
</script>

<style>
ti-cell::part(custom-cell-ext-class) {
  background-color: red;
}
</style>

使用slot

codesanbox

copy

code

<template>
  <div class="content">
    <TiCell required icon="default-pic" title="标题文字">
      <TiSwitch slot="desc" />
    </TiCell>
  </div>
</template>

<script lang="ts" setup>
import { TiCell, TiSwitch } from 'titian-h5-vue';
</script>

<style>
.custom-cell-ext-class {
  --cell-bg-color: red;
}
</style>

通过 css 变量修改组件样式

codesanbox

copy

code

<template>
  <div class="content custom-cell-ext-class">
    <TiCell title="自定义 title 根节点样式" />
  </div>
</template>

<script lang="ts" setup>
import { TiCell } from 'titian-h5-vue';
</script>

<style>
.custom-cell-ext-class {
  --cell-bg-color: red;
}
</style>

为单元格绑定点击事件

codesanbox

copy

code

<template>
  <div class="content">
    <TiCell title="标题文字" arrow @click="handle" />
  </div>
</template>

<script lang="ts" setup>
import { TiCell } from 'titian-h5-vue';

const handle = () => {
  alert('单元格点击事件');
};
</script>

TiCell 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	自定义描述信息附加信息展示	传入 subDesc 属性会忽略此 slot
right-icon	自定义右侧图标块展示	传入 right-icon 或者设置 arrow 属性会忽略此 slot

可扩展样式名 External Class

类名	说明	备注
ext-class	根节点可扩展的类名	-
title-class	单元格附加信息的自定义类名	-
label-class	单元格标题的自定义类名	-
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	内容下方文字字重	-

TiCellGroup API

属性 Properties

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

插槽 Slots

名称	说明	备注
title	自定义标题块展示	传入 title 属性会忽略此 slot

可扩展样式名 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	-	-