Honeycomb Design

# 按钮 Button

基础组件，触发业务逻辑时使用。

# 按钮类型

Default Primary Success Warning Danger Text
按钮类型

按钮有以下类型：主按钮，一般按钮，警告按钮，文字按钮

<title>按钮类型</title>
<describe>按钮有以下类型：主按钮，一般按钮，警告按钮，文字按钮</describe>
<template>
    <hc-button type="default">Default</hc-button>
    <hc-button type="primary" >Primary</hc-button>
    <hc-button type="success">Success</hc-button>
    <hc-button type="warning">Warning</hc-button>
    <hc-button type="danger">Danger</hc-button>
    <hc-button type="text">Text</hc-button>
</template>

# 禁用状态

Default Primary Danger Text
禁用状态

按钮不可用状态。

<title>禁用状态</title>
<describe>按钮不可用状态。</describe>
<template>
    <hc-button type="default" :disabled="true">Default</hc-button>
    <hc-button type="primary" :disabled="true">Primary</hc-button>
    <hc-button type="danger" :disabled="true">Danger</hc-button>
    <hc-button type="text" :disabled="true">Text</hc-button>
</template>

# 图标按钮

搜索
图标按钮

带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。

<title>图标按钮</title>
<describe>带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。</describe>
<template>
    <hc-button type="primary"><span class="el-icon-edit"></span></hc-button>
    <hc-button type="default"><span class="el-icon-share"></span></hc-button>
    <hc-button type="danger"><span class="el-icon-delete"></span></hc-button>
    <hc-button type="text"><span class="el-icon-search"></span> 搜索</hc-button>
</template>

# 加载中控制

Primary Default Danger Text
加载中

点击按钮后进行数据加载操作，在按钮上显示加载状态。

<title>加载中</title>
<describe>点击按钮后进行数据加载操作，在按钮上显示加载状态。</describe>
<template>
    <hc-button type="primary" :loading="true" loading-text="加载中">Primary</hc-button>
    <hc-button type="default" :loading="true">Default</hc-button>
    <hc-button type="danger" :loading="true">Danger</hc-button>
    <hc-button type="text" :loading="true">Text</hc-button>
</template>

# 不同尺寸

medium small mini
不同尺寸

Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

<title>不同尺寸</title>
<describe>Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。</describe>
<template>
    <hc-button type="primary" size="medium">medium</hc-button>
    <hc-button type="normal" size="small">small</hc-button>
    <hc-button type="danger" size="mini">mini</hc-button>
</template>

# 属性及事件

# HcButton属性

属性 说明 类型 可选值 默认值
type 按钮类型 string default/primary/success/warning/danger/text default
size 按钮显示大小 string medium/small/mini small
disabled 是否禁用，禁用状态无法触发事件 boolean -- false
loading 设置等待状态 boolean -- false
loading-text 自定义等待状态显示文本，默认显示按钮文本 string -- --
block 是否是块级 boolean -- false

# HcButton事件

名称 说明 参数
click 按钮点击事件 evt: 鼠标点击事件对象

# HcButton插槽

名称 说明
default 按钮内容插槽，可自定义按钮内容

← 图标 Icon →