Button 按钮

Button 组件提供了不同的按钮风格以及状态、尺寸等选项。

按钮风格

Clair 提供了默认按钮、主操作和危险操作三种配色的按钮；同时，有圆角、线框和扁平（flat）三种风格可以选择。

<p>
  <c-button>默认按钮</c-button>
  <c-button round>圆角风格</c-button>
  <c-button outline>线框风格</c-button>
  <c-button outline round>圆角线框</c-button>
  <c-button flat>扁平按钮</c-button>
</p>
<p>
  <c-button primary>主要操作</c-button>
  <c-button primary round>圆角风格</c-button>
  <c-button primary outline>线框风格</c-button>
  <c-button primary outline round>圆角线框</c-button>
  <c-button primary flat>扁平按钮</c-button>
</p>
<p>
  <c-button success>正向操作</c-button>
  <c-button success round>圆角风格</c-button>
  <c-button success outline>线框风格</c-button>
  <c-button success outline round>圆角线框</c-button>
  <c-button success flat>扁平按钮</c-button>
</p>
<p>
  <c-button warning>警告操作</c-button>
  <c-button warning round>圆角风格</c-button>
  <c-button warning outline>线框风格</c-button>
  <c-button warning outline round>圆角线框</c-button>
  <c-button warning flat>扁平按钮</c-button>
</p>
<p>
  <c-button danger>危险操作</c-button>
  <c-button danger round>圆角风格</c-button>
  <c-button danger outline>线框风格</c-button>
  <c-button danger outline round>圆角线框</c-button>
  <c-button danger flat>扁平按钮</c-button>
</p>

在按钮中使用图标

使用 icon 属性指定按钮文字前展示的图标。Clair 内置的图标请参考图标。

<div>
  <c-button primary icon="send">提交</c-button>
  <c-button icon="arrow-left">返回</c-button>
  <c-button outline icon="download"></c-button>
  <c-button danger outline round icon="trash"></c-button>
  <c-button flat icon="star">收藏</c-button>
</div>

链接按钮

有时候某些按钮点击后需要跳转到某一个链接，你可以使用 href 属性来实现。

<c-button href="/" icon="home" primary>返回首页</c-button>

禁用 (disabled) 状态

使用 disabled 属性可将一个按钮禁用。

<c-button disabled>普通按钮</c-button>
<c-button disabled outline>线框按钮</c-button>
<c-button primary disabled>主操作按钮</c-button>
<c-button primary disabled outline>线框主操作按钮</c-button>
<c-button danger disabled>危险按钮</c-button>
<c-button danger disabled outline>危险线框</c-button>
<c-button disabled flat>扁平按钮</c-button>

不同尺寸

Clair 提供了五种尺寸的按钮，在不同的场景下使用：

页面上的普通表单建议使用正常尺寸的按钮
浮层中的表单或者页面空间比较局促的时候，可以使用小号按钮
较大尺寸的按钮一般使用在具有强烈的点击召唤的场合，与之搭配的应该是较大的字体和留白

给 c-button 设置 size 属性即可控制其尺寸，它的值可以是 xs sm md lg xl 中的一个。如果不设置该属性，则默认尺寸中普通大小，即md。不同尺寸的按钮实际高度如下：

按钮尺寸	xs	sm	md	lg	xl
实际高度	22	26	32	40	48

<c-button primary size="xs">超小按钮</c-button>
<c-button primary size="sm">小号按钮</c-button>
<c-button primary>普通按钮</c-button>
<c-button primary outline size="lg">大号按钮</c-button>
<c-button primary outline size="xl">超大号按钮</c-button>

加载中

给 c-button 设置 loading 属性即可将其置为加载中的状态。注意：加载中的按钮并没有被禁用，如果需要在加载中状态下禁用按钮的交互行为，需要自行处理。另外，如果按钮设置了图标，在加载中状态下，原有图标会被 loading 图标代替。

<c-button loading>加载中</c-button>
<c-button loading primary outline round>正在提交</c-button>
<c-button danger loading flat>正在删除</c-button>

按钮组

将几个 c-button 放在一个 c-button-group 中，可以将他们以「按钮组」的形式展现。通过 size 属性也可以控制这一组按钮的尺寸。

<c-button-group size="sm">
  <c-button>加粗</c-button>
  <c-button>斜体</c-button>
  <c-button>下划线</c-button>
</c-button-group>

<c-button-group>
  <c-button outline icon="twitter"></c-button>
  <c-button outline icon="facebook"></c-button>
  <c-button outline icon="github"></c-button>
</c-button-group>

<c-button-group>
  <c-button primary icon="bold"></c-button>
  <c-button primary icon="italic"></c-button>
  <c-button primary icon="repeat"></c-button>
</c-button-group>

<c-button-group>
  <c-button primary outline>A</c-button>
  <c-button primary outline>B</c-button>
  <c-button primary outline>C</c-button>
</c-button-group>

<c-button-group size="lg">
  <c-button danger>A</c-button>
  <c-button danger>B</c-button>
  <c-button danger>C</c-button>
</c-button-group>

<c-button-group size="lg">
  <c-button danger outline>A</c-button>
  <c-button danger outline>B</c-button>
  <c-button danger outline>C</c-button>
</c-button-group>

属性说明

`c-button` 属性

属性	类型	默认值	说明
primary	Boolean	false	是否主要操作按钮(以蓝色显示)
success	Boolean	false	是否正向操作按钮(以绿色显示)
warning	Boolean	false	是否警告操作按钮(以黄色显示)
danger	Boolean	false	是否危险操作按钮(以红色显示)
size	String	'md'	尺寸，可以取 `xs`、 `sm`、 `md`、 `lg`、 `xl`
outline	Boolean	false	是否线框样式
round	Boolean	false	是否圆角
icon	String	null	显示 FontAwesome 图标
loading	Boolean	false	是否显示 loading 图标
href	String	null	点击后跳转 URL，依赖 Vue-Router

`c-button-group` 属性

属性	类型	默认值	说明
size	String	'md'	尺寸，可以取 `xs`、 `sm`、 `md`、 `lg`、 `xl`