单元格 Cell

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

使用

API

安装使用

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

基本用法

单独使用

附属信息

codesanbox

copy

code

import React from 'react';
import { TiCell } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiCell required title="标题文字" desc="居右详细内容文字" label="内容文字" alignItems="flex-end" arrow>
        <div style={{ color: 'red', paddingRight: 16 }} slot="sub-desc">
          附属信息
        </div>
      </TiCell>
    </div>
  );
}

单元格组合

codesanbox

copy

code

import React from 'react';
import { TiCell, TiCellGroup, TiCheckbox, TiCheckboxGroup, TiSwitch } from 'titian-h5-react';

export default function App() {
  return (
    <div className="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>
  );
}

通过 part 修改组件样式

• App.jsx
• style.scss

code

codesanbox

copy

code

import React from 'react';
import { TiCell } from 'titian-h5-react';
import './style.scss';

export default function App() {
  return (
    <div className="content">
      <TiCell title="自定义 title 根节点样式" extClass="custom-cell-ext-class" />
    </div>
  );
}

codesanbox

copy

code

ti-cell::part(custom-cell-ext-class) {
  background-color: red;
  --cell-title-text-color: #fff;
}

.custom-cell-ext-class {
  --cell-bg-color: red;
  --cell-title-text-color: #fff;
}

使用slot

codesanbox

copy

code

import React from 'react';
import { TiCell, TiSwitch } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiCell required icon="default-pic" title="标题文字">
        <TiSwitch slot="desc" />
      </TiCell>
    </div>
  );
}

通过 css 变量修改组件样式

• App.jsx
• style.scss

code

codesanbox

copy

code

import React from 'react';
import { TiCell } from 'titian-h5-react';
import './style.scss';

export default function App() {
  return (
    <div className="content custom-cell-ext-class">
      <TiCell title="自定义 title 根节点样式" />
    </div>
  );
}

codesanbox

copy

code

ti-cell::part(custom-cell-ext-class) {
  background-color: red;
  --cell-title-text-color: #fff;
}

.custom-cell-ext-class {
  --cell-bg-color: red;
  --cell-title-text-color: #fff;
}

为单元格绑定点击事件

codesanbox

copy

code

import React from 'react';
import { TiCell } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiCell
        title="标题文字"
        arrow
        onClick={() => {
          alert('单元格点击事件');
        }}
      />
    </div>
  );
}

TiCell API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
title	string	否	-	标题	-
label	string	否	-	标题下方附加信息	-
desc	string	否	-	副标题，右侧描述信息	-
subDesc	string	否	-	副标题下面附加信息	-
arrow	boolean	否	false	是否使用默认右侧向右箭头	-
required	boolean	否	false	是否显示表单必填星号	-
disabled	boolean	否	false	是否禁用单元格	-
icon	string	否	-	自定义左侧图标	-
iconSize	string	否	-	自定义左侧图标尺寸	-
rightIcon	string	否	-	自定义右侧侧图标	-
rightIconSize	string	否	-	自定义右侧图标尺寸	-
color	string	否	-	所有图标颜色，如果需要修改某个单一图标颜色，可使用自定义类名	-
clickable	boolean	否	false	开启点击反馈	-
alignItems	string	否	-	单元格的横向对齐方式, 具体值可见align-items	-
extStyle	string | Record<string, string>	否	-	根节点额外扩展样式	属性值如果是带单位的话，要带上单位，如：{margin: '10px'}
divider	boolean	否	-	是否展示分割线	-
direction	top | bottom | left | right | all	否	bottom	分割线方向线	-
titleWidth	string	否	-	标题宽度，须包含单位，例如：100px	-

插槽 Slots

名称	说明	备注
icon	自定义右侧图标块展示	传入 icon 属性会忽略此 slot
title	自定义标题块展示	传入 title 属性会忽略此 slot
label	自定义附加信息块展示	传入 label 属性会忽略标题此 slot
desc	自定义描述信息块展示	传入 desc 属性会忽略此 slot
subDesc	自定义描述信息附加信息展示	传入 subDesc 属性会忽略此 slot
rightIcon	自定义右侧图标块展示	传入 rightIcon 或者设置 arrow 属性会忽略此 slot

可扩展样式名 External Class

类名	说明	备注
extClass	根节点可扩展的类名	-
titleClass	单元格附加信息的自定义类名	-
labelClass	单元格标题的自定义类名	-
descClass	单元格描述信息的自定义类名	-

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	-	标题	-
subTitle	string	-	副标题	只有 title 存在时，才会展示此选项。
mode	default | card	default	单元格组展示的模式	-

插槽 Slots

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

可扩展样式名 External Class

类名	说明	备注
extClass	根节点可扩展的类名	-
titleWrapClass	分组标题的可扩展的类名	-
titleClass	标题可扩展类名	-
subTitleClass	副标题可扩展类名	-

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