框架使用
在使用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,布局并且设置
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
大小
网友评论