MMButton 按钮

按钮用于开始一个即时操作

Props

IButtonProps

属性	类型	默认值	必传	说明
color	string		否	按钮颜色
ghost	boolean		否	是否为幽灵按钮
loading	boolean		否	加载状态
type	MMButtonType | keyof typeof MMButtonType		否	按钮类型
size	MMButtonSize | keyof typeof MMButtonSize		否	按钮大小
disabled	boolean		否	禁用
block	boolean		否	是否为 block 元素
text	string		否	文字
radius	boolean | number		否	圆角
backGround	string		否	背景
noBorder	boolean		否	没有边框
onClick	(event: ITouchEvent) => void | Promise<any>		否	点击事件

代码示例

/* eslint-disable no-console */
import { Component } from "react";
import MMButton from "../../components/button";
import MMPageContainer from "../../components/pageComponents/pageContainer";
import PageDemoBlock from "../../components/pageComponents/pageDemoBlock";
import MMSpace from "../../components/space";
import { Text, View } from "@tarojs/components";
import { styleVar } from "../../components/styles/themes/styleVar";

export default class Index extends Component {
  state = {
    number: 0,
  };

  onClick() {
    this.setState({
      number: this.state.number + 1,
    });
  }

  render() {
    return (
      <MMPageContainer title="MMButton 按钮">
        <PageDemoBlock title="按钮类型">
          <MMSpace>
            <MMButton
              text="主要按钮"
              onClick={async () => {
                console.log("点击了主要按钮");

                return new Promise<void>((resolve) => {
                  setTimeout(() => {
                    resolve();
                  }, 1000);
                });
              }}
            />
            <MMButton type="default" text="默认按钮" />
            <MMButton type="warning" text="警告按钮" />
          </MMSpace>
        </PageDemoBlock>

        <PageDemoBlock title="描边样式">
          <MMSpace>
            <MMButton ghost text="主要按钮" />
            <MMButton type="default" ghost text="默认按钮" />
            <MMButton type="warning" ghost text="警告按钮" />
          </MMSpace>
        </PageDemoBlock>

        <PageDemoBlock title="禁用">
          <MMSpace>
            <MMButton disabled text="主要按钮" />
            <MMButton type="default" disabled text="默认按钮" />
            <MMButton type="warning" disabled text="警告按钮" />
          </MMSpace>
        </PageDemoBlock>

        <PageDemoBlock title="加载">
          <MMSpace>
            <MMButton loading text="主要" />
            <MMButton type="warning" loading text="警告按钮" />
          </MMSpace>
        </PageDemoBlock>

        <PageDemoBlock title="圆角">
          <MMSpace>
            <MMButton radius={false} text="禁用圆角" />
            <MMButton radius={4} text="4px圆角" />
          </MMSpace>
        </PageDemoBlock>

        <PageDemoBlock title="颜色">
          <MMSpace>
            <MMButton color="#07c160" text="#07c160" />
            <MMButton
              color="linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36))"
              text="渐变颜色"
            />
          </MMSpace>
          <View>
            <Text style={{ color: styleVar.gray4, fontSize: 12 }}>
              RN 不支持渐变色。如果要实现。请使用expo-linear-gradient
            </Text>
          </View>
        </PageDemoBlock>

        <PageDemoBlock title="尺寸">
          <MMSpace>
            <MMButton size="tiny" text="tiny" />
            <MMButton size="small" text="small" />
            <MMButton text="default" />
            <MMButton size="large" text="large" />
          </MMSpace>
        </PageDemoBlock>

        <PageDemoBlock title="块级">
          <MMButton block text="block" />
        </PageDemoBlock>
      </MMPageContainer>
    );
  }
}