Element el-button 按鈕組件的使用詳解

1. 背景

按鈕是很常用的,Element的按鈕功能還是比較全面的,本篇就來介紹下。

先看下各種按鈕的效果圖:

在分析源碼前,我們先來看一下官方文檔對於button的使用說明:

2. 按鈕分類

el-button按鈕的分類基本是靠顏色區分的,另外還有一種文本按鈕type=”text”,文本按鈕由於比較小,比較適合用於表格每行的操作欄部分。

按鈕分類:

  <el-button>默認</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. 按鈕樣式

Element提供瞭樸素按鈕、圓角按鈕、圓形按鈕,需要註意的是圓形按鈕一般隻放一個圖標進去,代碼如下:

按鈕樣式:

  <el-button type="primary" plain>樸素按鈕</el-button>
  <el-button type="primary" round>圓角按鈕</el-button>
  <el-button type="primary" circle icon="el-icon-search"></el-button>

4. 按鈕狀態

按鈕狀態其實就是HTML標準的功能,通過disabled實現禁用即可。

按鈕狀態:

<el-button type="primary">正常</el-button>
<el-button type="primary" disabled>禁用</el-button>

5. 按鈕分組

按鈕分組很好用,像常見的分頁按鈕,分成一組的話更加好看,通過<el-button-group>將按鈕包裹起來,即可實現。

按鈕分組:

  <el-button-group>
   <el-button type="primary" icon="el-icon-arrow-left">上一頁</el-button>
   <el-button type="primary">下一頁<i class="el-icon-arrow-right el-icon--right"></i></el-button>
  </el-button-group>

6. 按鈕尺寸

餓瞭提供瞭默認、中、小、很小四種尺寸,代碼如下:

  按鈕的尺寸:

<el-button>默認</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. 小結

el-button提供的功能已經比較完善瞭,拿來即可即可。註意不推薦自己定義style來修改默認樣式,容易導致外觀不統一。

到此這篇關於Element el-button 按鈕組件的使用詳解的文章就介紹到這瞭,更多相關Element el-button 按鈕組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!