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

Detailed explanation of views in MySQL

view: Views in MySQL have many similarities with ...

Vue uses Baidu Maps to realize city positioning

This article shares the specific code of Vue usin...

How to monitor Windows performance on Zabbix

Background Information I've been rereading so...

Common problems in implementing the progress bar function of vue Nprogress

NProgress is the progress bar that appears at the...

MySQL latest version 8.0.17 decompression version installation tutorial

Personally, I think the decompressed version is e...

Detailed graphic explanation of how to use svg in vue3+vite project

Today, in the practice of vue3+vite project, when...

Implementation of CSS Fantastic Border Animation Effect

Today I was browsing the blog site - shoptalkshow...

Advanced techniques for using CSS (used in actual combat)

1. The ul tag has a padding value by default in Mo...

A simple and in-depth study of async and await in JavaScript

Table of contents 1. Introduction 2. Detailed exp...

The implementation of event binding this in React points to three methods

1. Arrow Function 1. Take advantage of the fact t...

A brief analysis of HTML space code

How much do you know about HTML? If you are learni...

A simple way to achieve scrolling effect with HTML tag marquee (must read)

The automatic scrolling effect of the page can be...

How to install FastDFS in Docker

Pull the image docker pull season/fastdfs:1.2 Sta...

Detailed explanation of several storage methods of docker containers

Table of contents Written in front Several storag...