MMCell 单元格

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

Props

ICellProps

属性	类型	默认值	必传	说明
title	ReactNode		否	左侧标题
icon	ReactNode		否	左侧 icon
arrow	boolean		否	是否显示箭头
arrowStyle	CSSProperties		否	箭头样式
name	string		否	名称
size	ComponentSize		否	组件 size
border	boolean	false	否	是否显示底部边框
placeholder	ReactNode		否	占位符
titleAlign	'top' | 'center' | 'bottom' | 'baseline'	center	否	标题对齐方式
valueAlign	'left' | 'center' | 'right'	right	否	值文本对齐方式
noStyle	boolean		否	无样式
onClick	() => void		否	点击事件

ICellGroupProps

属性	类型	默认值	必传	说明
title	ReactNode		否	分组标题
onClick	(name: string, index: number) => void		否	点击事件

代码示例

import { memo, FC } from "react";
import { Image, View } from "@tarojs/components";
import styles from "./index.module.less";
import MMNavigation from "../../components/navigation";
import MMCell from "../../components/cell";
import { H2 } from "../../components/head";
import MMSpace from "../../components/space";
import MMIconFont from "../../components/icon-font";
import MMIconFontName from "../../components/icon-font/const";
import pocket from "./pocket.png";

// function MMSpace(props) {
//   return props.children
// }

/**
 * Overlay 遮罩层
 *
 * 创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。
 */
const Component: FC<any> = (props) => {
  return (
    <View className={styles.page}>
      <MMNavigation>单元格</MMNavigation>
      <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" />
      <H2 text="尺寸" />

      <MMSpace direction="column">
        <MMCell title="large" size="large" />
        <MMCell title="default" size="default" />
        <MMCell title="small" size="small" />
      </MMSpace>

      <View className="spacing" />
      <H2 text="内容对齐方式" />
      <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" />
      <H2 text="标题对齐方式" />
      <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" />
      <H2 text="高级" />
      <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>
    </View>
  );
};

const Overlay = memo(Component);
export default Overlay;