elementUi 组件01

2020-09-14 Html前端 PV:

ElementUI 组件

框架使用

在使用elemfentUI 的时候要配合Vue或者React脚本来使用，不然无法预览效果，我这里使用的vue 框架，所以
在html要实例化Vue,并且绑定到租间房父布局，例如：

<html > 
<head>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>

<div id="app">
  <el-button>
  登录  
  </el-button>
</div>

</body>

<script>
var vm=new Vue({
el:"#app",
})
</script>



</html>

CSS居中

div 居中

设置div的宽高，然后设置
margin：0 auto ,可以让子元素居中

块级元素水平居中

设置父布局
text-align:center来设置水平居中

flex布局居中

设置父布局为flex，布局并且设置

1 2	display:flex; align-items:center;

`layout` 布局

el-row 标签和el-col来配合显示行列布局：

<el-row>
<el-clo>
  <div span="12" style="background-color:red">
    <div span="12" style="background-color:green">
  </div>
</el-clo>
</el-row>

详细属性

【Row 属性】

gutter 可以可以设置间距
type 设置布局，例如type="flex",设置成flex布局后，使用justify= start |end|center| space-between | space-around 来设置对齐
-align 布局在flex布局下，参数有top | middle |bottom |

【Col 属性】

span 根据占比来控制宽度
offset分栏偏移
push 向右移动格数
pull向左移动格数

`Container`布局容器

为了方便开发，设计出了布局容器el-container，作为父布局，只能包含四种子子布局：

el-header 标题栏
el-aside 侧边栏
el-main 内容栏
el-footer 底部栏

【注】：el-container中，包含el-aside和el-main的时候，布局时从左到右，包含el-header和el-footer的时候，就会布局从上到下,el-aside中布局也是从上到下.

<body>
 <div id="app">
   <el-container>
    <el-header style="background-color: black;" >



    </el-header>
   </el-container>
<el-container>

<el-aside style=" background-color: red; height: 500px; width: 200px;">

</el-aside>
<el-main style=" background-color: green; height: 500px; width: 200px;" >

</el-main>
</el-container>

<el-container>
  <el-footer style="background-color: hotpink;">

  </el-footer>
</el-container>
</div>

</body>

<script>
    new Vue().$mount('#app')
</script>
</html>

Button按钮

el-button 来显示按钮
其中属性包括：

type 可以设置成
- primary 主要按钮
- success 成功按钮
- …
round 圆角按钮
circle 圆形按钮
plain 朴素按钮（默认按钮）
disable 是否不可点击
loading 是否加载
-icon图标名

文字链接

el-link 来显示文字链接。主要使用的属性有：

type 类似于按钮
icon 显示图标。类似于按钮
disabled 是否可点击
underline 是否显示下划线,例如显示下划线。 :inderline=true

`el-radio`单选 & `el-radio-button` 单选按钮

disabled 是否可点击
border 事都显示边框
size 大小