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 布局中的分栏布局,会根据设置的列数自动布局
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步