跳到主要内容

单元格 Cell

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

API

安装使用​

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

基本用法​

单独使用单元格​

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

使用 slot 修改单元格内容​

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

多个单元格组合在一起​

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

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

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

为单元格绑定点击事件​

<ti-cell title="标题1" bind:tap="handleClick" />

ti-cell 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否center单元格的横向对齐方式, 具体值可见 align-items-
ext-stylestring | Record<string, string>否-根节点额外扩展样式属性值如果是带单位的话，要带上单位，如：{margin: '10px'}
dividerboolean否-是否展示分割线-
directiontop | bottom | left | right | all否bottom分割线方向线-
title-widthstring否-标题宽度，须包含单位，例如：100px | 100rpx-
linkstring否-跳转链接当设置 link 后，会默认使用右侧箭头
jump-typereLaunch | 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-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-left4rpx--
--cell-divider-gap28rpx--
--cell-line-height1.2--
--cell-icon-margin-right20rpx--
--cell-title-font-size28rpx--
--cell-title-font-weight400--
--cell-title-line-height42rpx--
--cell-label-font-size24rpx--
--cell-label-font-weight400--
--cell-label-line-height36rpx--
--cell-desc-font-size28rpx--
--cell-label-font-weight400--
--cell-label-line-height36rpx--
--cell-title-wrap-widthauto--
--cell-title-wrap-min-width100rpx--
--cell-title-wrap-padding0--

ti-cell-group API​

属性 Properties​

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

插槽 Slots​

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

可扩展样式名 External Class​

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

CSS 变量 CSS Variables​

变量默认值备注
--cell-group-margin-v0-
--cell-group-margin-h16rpx-
--cell-group-radius8rpx
--cell-group-title-padding-v28rpx-
--cell-group-title-padding-h28rpx-
--cell-group-title-colorvar(--neutral-color-1, #212121)-
--cell-group-title-font-size28rpx-
--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-size20rpx-
--cell-group-sub-title-font-weight400-
--cell-group-sub-title-line-height1.2-
--cell-group-sub-title-margin-left8rpx-
--cell-group-body-bg-colorvar(--neutral-color-9, #ffffff)-