Tantalum UI

Cell 单元格

单元格为列表中的单个展示项。

import { TaCell, TaIcon, TaGroup } from '@/index'

export default function ExpCell() {
  return (
    <>
      <TaGroup title="基础用法">
        <TaCell label="单元格" content="内容"></TaCell>
        <TaCell label="单元格" content="内容" description="描述信息"></TaCell>
      </TaGroup>
      <TaGroup title="包含图标">
        <TaCell label="单元格" content="内容" icon="EditOutlined"></TaCell>
        <TaCell
          label="单元格"
          content="内容"
          description="描述信息"
          icon="EditOutlined"
        ></TaCell>
      </TaGroup>
      <TaGroup title="展示箭头">
        <TaCell label="单元格" isLink></TaCell>
        <TaCell
          label="单元格"
          content="内容"
          isLink
          arrowDirection="down"
        ></TaCell>
        <TaCell
          label="单元格"
          content="内容"
          isLink
          arrowDirection="left"
        ></TaCell>
        <TaCell
          label="单元格"
          description="描述信息"
          isLink
          arrowDirection="up"
        ></TaCell>
        <TaCell
          label="单元格"
          content="内容"
          description="描述信息"
          isLink
        ></TaCell>
      </TaGroup>
      <TaGroup title="其他">
        <TaCell
          label="必填"
          content="内容"
          isLink
          arrowDirection="down"
          required
        ></TaCell>
      </TaGroup>
      <TaGroup title="事件监听">
        <TaCell
          label="单元格"
          content="内容"
          description="描述信息"
          isLink
          onClick={() => console.log('点击事件')}
        ></TaCell>
      </TaGroup>
      <TaGroup title="Slot default">
        <TaCell label="右侧图标" content="内容">
          <TaIcon icon="CloseOutlined" />
        </TaCell>
        {/* <TaCell checkbox>
          <div className="exp-cell-user-item">
            <TaImage
              className="exp-cell-user-item-avatar"
              src="https://cdn.fox2.cn/vfox/swiper/center-2.jpg"
              mode="aspectFill"
            />
            <span className="exp-cell-user-item-nickname">小明</span>
          </div>
        </TaCell> */}
      </TaGroup>
      {/* <TaGroup title="Slot icon">
    <TaCell checkbox>
      <div className="exp-cell-user-item">
        <TaImage
          className="exp-cell-user-item-avatar"
          src="https://cdn.fox2.cn/vfox/swiper/center-2.jpg"
          mode="aspectFill"
        />
        <span className="exp-cell-user-item-nickname">小明</span>
      </div>
      <template #icon>
        <TaCheckbox circle @change="onCheckboxChange" />
      </template>
    </TaCell>
  </TaGroup> */}
    </>
  )
}

Import 

import { TaCell } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

import type { CellArrowDirection } from 'tantalum-ui-mobile-react'

Props

属性类型默认值必填说明
labelstring是左侧文字
descriptionstring否左侧附加描述文字
contentstring否右侧文字
requiredbooleanfalse否true 在左侧文字边上会展示一个 红色*箭头
clickablebooleanfalse否是否开启点击反馈
isLinkbooleanfalse否是否展示右侧箭头并开启点击反馈
arrowDirectionCellArrowDirection'right'否isLink=true 时展示的箭头方向，可选值：'right', 'up', 'down', 'left'

Slots

内容区（children） 

<TaCell label="右侧图标">
  <TaIcon icon="CloseOutlined" />
</TaCell>

注：添加 slot 后 content prop 属性失效。