zoukankan      html  css  js  c++  java
  • Element-UI 使用心得之el-card

    el-card 是Element-UI  内置的卡片组件,使用起来很方便,但是对Vuejs和html 不是精通的话,根据自己的要求布局,会出现自己的小困惑,必须添加垂直居中,按照CSS 布局设置,总是 不起作用,与其费力搜寻办法,不如自己简单白痴的去设置一下

     

    1.鼠标放上去有一个动画效果:

    .el-card {
    min- 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  布局中的分栏布局,会根据设置的列数自动布局

      

  • 相关阅读:
    Internet Explorer 安全区域注册表项说明
    Android强制设置横屏或竖屏
    SQLite to Asp.net Entity Framework 部署问题
    获取地里位置信息
    通信API、使用Web Workers处理线程
    本地存储、离线应用程序
    多媒体播放
    绘制图形
    表单与文件
    HTML5的结构
  • 原文地址:https://www.cnblogs.com/yelanggu/p/14700200.html
Copyright © 2011-2022 走看看