Tantalum UI

Appearance

Return to top
On this page

Cell 单元格

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

vue
<template>
  <ta-group title="基础用法">
    <ta-cell label="单元格" content="内容"></ta-cell>
    <ta-cell label="单元格" content="内容" description="描述信息"></ta-cell>
  </ta-group>
  <ta-group title="包含图标">
    <ta-cell label="单元格" content="内容" icon="EditOutlined"></ta-cell>
    <ta-cell label="单元格" content="内容" description="描述信息" icon="EditOutlined"></ta-cell>
  </ta-group>
  <ta-group title="展示箭头">
    <ta-cell label="单元格" isLink></ta-cell>
    <ta-cell label="单元格" content="内容" isLink arrow-direction="down"></ta-cell>
    <ta-cell label="单元格" content="内容" isLink arrow-direction="left"></ta-cell>
    <ta-cell label="单元格" description="描述信息" isLink arrow-direction="up"></ta-cell>
    <ta-cell label="单元格" content="内容" description="描述信息" isLink></ta-cell>
  </ta-group>
  <ta-group title="其他">
    <ta-cell label="必填" content="内容" isLink arrow-direction="down" required></ta-cell>
  </ta-group>
  <ta-group title="事件监听">
    <ta-cell
      label="单元格"
      content="内容"
      description="描述信息"
      isLink
      @click="showToast('点击事件')"
    ></ta-cell>
  </ta-group>
  <ta-group title="Slot default">
    <ta-cell label="右侧图标" content="内容">
      <ta-icon icon="CloseOutlined"></ta-icon>
    </ta-cell>
    <ta-cell>
      <div class="exp-cell-user-item">
        <ta-image
          class="exp-cell-user-item-avatar"
          src="https://cdn.fox2.cn/vfox/swiper/center-2.jpg"
          mode="aspectFill"
        />
        <span class="exp-cell-user-item-nickname">小明</span>
      </div>
    </ta-cell>
  </ta-group>
  <ta-group title="Slot icon">
    <ta-cell>
      <div class="exp-cell-user-item">
        <ta-image
          class="exp-cell-user-item-avatar"
          src="https://cdn.fox2.cn/vfox/swiper/center-2.jpg"
          mode="aspectFill"
        />
        <span class="exp-cell-user-item-nickname">小明</span>
      </div>
      <template #icon>
        <ta-checkbox circle @change="onCheckboxChange" />
      </template>
    </ta-cell>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { showToast } from '@/index'

export default defineComponent({
  name: 'ExpCell',
  setup() {
    const onCheckboxChange = (checked: boolean) => {
      console.log('change', checked)
      showToast(checked ? '勾选' : '取消勾选')
    }

    return {
      showToast,
      onCheckboxChange
    }
  }
})
</script>

Import

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

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

Import Type

组件导出的类型定义：

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

Props

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

Slots

内容区（#default）

vue
<ta-cell label="右侧图标">
  <ta-icon icon="CloseOutlined"></ta-icon>
</ta-cell>

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