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

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!

You may also be interested in:
  • Detailed explanation of a point to note about using $attrs in element el-button
  • Generate el-button example code using render function in el-tree component of element-ui
  • How to add custom colors and icons to the el-button component of element-ui

<<:  MySQL slow query pt-query-digest analysis of slow query log

>>:  4 Scanning Tools for the Linux Desktop

Recommend

Solution to MySQL unable to read table error (MySQL 1018 error)

1. Error reproduction I can access the MySQL data...

Vue implements the frame rate playback of the carousel

This article example shares the specific code of ...

Detailed explanation of CSS3+JS perfect implementation of magnifying glass mode

About a year ago, I wrote an article: Analysis of...

Detailed explanation of Linux lsof command usage

lsof (list open files) is a tool to view files op...

mysql uses stored procedures to implement tree node acquisition method

As shown in the figure: Table Data For such a tre...

Detailed explanation of Vue-router nested routing

Table of contents step 1. Configure routing rules...

The difference between datatime and timestamp in MySQL

There are three date types in MySQL: date(year-mo...

React Router V6 Updates

Table of contents ReactRouterV6 Changes 1. <Sw...

Detailed tutorial on installing phpMyAdmin on Ubuntu 18.04

We will install phpMyAdmin to work with Apache on...

An example of refactoring a jigsaw puzzle game using vue3

Preface It took two days to reconstruct a puzzle ...

Detailed steps for running springboot project in Linux Docker

Introduction: The configuration of Docker running...

A brief talk about JavaScript parasitic composition inheritance

Composition inheritance Combination inheritance i...