Detailed explanation of the use of Element el-button button component

1. Background

Buttons are very commonly used, and Element's button functions are quite comprehensive, which we will introduce in this article.

First look at the effect diagram of various buttons:

Before analyzing the source code, let's take a look at the official documentation for the use of button:

2. Button Classification

The classification of el-button buttons is basically distinguished by color. There is also a text button type="text". Since text buttons are relatively small, they are more suitable for the operation bar part of each row of the table.

Button categories:

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

3. Button Style

Element provides plain buttons, rounded buttons, and circular buttons. It should be noted that circular buttons usually only contain one icon. The code is as follows:

Button Style:

  <el-button type="primary" plain>Plain button</el-button>
  <el-button type="primary" round>Rounded button</el-button>
  <el-button type="primary" circle icon="el-icon-search"></el-button>

4. Button Status

The button state is actually a function of the HTML standard, which can be disabled by using disabled.

Button states:

<el-button type="primary">Normal</el-button>
<el-button type="primary" disabled>Disable</el-button>

5. Button Grouping

Button grouping is very useful. For example, common paging buttons look better when grouped together. This can be achieved by wrapping the buttons with <el-button-group>.

Button Grouping:

  <el-button-group>
   <el-button type="primary" icon="el-icon-arrow-left">Previous page</el-button>
   <el-button type="primary">Next page<i class="el-icon-arrow-right el-icon--right"></i></el-button>
  </el-button-group>

6. Button size

Hungry provides four sizes: default, medium, small, and very small. The code is as follows:

Button size:

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

7. Summary

The functions provided by el-button are already quite complete, so you can just use them. Note that it is not recommended to define your own style to modify the default style, which may easily lead to inconsistent appearance.

This is the end of this article about the detailed usage of the Element el-button button component. For more related Element el-button button component content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!