Layout 布局
引入组件
<template>
<div>
<m-layout>
<m-header>header</m-header>
<m-layout>
<m-aside>aside</m-aside>
<m-main>main</m-main>
</m-layout>
<m-footer>footer</m-footer>
</m-layout>
</div>
</template>
<script>
import { MLayout, MMain, MHeader, MFooter, MAside } from "@csr/m_ui";
export default {
components: {
MLayout,
MMain,
MHeader,
MFooter,
MAside
}
}
</script>
基础用法
代码
<m-layout>
<m-header>header</m-header>
<m-layout>
<m-aside>aside</m-aside>
<m-main>main</m-main>
</m-layout>
<m-footer>footer</m-footer>
</m-layout>
<style scoped>
.m-layout {
color: #fff;
}
.m-header {
height: 50px;
background: #0a4c23;
}
.m-aside {
width: 150px;
background: #146d49;
}
.m-main {
height: 200px;
background: #229376;
}
.m-footer {
height: 50px;
background: #186350;
}
</style>
常见布局
代码
<m-layout>
<m-header>header</m-header>
<m-main>main</m-main>
<m-footer>footer</m-footer>
</m-layout>
<m-layout>
<m-aside>aside</m-aside>
<m-layout>
<m-main>main</m-main>
<m-footer>footer</m-footer>
</m-layout>
</m-layout>
<m-layout>
<m-layout>
<m-aside>aside</m-aside>
<m-main>main</m-main>
</m-layout>
<m-footer>footer</m-footer>
</m-layout>
<m-layout>
<m-aside>aside</m-aside>
<m-main>main</m-main>
<m-aside>aside</m-aside>
</m-layout>
<m-layout>
<m-aside>aside</m-aside>
<m-main>main</m-main>
</m-layout>
<m-layout>
<m-main>main</m-main>
<m-aside>aside</m-aside>
</m-layout>
<style scoped>
.m-layout {
color: #fff;
}
.m-header {
height: 50px;
background: #0a4c23;
}
.m-aside {
width: 150px;
background: #146d49;
}
.m-main {
height: 200px;
background: #229376;
}
.m-footer {
height: 50px;
background: #186350;
}
</style>
TIP
想要修改布局相关样式,直接使用css或者style进行修改。