Minimalist UI

Button 按钮

引入组件

<template>
  <div>
    <m-button>按钮</m-button>
  </div>
</template>

<script>
  import { MButton } from "@csr/m_ui";
  export default {
    components: {
      MButton
    }
  }
</script>

基础用法

  • 按钮 按钮 按钮 按钮 按钮 按钮
  • 按钮 按钮 按钮 按钮 按钮 按钮
代码
<m-button>按钮</m-button>
<m-button :options="{color: 'green'}">按钮</m-button>
<m-button :options="{color: 'blue'}">按钮</m-button>
<m-button :options="{color: 'yellow'}">按钮</m-button>
<m-button :options="{color: 'red'}">按钮</m-button>
<m-button :options="{color: 'purple'}">按钮</m-button>

<m-button :options="{type: 'solid'}">按钮</m-button>
<m-button :options="{color: 'green', type: 'solid'}">按钮</m-button>
<m-button :options="{color: 'blue', type: 'solid'}">按钮</m-button>
<m-button :options="{color: 'yellow', type: 'solid'}">按钮</m-button>
<m-button :options="{color: 'red', type: 'solid'}">按钮</m-button>
<m-button :options="{color: 'purple', type: 'solid'}">按钮</m-button>

不同的圆角

  • 按钮 按钮 按钮
代码
<m-button>按钮</m-button>
<m-button :options="{color: 'green', shape: 'rounded'}">按钮</m-button>
<m-button :options="{color: 'blue', shape: 'pill'}">按钮</m-button>
<m-button :options="{color: 'purple', shape: 'circle', icon: 'search'}"></m-button>

禁用状态

  • 禁用
代码
<m-button :options="{shape: 'rounded', disable: true}">禁用</m-button>

带有图标的按钮

  • 搜索 删除 加载中
代码
<m-button :options="{shape:'rounded', icon:'search'}">搜索</m-button>
<m-button :options="{icon:'delete', iconPosition:'right', type:'solid'}">删除</m-button>
<m-button :options="{color:'yellow', shape:'rounded', isLoading:true, type:'solid'}">加载中</m-button>

通过slot设置图标

  • 自定义图标 自定义图标
代码
<m-button :options="{shape: 'rounded', iconPosition:'left'}">
  <template v-slot:prefix>
    <m-icon icon="upload"></m-icon>
  </template>
  自定义图标
</m-button>
<m-button :options="{shape: 'rounded', iconPosition:'right'}">
  自定义图标
  <template v-slot:prefix>
    <m-icon icon="date"></m-icon>
  </template>
</m-button>

API

属性 说明 类型 默认值
options button的所有配置都是通过该属性设置，详细属性参考options表 object { type: "hollow", shape: "default", color: "black", disable: false, icon: "", iconPosition: "left", isLoading: false }

options

属性 说明 类型 默认值
type 类型, 可选值：hollow（空心）， solid（实心） string hollow
shape 圆角样式, 可选值：default(直角), rounded（圆角），pill（胶囊类型），circle（圆形） string default
color 颜色, 可选值：black，green，blue，yellow，red，purple string black
disable 是否禁用, 可选值：ture，false boolean false
icon 图标名, 可选值：参考icon组件 string ''
iconPosition 图标位置, 可选值：left，right string left
isLoading 是否loading状态 boolean false

事件

事件名 说明 回调参数
click 点击button时触发的事件 (event: Event)

← ButtonGroup 按钮组 →