Minimalist UI

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>

基础用法

header aside main footer
代码
<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>

常见布局

header main footer
aside main footer
aside main footer
aside main aside
aside main
main aside
代码
<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进行修改。

← Toast 消息提示 →