cell 单元格

单元格组件（Cell component）是一种用于显示表格中单个单元格内容的UI组件。它通常用于构建数据表格或网格布局，并在每个单元格中呈现特定的数据或信息。

Props参数

名称	类型	是否必传	默认值	描述
title	ReactNode	否	-	左侧标题
icon	ReactNode	否	-	左侧icon
arrow	boolean	否	-	是否显示箭头
arrowStyle	CSSProperties	否	-	箭头样式
name	string	否	-	名称
用于跟cellGroup 配合使用时触发cellGroup组件的onClick事件
size	ComponentSize	否	-	组件size
border	boolean	否	false	·
是否显示底部边框
placeholder	ReactNode	否	-	占位符
titleAlign	'top' | 'center' | 'bottom' | 'baseline'	否	center	标题对齐方式
valueAlign	'left' | 'center' | 'right'	否	right	值文本对齐方式
'right' - 右侧对齐	'left'- 左侧对齐	center-居中
noStyle	boolean	否	-	无样式
在配合类型弹窗组件或者card组件时。需要去除部分样式 去除左右padidng
onClick	() => void	否	-	点击事件

示例

import { Image, View } from '@tarojs/components'
import MMCell from '~/components/cell'
import MMSpace from '~/components/space'
import MMIconFont from '~/components/icon-font'
import MMIconFontName from '~/components/icon-font/const'
import pocket from './pocket.png'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'

/**
 * Overlay 遮罩层
 *
 * 创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。
 */
export default () => {
  return (
    <MMPageContainer title="单元格">
      <PageDemoBlock title="基础使用" />
      <View className="spacing" />
      <MMCell title="单元格标题">内容</MMCell>
      <MMCell title="单元格" placeholder="设置右侧placeholder" />
      <MMCell title="带边框" border />
      <MMCell title="带箭头" arrow />
      <MMCell title="带icon" icon={<MMIconFont value={MMIconFontName.Admin} size={14} />} />

      <View className="spacing" />
      <PageDemoBlock title="尺寸">支持三种尺寸</PageDemoBlock>
      <MMSpace direction="column">
        <MMCell title="大 large" size="large" />
        <MMCell title="默认 default" size="default" />
        <MMCell title="小 small" size="small" />
      </MMSpace>

      <View className="spacing" />
      <PageDemoBlock title="内容对齐方式">内容可以设置对齐方式</PageDemoBlock>

      <MMSpace direction="column">
        <MMCell title="左对齐" valueAlign="left">
          left
        </MMCell>
        <MMCell title="居中" valueAlign="center">
          center
        </MMCell>
        <MMCell title="居右（默认）" valueAlign="right">
          right
        </MMCell>
      </MMSpace>

      <View className="spacing" />
      <PageDemoBlock title="标题对齐方式" />
      <MMSpace direction="column">
        <MMCell title="上对齐" titleAlign="top">
          <View style={{ height: 50 }}>1111</View>
        </MMCell>
        <MMCell title="居中" titleAlign="center">
          <View style={{ height: 50 }}>1111</View>
        </MMCell>
        <MMCell title="居下" titleAlign="bottom">
          <View style={{ height: 50 }}>1111</View>
        </MMCell>
      </MMSpace>

      <View className="spacing" />
      <PageDemoBlock title="高级">组件还支持一些高级自定义使用方法</PageDemoBlock>

      <MMSpace direction="column">
        <MMCell
          icon={<Image src={pocket} style={{ width: 19, height: 16 }} />}
          title={
            <View>
              <View
                style={{
                  fontSize: 12,
                  fontWeight: 400,
                  color: '#666666'
                }}
              >
                我的钱包
              </View>
              <View
                style={{
                  fontSize: 14,
                  color: '#333333'
                }}
              >
                ¥50
              </View>
            </View>
          }
          placeholder="提现"
          arrow
        />
      </MMSpace>
    </MMPageContainer>
  )
}