<template>
  <div class="n-layout" :class="classes">
    <slot name="header"></slot>
    <div class="n-layout-auto">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>
<script>
import {prop} from '@uif/next/lib/utils/tools'

export default {
  name: 'n-layout',
  props: {
    // 是否为垂直方向
    vertical: prop.boolean(),
    // 子元素是否居中
    center: prop.boolean()
  },
  computed: {
    classes ({vertical, center}) {
      return {
        'n-layout-vertical': vertical,
        'n-layout-center': center
      }
    }
  }
}
</script>
