button 按钮

按钮组件是用户界面中常见的交互元素，用于触发特定的操作或执行特定的功能。

Props参数

名称	类型	是否必传	默认值	描述
color	string	否	-	按钮颜色
ghost	boolean	否	-	是否为幽灵按钮
loading	boolean	否	-	加载状态
type	MMButtonType | keyof typeof MMButtonType	否	-	按钮类型
size	MMButtonSize | keyof typeof MMButtonSize	否	-	按钮大小
disabled	boolean	否	-	禁用
block	boolean	否	-	是否为block元素
text	ReactNode	否	-	文字
radius	boolean | number	否	-	圆角 设置为true.则携带默认圆角。 传递为数字则表示为指定值
onClick	(event: ITouchEvent) => void | Promise<any>	否	-	点击事件 返回的是promise 未运行完毕不会触发第二次

示例

import { useState } from 'react'
import MMButton from '~/components/button'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'
import MMSpace from '~/components/space'

export default () => {
  const [number, setNumber] = useState(0)
  const [loading, setLoading] = useState(false)
  const [number1, setNumber1] = useState(0)

  const handleClick = () => {
    setNumber((pre) => pre + 1)
  }

  const handleLockClick = async () => {
    const asyncFn = () =>
      new Promise<void>((resolve) => {
        setTimeout(() => {
          resolve()
        }, 2000)
      })

    setLoading(true)
    await asyncFn()
    setLoading(false)
    setNumber1((pre) => pre + 1)
  }

  return (
    <MMPageContainer title="按钮">
      <PageDemoBlock title="按钮类型">
        <MMSpace>
          <MMButton>主要按钮</MMButton>
          <MMButton type="default">默认按钮</MMButton>
          <MMButton type="warning">警告按钮</MMButton>
        </MMSpace>
      </PageDemoBlock>

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

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

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

      <PageDemoBlock title="点击事件">
        <MMSpace>
          <MMButton onClick={handleClick}>点击({number})</MMButton>
          <MMButton onClick={handleLockClick} loading={loading}>
            函数锁({number1})
          </MMButton>
        </MMSpace>
      </PageDemoBlock>

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

      <PageDemoBlock title="圆角/直角">
        <MMSpace>
          <MMButton radius={false}>主要</MMButton>
          <MMButton radius={21}>警告按钮</MMButton>
        </MMSpace>
      </PageDemoBlock>

      <PageDemoBlock title="设置颜色">
        <MMSpace>
          <MMButton color="#07c160" text="#07c160" />
          <MMButton color="linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36))">渐变颜色</MMButton>
        </MMSpace>
      </PageDemoBlock>

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