A detailed introduction to the ElementUI component library

This article brings you relevant knowledge about vue, which mainly introduces related issues about the ElementUI component library. The ElementUI component library is a set of desktop component libraries based on vue2.0 , provides a wealth of components to help developers quickly build pages. Let’s take a look at them. I hope it will be helpful to everyone.

【Related recommendations: javascript video tutorial, vue.js tutorial】

ElementUI introduction

ElementUI is a set of desktop component libraries based on VUE2.0. ElementUI provides a rich set of components to help developers quickly build pages with powerful functions and unified styles.

Official website address: http://element-cn.eleme.io/#/zh-CN

Introduce js and css files on the page to start using it, as follows:

Container Layout Container

Container component used for layout, convenient for quickly building the basic structure of the page:

: outer container . When the child elements contain or , all child elements will be arranged vertically up and down, otherwise they will be arranged horizontally left and right

：Top bar container

：Side bar container

< ;el-main>：Main area container

：Bottom column container

  

    
      Header
      
        Aside
        
          Main
          Footer
        
      
    
  
  

Dropdown drop-down menu

Collapse an action or menu into a drop-down menu.

  个人中心
  
    退出系统
    修改密码
    联系管理员
  

NavMenu Navigation Menu

A menu that provides navigation functions for the website.

  
    
    选项1
    选项2
    选项3
  
  
    
    选项1
    选项2
    选项3
  

Table Table

is used to display multiple pieces of data with similar structure. The data can be sorted, filtered, compared or other customized operations.

Pagination Pagination

When the amount of data is too large, use paging to break down the data.

Message message prompt

is often used as a feedback prompt after active operations.

消息
成功
警告
错误

Tabs Tab page

Separate data collections that are related in content but belong to different categories.

基础的、简洁的标签页


  用户管理
  配置管理
  角色管理
  定时任务补偿

选项卡样式的标签页

  用户管理
  配置管理
  角色管理
  定时任务补偿

卡片化的标签页

  用户管理
  配置管理
  角色管理
  定时任务补偿

Form Form

is composed of input boxes, selectors, radio buttons, multi-select boxes and other controls, and is used to collect, verify and submit data. In the Form component, each form field is composed of a Form-Item component. Various types of form controls can be placed in the form field, including Input, Select, Checkbox, Radio, Switch, DatePicker, and TimePicker.

  
  
    
  
  
    
      
      
    
  
  
    
      
    
    -
    
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
  

【Related recommendations: javascript video tutorial, vue.js tutorial】

The above is the detailed content of A detailed introduction to the ElementUI component library. For more information, please follow other related articles on the PHP Chinese website!