element

6.4 KiB

Raw Blame History

基础用法

Button 组件默认提供7种主题，由type属性来定义，默认为default：

Default primary success warning danger info text button

你可以使用disabled属性来定义按钮是否可用，它接受一个Boolean值：

Default disabled

下面是他们的样例代码：

<el-button>Default</el-button>
<el-button type="primary">primary</el-button>
<el-button type="success">success</el-button>
<el-button type="warning">warning</el-button>
<el-button type="danger">danger</el-button>
<el-button type="info">info</el-button>
<el-button type="text">text button</el-button>
<el-button :disabled="true">disabled</el-button>

Plain Button

默认的Default主题，我们称之为朴素按钮(Plain Button)，朴素按钮同样设置了不同的type属性对应的样式（可选值同上），默认为info。

设置plain属性，它接受一个Boolean。

注意，在该情况下，type虽然可以为text，但是是没有意义的，会显示为text button的样式。

你可以 Hover 在样例上进行预览：

Default success warning danger disabled

<el-button :plain="true">Default</el-button>
<el-button :plain="true" type="success">success</el-button>
<el-button :plain="true" type="warning">warning</el-button>
<el-button :plain="true" type="danger">danger</el-button>
<el-button :plain="true" :disabled="true">disabled</el-button>

尺寸

Button 组件提供除了默认值以外的三种尺寸：large、small、mini来满足不同的需求，通过设置size属性来配置它们。

large Default small mini

<el-button type="primary" size="large">large</el-button>
<el-button type="primary">Default</el-button>
<el-button type="primary" size="small">small</el-button>
<el-button type="primary" size="mini">mini</el-button>

Loading

Button 组件提供的loading属性可以方便的让你处理 loading 状态，它接受一个Boolean，要设置为 loading 状态，只要设置loading属性为true即可，下面是一个样例：

Button

点击后变成 loading 状态的样例，尝试点击它：

Button Button

<el-button type="primary" :loading="true">Button</el-button>

<el-button type="primary" :loading="isLoading" @click.native="isLoading = true">Button</el-button>
<el-button type="primary" icon="search" :loading="isLoading2" @click.native="isLoading2 = true">Button</el-button>

图标按钮

理所当然的，Element 也支持图标按钮，设置icon属性即可，icon 的列表可以参考 Element 的 icon 组件，下面是简单的预览：

除此以外，你也可以设置在文字右边的 icon ，只要使用i标签即可，使用图标组件来实现它，由此，你可以使用自己的图标了：

Upload

<el-button type="primary" icon="edit"></el-button>
<el-button type="primary" icon="search">Search</el-button>
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>

按钮组

如果你需要多个并列的按钮，按钮组可以帮你轻松的实现它，使用<el-button-group>标签来嵌套你的按钮即可。

Button Button Button

<el-button-group>
  <el-button>Button</el-button>
  <el-button>Button</el-button>
  <el-button>Button</el-button>
</el-button-group>
<div></div>
<el-button-group>
  <el-button type="primary" icon="edit"></el-button>
  <el-button type="primary" icon="share"></el-button>
  <el-button type="primary" icon="delete"></el-button>
</el-button-group>

Attributes

参数	说明	类型	可选值	默认值
size	尺寸	string	large,small,mini
type	类型	string	primary,success,warning,danger,info,text
plain	是否朴素按钮	Boolean	true,false	false
disabled	禁用	boolean	true, false	false
icon	图标，已有的图标库中的图标名	string

6.4 KiB Raw Blame History Unescape Escape