跳到主要内容

单元格 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>

为单元格绑定点击事件

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

ti-cell API

属性 Properties

名称类型是否必填默认值说明备注
titlestring-标题-
labelstring-标题下方附加信息-
descstring-副标题,右侧描述信息-
sub-descstring-副标题下面附加信息-
arrowbooleanfalse是否使用默认右侧向右箭头-
requiredbooleanfalse是否显示表单必填星号-
disabledbooleanfalse是否禁用单元格-
iconstring-自定义左侧图标-
icon-sizestring-自定义左侧图标尺寸-
right-iconstring-自定义右侧侧图标-
right-icon-sizestring-自定义右侧图标尺寸-
colorstring-所有图标颜色,如果需要修改某个单一图标颜色,可使用自定义类名-
clickablebooleanfalse开启点击反馈-
align-itemsstring-单元格的横向对齐方式, 具体值可见 align-items-
ext-stylestring | Record<string, string>-根节点额外扩展样式属性值如果是带单位的话,要带上单位,如:{margin: '10px'}
dividerboolean-是否展示分割线-
directiontop | bottom | left | right | allbottom分割线方向线-
title-widthstring-标题宽度,须包含单位,例如: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-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--

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-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)-