Element UI实战教程之Link链接组件以及Layout布局组件和Container容器组件02
Link文字链接组件
1.文字链接组件的创建
<el-link>默认文字链接</el-link>
2.文字链接组件的属性的使用
<el-link type="success" href="http://www.baidu.com">默认文字链接</el-link>
<el-link type="primary" :underline="false">默认文字链接</el-link>
Layout(栅格)布局组件的使用
通过基础的24分栏,迅速简便的创建布局
在element-ui中布局组件将页面划分为多个行row,每行最多分为24栏
使用Layout组件
<el-row>
<el-col :span="8">占用8份</el-col>
<el-col :span="8">占用8份</el-col>
<el-col :span="8">占用8份</el-col>
</el-row>
注意:属性值为非字符串类型时需要进行数据绑定在属性前加上":"
Layout属性的使用
行属性的使用
<el-row>
<el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
<el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
<el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
<el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
<el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
<el-col :span="4"><div style="border: 1px red solid">占用4份</div></el-col>
</el-row>
列属性的使用
<el-row>
<el-col :span="8" :offset="4" :push="3"><div style="border: 1px red solid">占用8份</div></el-col>
<el-col :span="8"><div style="border: 1px red solid">占用8份</div></el-col>
<el-col :span="8"><div style="border: 1px red solid">占用8份</div></el-col>
</el-row>
Container布局容器组件
创建布局容器(外层容器)
<el-container>
</el-container>
容器中包含的子元素
<el-header>:顶栏容器。
<el-aside>:侧边栏容器。
<el-main>:主要区域容器。
<el-footer>:底栏容器。
组件嵌套使用
<el-container>
<!--头部-->
<el-header><div style="border: 1px red solid"><h1>我是标题</h1></div></el-header>
</el-container>
<el-container>
<!--左侧头部-->
<el-aside><div style="border: 1px red solid"><h1>我是菜单</h1></div></el-aside>
<el-main><div style="border: 1px red solid"><h1>我是中心内容</h1></div></el-main>
</el-container>
<el-footer><div style="border: 1px red solid"><h1>我是页脚</h1></div></el-footer>
可以通过direction属性设置容器为水平容器或者垂直容器