默认布局容器

方便搭建页面的基本结构。

WARNING

本容器使用flex布局，请保证bl-layout是bl-header、bl-sider 、bl-content 、 bl-footer的父元素，并且他们的父元素也是bl-layout，否则可能会发生样式错误。

TIP

以下是本组件的使用例，使用方法并不局限于此。

如何使用

引入

import 'blitz-ui-demo/dist/index.css'
import { Layout } from 'blitz-ui-demo'
import { Header } from 'blitz-ui-demo'
import { Sider } from 'blitz-ui-demo'
import { Content } from 'blitz-ui-demo'
import { Footer } from 'blitz-ui-demo'

export default {
    components:{
        'bl-layout':Layout,
        'bl-header':Header,
        'bl-sider':Sider,
        'bl-content':Content,
        'bl-footer':Footer
    }
}

---

基础布局

header

sider

content

footer

最基础的上中下布局

<style lang="scss" scoped>
  .wrapper {
  > .layout {
    > .header {
      height: 60px;background: #409eff;}
  }
  > .layout {
    > .sider {height: 200px;width: 200px;background: #91d5ff}
    > .content {background: #c0c4cc}
  }
  > .layout {
    > .footer {height: 60px;background: #c6e2ff}
  }
}
</style>
      

---

没有侧边栏的布局

header

content

footer

没有sider的上中下布局

<style lang="scss" scoped>
  .wrapper {
  > .layout {
    > .header { height: 60px;background: #409eff;}
  }
  > .layout {
    > .content {height: 200px;background: #c0c4cc}
  }
  > .layout {
    > .footer {height: 60px;background: #c6e2ff}
  }
}
</style>
      

---

嵌套布局

header

sider

content

footer

一种嵌套布局

<style lang="scss" scoped>
  .wrapper {
  > .layout {
    > .header {height: 60px;background: #409eff;}
    > .layout {
      > .sider {height: 200px;width:200px;background: #91d5ff}
      > .layout{
        > .content{background:#c0c4cc}
        > .footer {height:60px;background: #c6e2ff}
      }
    }
  }
}
</style>
      

---

Layout Explanation

容器名	说明
bl-layout	最外层容器，内部可嵌套bl-header、bl-sider 、bl-content 、bl-footer 或是bl-layout本身。
bl-header	顶栏容器，内部可嵌套任何元素。
bl-sider	侧边栏容器，内部可嵌套任何元素,当 bl-sider存在时，bl-layout内部将会横向排列。
bl-content	主内容栏容器，内部可嵌任何以元素。
bl-footer	底栏容器，内部可嵌套任何元素。