Element-UI 使用心得之el-card


el-card 是Element-UI  內置的卡片組件,使用起來很方便,但是對Vuejs和html 不是精通的話,根據自己的要求布局,會出現自己的小困惑,必須添加垂直居中,按照CSS 布局設置,總是 不起作用,與其費力搜尋辦法,不如自己簡單白痴的去設置一下

 

 

 

1.鼠標放上去有一個動畫效果:

.el-card {
min-width: 380px;
margin-right: 20px;
transition: all .5s;
}
.el-card:hover{
margin-top: -5px;
}
2.第三個卡片中的按鈕,做到水平垂直效果  :繼承原來的布局屬性,加上自己的布局設置

<el-card class="box-card " style="min-height: 200px;" align="middle" onclick="">
<div class="el-card__body mid">
<el-button icon="el-icon-circle-plus" circle></el-button>
<el-button style="margin-left: 0;color: #505458" type="text">添加APP</el-button>
</div>
.mid{
margin-top: 25%;
height: 50%;
}
 

3.當顯示多個卡片時,一直水平排列 ,不能夠自動換行,這時候 只能在外層使用 Layout  布局中的分欄布局,會根據設置的列數自動布局

  


免責聲明!

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



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