跳到主要内容

单元格 Cell

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

API

安装使用​

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

基本用法​

单独使用单元格​

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

使用 slot 修改单元格内容​

const App: React.FC = () => {
  return (
    <>
      <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>
    </>
  )
}

多个单元格组合在一起​

const App: React.FC = () => {
  return (
    <>
      <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>
    </>
  )
}

为单元格绑定点击事件​

const App: React.FC = () => {
  const handleClick = useCallback((e: Event) => {
    console.log('单元格点击事件');
  }, [])
  
  return <TiCell title="标题" onClick={handleClick} />
}

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

const App: React.FC = () => {
  return (
    <>
      <TiCell title="自定义 title 根节点样式" extClass="custom-cell-ext-class" />
    <>
  )
}

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

const App: React.FC = () => {
  return (
    <section className="custom-cell-ext-class">
      <TiCell title="自定义 title 根节点样式"  />
    </section>
  )
}

TiCell API​

属性 Properties​

名称类型是否必填默认值说明备注
titlestring否-标题-
labelstring否-标题下方附加信息-
descstring否-副标题，右侧描述信息-
subDescstring否-副标题下面附加信息-
arrowboolean否false是否使用默认右侧向右箭头-
requiredboolean否false是否显示表单必填星号-
disabledboolean否false是否禁用单元格-
iconstring否-自定义左侧图标-
iconSizestring否-自定义左侧图标尺寸-
rightIconstring否-自定义右侧侧图标-
rightIconSizestring否-自定义右侧图标尺寸-
colorstring否-所有图标颜色，如果需要修改某个单一图标颜色，可使用自定义类名-
clickableboolean否false开启点击反馈-
alignItemsstring否-单元格的横向对齐方式, 具体值可见 align-items-
extStylestring | Record<string, string>否-根节点额外扩展样式属性值如果是带单位的话，要带上单位，如：{margin: '10px'}
dividerboolean否-是否展示分割线-
directiontop | bottom | left | right | all否bottom分割线方向线-
titleWidthstring否-标题宽度，须包含单位，例如：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-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-标题-
subTitlestring-副标题只有 title 存在时，才会展示此选项。
modedefault | carddefault单元格组展示的模式-

插槽 Slots​

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

可扩展样式名 External Class​

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

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