跳到主要内容

单元格 Cell

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

API

安装使用​

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

基本用法​

单独使用单元格​

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

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

使用 slot 修改单元格内容​

<template>
  <TiCell title="使用slot自定义左侧图标">
    <TiIcon name="home" slot="icon" />
  </TiCell>

  <TiCell title="使用slot自定义右侧图标">
    <TiIcon name="home" slot="right-icon" />
  </TiCell>

  <TiCell>
    <div slot="title">使用 slot 修改 title</div>
  </TiCell>

  <TiCell title="使用slot自定义label">
    <div slot="label">标题下方附加信息</div>
  </TiCell>

  <TiCell title="使用slot自定义desc">
    <div slot="desc">居右详细内容文字</div>
  </TiCell>
</template>

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

多个单元格组合在一起​

<template>
  <TiCellGroup title="单元格组标题">
    <TiCell title="标题" desc="详细内容文字" />
    <TiCell title="标题" desc="详细内容文字" />
    <TiCell title="标题" desc="详细内容文字" />
  </TiCellGroup>

  <TiCellGroup title="单元格组标题" subTitle="单元格组副标题">
    <TiCell title="标题" desc="详细内容文字" />
    <TiCell title="标题" desc="详细内容文字" />
    <TiCell title="标题" desc="详细内容文字" />
  </TiCellGroup>

  <TiCellGroup title="单元格组模式为卡片" mode="card">
    <TiCell title="标题" desc="详细内容文字" />
    <TiCell title="标题" desc="详细内容文字" />
    <TiCell title="标题" desc="详细内容文字" />
  </TiCellGroup>
</template>

<script lang="ts" setup>
import { TiCell, TiCellGroup} from '@titian-design/mobile-vue';
</script>

为单元格绑定点击事件​

<template>
  <TiCell title="标题" @click="handleClick" />
</template>

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

const handleClick = (e:Event) => {
  console.log('点击了 cell')
}
</script>

通过 ::part 修改组件样式​

<template>
  <TiCell title="标题" @click="handleClick" />
</template>

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

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

通过 css变量 修改组件样式​

<template>
  <TiCell title="标题" @click="handleClick" />
</template>

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

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

TiCell API​

属性 Properties​

名称类型是否必填默认值说明备注
titlestring否-标题-
labelstring否-标题下方附加信息-
descstring否-副标题，右侧描述信息-
sub-descstring否-副标题下面附加信息-
arrowboolean否false是否使用默认右侧向右箭头-
requiredboolean否false是否显示表单必填星号-
disabledboolean否false是否禁用单元格-
iconstring否-自定义左侧图标-
icon-sizestring否-自定义左侧图标尺寸-
right-iconstring否-自定义右侧侧图标-
right-icon-sizestring否-自定义右侧图标尺寸-
colorstring否-所有图标颜色，如果需要修改某个单一图标颜色，可使用自定义类名-
clickableboolean否false开启点击反馈-
align-itemsstring否-单元格的横向对齐方式, 具体值可见 align-items-
ext-stylestring | Record<string, string>否-根节点额外扩展样式属性值如果是带单位的话，要带上单位，如：{margin: '10px'}
dividerboolean否-是否展示分割线-
directiontop | bottom | left | right | all否bottom分割线方向线-
title-widthstring否-标题宽度，须包含单位，例如：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-breakbreak-all-
--cell-padding-v@gap-32--
--cell-padding-h@gap-28--
--cell-text-colorvar(--neutral-color-1, #212121)--
--cell-title-text-colorvar(--neutral-color-1, #212121)--
--cell-label-text-colorvar(--neutral-color-3, #9e9e9e)--
--cell-desc-text-colorvar(--neutral-color-1, #212121)--
--cell-bg-colorvar(--neutral-color-9, #ffffff)--
--cell-right-icon-colorvar(--neutral-color-4, #c4c4c4)--
--cell-text-disabled-colorvar(--neutral-color-3, #9e9e9e)--
--cell-hover-bg-colorrgba(0, 0, 0, 0.1)--
--cell-required-color#ff0000--
--cell-required-margin-left4px--
--cell-divider-gap28px--
--cell-line-height1.2--
--cell-icon-margin-right20px--
--cell-title-font-size28px--
--cell-title-font-weight400--
--cell-title-line-height42px--
--cell-label-font-size24px--
--cell-label-font-weight400--
--cell-label-line-height36px--
--cell-desc-font-size28px--
--cell-label-font-weight400--
--cell-label-line-height36px--
--cell-title-wrap-widthauto--
--cell-title-wrap-min-width100px--
--cell-title-wrap-padding0--

TiCellGroup API​

属性 Properties​

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

插槽 Slots​

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

可扩展样式名 External Class​

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

CSS 变量 CSS Variables​

变量默认值备注
--cell-group-margin-v0-
--cell-group-margin-h16px-
--cell-group-radius8px
--cell-group-title-padding-v28px-
--cell-group-title-padding-h28px-
--cell-group-title-colorvar(--neutral-color-1, #212121)-
--cell-group-title-font-size28px-
--cell-group-title-font-weightvar(--font-weight-bold, 600)-
--cell-group-title-line-height1.2-
--cell-group-sub-title-colorvar(--neutral-color-2, #757575)-
--cell-group-sub-title-font-size20px-
--cell-group-sub-title-font-weight400-
--cell-group-sub-title-line-height1.2-
--cell-group-sub-title-margin-left8px-
--cell-group-body-bg-colorvar(--neutral-color-9, #ffffff)-