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!
推薦閱讀:
- axios攔截器、ElementUI組件的使用方法
- Ant Design 組件庫按鈕實現示例詳解
- vue3集成Element-plus實現按需自動引入組件的方法總結
- 解決Element-ui radio單選框label佈爾/數值的一個坑
- 一文解決微信小程序button、input和image表單組件