Button

简易介绍

button按钮，基础组件经典交互元素，常用的操作按钮，可以用于表单提交等地方。 可以使用<MYButton></MYButton>或者<MYButton />来实现一个按钮

关于颜色的使用

type

在MYButton中使用type可以实现按钮的颜色定义，这些颜色是mengyue-components提供的基本颜色定义。例如使用type完成下面的颜色定义,如果不写type默认是透明颜色:

代码演示

注意: 演示效果有一定的放大元素，具体尺寸请阅读下面关于尺寸的描述

<template>
    <MYButton>Default按钮</MYButton>
    <MYButton type='primary'>primary按钮</MYButton>
    <MYButton type='success'>Success按钮</MYButton>
    <MYButton type='warning'>Warning按钮</MYButton>
    <MYButton type='danger'>Danger按钮</MYButton>
    <MYButton type='info'>Info按钮</MYButton>
</template>

展开代码

colorBackground

当然，如果上面的颜色不满足需求，还可以自定义颜色，使用colorBackground自定义按钮背景颜色 例如这里使用红色背景：

代码演示

如果使用了colorBackground api,那么type属性将会被colorBackground属性覆盖掉

<template>
    <MYButton colorBackground='#ff0000'>十六进制自定义红色背景按钮</MYButton>
    <MYButton colorBackground='red'>单词自定义红色背景按钮</MYButton>
</template>

展开代码

colorText

MYButton按钮也支持自定义文本颜色，这里使用colorText自定义按钮文字颜色

代码演示

<template>
    <MYButton colorText='#ff0000'>十六进制自定义红色文本按钮</MYButton>
    <MYButton colorText='red'>单词自定义红色文本按钮</MYButton>
</template>

展开代码

colorBorder

自定义按钮边框颜色，这里使用colorBorder自定义按钮边框颜色

代码演示

<template>
    <MYButton colorBorder='#FF7F50'>十六进制自定义橙色边框按钮</MYButton>
    <MYButton colorBorder='orange'>单词自定义橙色边框按钮</MYButton>
</template>

展开代码

plain

使用plain属性可以把按钮渲染为透明样式，配合上面的自定义颜色实现不一样的样式

代码演示

注意: 演示效果有一定的放大元素，具体尺寸请阅读下面关于尺寸的描述

<template>
    <MYButton plain>Default按钮</MYButton>
    <MYButton plain type='primary'>primary按钮</MYButton>
    <MYButton plain type='success'>Success按钮</MYButton>
    <MYButton plain type='warning'>Warning按钮</MYButton>
    <MYButton plain type='danger'>Danger按钮</MYButton>
    <MYButton plain type='info'>Info按钮</MYButton>
</template>

展开代码

关于圆角

rounded

使用round可以把按钮变成圆角

代码演示

<template>
    <MYButton rounded>圆角按钮</MYButton>
</template>

展开代码

circular

使用circular可以把按钮变成圆形

代码演示

circular属性和rounded属性不能同时使用

<template>
    <MYButton circular>A</MYButton>
</template>

展开代码

关于尺寸

size

使用size属性可以支持调整按钮大小

代码演示

注意: 演示效果有一定的放大元素，具体尺寸请阅读下面关于尺寸的描述

<template>
    <MYButton size='supersmall'>supersmall按钮</MYButton>
    <MYButton size='small'>small按钮</MYButton>
    <MYButton size='medium'>medium按钮</MYButton>
    <MYButton size='large'>large按钮</MYButton>
    <MYButton size='superbig'>superbig按钮</MYButton>
</template>

展开代码

关于禁用

disabled

使用disabled可以支持禁用按钮

代码演示

<template>
    <MYButton disabled>禁用按钮</MYButton>
</template>

展开代码

插入图标

使用icon属性可以支持插入图标

代码演示

<template>
    <MYButton icon="MYPlus">带图标的按钮</MYButton>
</template>

展开代码

最后，实现个多种api组合使用实现个按钮：

代码演示

<template>
    <MYButton
        size='superbig'
        rounded
        plain
        colorBorder='#FF7F50'
        colorBackground='#8d4dd1'
        colorText='red'
    >组合按钮</MYButton>
</template>

展开代码

API 参考

Props

参数	说明	类型	可选值	默认值
type	按钮类型	string	primary/success/warning/danger/info	—
size	按钮尺寸	string	supersmall/small/medium/large/superbig	medium
plain	是否为朴素按钮	boolean	—	false
rounded	是否为圆角按钮	boolean	—	false
circular	是否为圆形按钮	boolean	—	false
disabled	是否禁用	boolean	—	false
colorBackground	背景色	string	支持16进制颜色或单词颜色	—
colorText	文字颜色	string	支持16进制颜色或单词颜色	false
colorBorder	边框颜色	string	支持16进制颜色或单词颜色	—
tag	渲染标签	string	持所有 HTML 标签	button

类型定义

interface ButtonProps {
  type?: string;
  size?: string;
  plain?: boolean;
  rounded?: boolean;
  circular?: boolean;
  disabled?: boolean;
  colorBackground?: string;
  colorText?: string;
  colorBorder?: string;
  iconOnly?: boolean;
  tag?: string;
}