Element初探

一:内置过渡动画

1.fade淡入淡出

Element初探_第1张图片

2.zoom三种缩放效果

Element初探_第2张图片

3.collapse展开折叠

Element初探_第3张图片

二:组件

1.layout布局:整体宽度为24,span值除以24为所占比例,与bootstrap栅格系统类似

(1)基础布局

Element初探_第4张图片

(2)分栏间隔:gutter属性可以指定每一栏之间的间隔

Element初探_第5张图片
等分为四份且间隔为20

(3)混合布局

Element初探_第6张图片

(4)分栏偏移:用offset属性指定左侧偏移的栏数,offset偏移栏数加上span所占栏数的总和不大于总宽度24

Element初探_第7张图片

(5)对齐方式:通过flex布局来进行对齐,一共有五种方式:默认,center,end,space-between,space-around

(6)响应式布局:与bootstrap响应式相同,有xs,sm,md,lg,xl五个值

Element初探_第8张图片

2.布局容器:使用flex布局,有兼容性问题,且父子关系严格

el-container:外层容器。当子元素中包含或时,全部子元素会垂直上下排列,否则会水平左右排列。

el-header:顶栏容器。

el-aside:侧边栏容器。

el-main:主要区域容器。

el-footer:底栏容器。

3.form表单

(1)radio单选框:v-model绑定data中的radio数据,label是radio的vaule,通过label值确定默认情况下是第二个,点击哪一个哪一个的radio就是2

Element初探_第9张图片

禁用状态:disabled

Element初探_第10张图片

你可能感兴趣的:(Element初探)