elementUI 按鈕美化


基礎用法

el-button經常與icon搭配使用,type屬性主要用於控制其顏色,plain屬性用於控制其風格,round、circle屬性用於控制其形狀,以下是一組增刪改查的按鈕示例:

 

<template>
  <div>
    <el-button icon="el-icon-circle-plus" type="primary">添加</el-button>
    <el-button round icon="el-icon-edit" type="warning">編輯</el-button>
    <el-button plain icon="el-icon-delete" type="danger">刪除</el-button>
    <el-button plain round icon="el-icon-view" type="view">查看</el-button>
    <el-button circle icon="el-icon-share" type="success"></el-button>
  </div>
</template>

 一組按鈕也可以放到同一個組件el-button-group中:

 

<template>
  <el-button-group>
    <el-button type="primary" icon="el-icon-d-arrow-left">快退</el-button>
    <el-button type="primary" icon="el-icon-caret-right">播放</el-button>
    <el-button type="primary" icon="el-icon-d-arrow-right">快進</el-button>
    <el-button type="primary" icon="el-icon-bell">音量</el-button>
    <el-button type="primary" icon="el-icon-menu">菜單</el-button>
  </el-button-group>
</template>

 

el-button屬性:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM