# Layout 布局

版本：1.14.0

开发：陈冠彬

# 安装

$ npm i @hui-pro/layout
# 或者
$ yarn add @hui-pro/layout

# 引入

import layout from '@hui-pro/layout';
import '@hui-pro/layout/theme/index.scss';
Vue.use(layout);

# 布局一

Content

布局一

<div style="height: 360px;">
  <h-layout>
    <h-layout-header>Header</h-layout-header>
    <h-layout-content>Content</h-layout-content>
    <h-layout-footer>Footer</h-layout-footer>
  </h-layout>
</div>
<style lang="scss">
  .demo-layout {
    .h-layout {
      color: #fff;
    }
    .h-layout-header,
    .h-layout-footer {
      line-height: 48px;
      text-align: center;
      background-color: #90c0fb;
    }
    .h-layout-content {
      line-height: 264px;
      text-align: center;
      background-color: #63a6f9;
    }
  }
</style>

# 布局二

Content

布局二

<h-layout style="height: 360px;">
  <h-layout-aside width="200px" style="line-height: 360px;">Aside</h-layout-aside>
  <h-layout>
    <h-layout-header>Header</h-layout-header>
    <h-layout-content>Content</h-layout-content>
    <h-layout-footer>Footer</h-layout-footer>
  </h-layout>
</h-layout>
<style lang="scss">
  .demo-layout {
    .h-layout {
      color: #fff;
    }
    .h-layout-header,
    .h-layout-footer {
      line-height: 48px;
      text-align: center;
      background-color: #90c0fb;
    }
    .h-layout-content {
      line-height: 264px;
      text-align: center;
      background-color: #63a6f9;
    }
    .h-layout-aside {
      line-height: 264px;
      text-align: center;
      background-color: #79b3fa;
    }
  }
</style>

# 布局三

Content

布局三

<h-layout style="height: 360px;">
  <h-layout-header>Header</h-layout-header>
  <h-layout>
    <h-layout-aside width="200px">Aside</h-layout-aside>
    <h-layout-content>Content</h-layout-content>
    <h-layout-aside width="200px">Aside</h-layout-aside>
  </h-layout>
  <h-layout-footer>Footer</h-layout-footer>
</h-layout>
<style lang="scss">
  .demo-layout {
    .h-layout {
      color: #fff;
    }
    .h-layout-header,
    .h-layout-footer {
      line-height: 48px;
      text-align: center;
      background-color: #90c0fb;
    }
    .h-layout-content {
      line-height: 264px;
      text-align: center;
      background-color: #63a6f9;
    }
    .h-layout-aside {
      line-height: 264px;
      text-align: center;
      background-color: #79b3fa;
    }
  }
</style>

# API

# Layout

参数	说明	类型	可选值	默认值
direction	内部是水平排列还是垂直排列，默认为'水平排列'	String	'horizontal' / 'vertical'	子元素中有 h-layout-header 或 h-layout-footer 时为 'vertical'，否则默认为 'horizontal'

# LayoutHeader

参数	说明	类型	可选值	默认值
height	高度	String	-	-

# LayoutFooter

参数	说明	类型	可选值	默认值
height	高度	String	-	-

# LayoutAside

参数	说明	类型	可选值	默认值
width	宽度	String	-	-

# LayoutContent

参数	说明	类型	可选值	默认值
flex	内部是否使用 flex 布局	Boolean	-	false
direction	内部是水平排列还是垂直排列，默认为'水平排列'	String	'horizontal' / 'vertical'	'horizontal'
overflow	内部是否出现滚动条	Boolean	-	false

ImgCard 图片卡片布局 →