Layout 布局

示例

基础布局

Layout 组件支持多种典型布局。

/demos/layout/basic.vue
Header
Content
Footer(背景仅为演示)
在 GitHub 上编辑此示例编辑
<template>
<veui-layout>
  <veui-header>Header</veui-header>
  <veui-layout>
    <veui-sidebar>
      <div class="center full">
        Sidebar
      </div>
    </veui-sidebar>
    <veui-layout>
      <veui-content>Content</veui-content>
      <veui-footer style="background: #ccc;">
        Footer(背景仅为演示)
      </veui-footer>
    </veui-layout>
  </veui-layout>
</veui-layout>
</template>

<script>
import { Layout, Header, Footer, Sidebar, Content } from 'veui'

export default {
  components: {
    'veui-layout': Layout,
    'veui-header': Header,
    'veui-footer': Footer,
    'veui-sidebar': Sidebar,
    'veui-content': Content
  }
}
</script>

<style lang="less" scoped>
.center,
.veui-layout-header,
.veui-layout-footer,
.veui-layout-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.full {
  height: 100%;
}
</style>

通顶侧边栏

/demos/layout/global-sidebar.vue
Header
Content
Footer(背景仅为演示)
在 GitHub 上编辑此示例编辑
<template>
<veui-layout>
  <veui-sidebar>
    <div class="center full">
      Sidebar
    </div>
  </veui-sidebar>
  <veui-layout>
    <veui-header>Header</veui-header>
    <veui-layout>
      <veui-content>Content</veui-content>
      <veui-footer style="background: #ccc;">
        Footer(背景仅为演示)
      </veui-footer>
    </veui-layout>
  </veui-layout>
</veui-layout>
</template>

<script>
import { Layout, Header, Footer, Sidebar, Content } from 'veui'

export default {
  components: {
    'veui-layout': Layout,
    'veui-header': Header,
    'veui-footer': Footer,
    'veui-sidebar': Sidebar,
    'veui-content': Content
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="less" scoped>
.center,
.veui-layout-header,
.veui-layout-footer,
.veui-layout-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.full {
  height: 100%;
}
</style>

通栏底部

/demos/layout/global-footer.vue
Header
Content
Footer(背景仅为演示)
在 GitHub 上编辑此示例编辑
<template>
<veui-layout>
  <veui-header>Header</veui-header>
  <veui-layout>
    <veui-sidebar>
      <div class="center full">
        Sidebar
      </div>
    </veui-sidebar>
    <veui-layout>
      <veui-content>Content</veui-content>
    </veui-layout>
  </veui-layout>
  <veui-footer style="background: #ccc;">
    Footer(背景仅为演示)
  </veui-footer>
</veui-layout>
</template>

<script>
import { Layout, Header, Footer, Sidebar, Content } from 'veui'

export default {
  components: {
    'veui-layout': Layout,
    'veui-header': Header,
    'veui-footer': Footer,
    'veui-sidebar': Sidebar,
    'veui-content': Content
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="less" scoped>
.center,
.veui-layout-header,
.veui-layout-footer,
.veui-layout-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.full {
  height: 100%;
}
</style>

吸顶/吸底布局

Header / Sidebar / Footer 组件均支持通过 sticky 属性设置吸顶/吸底。

/demos/layout/sticky.vue
Header
Sidebar
Footer(背景仅为演示)
在 GitHub 上编辑此示例编辑
<template>
<veui-layout style="--dls-layout-header-height: 64px;">
  <veui-header sticky>
    Header
  </veui-header>
  <veui-layout>
    <veui-sidebar sticky>
      <div class="center full">
        Sidebar
      </div>
    </veui-sidebar>
    <veui-layout>
      <veui-content>
        <div
          class="center"
          style="height: 800px;"
        >
          Sidebar
        </div>
      </veui-content>
      <veui-footer
        sticky
        style="background: #ccc;"
      >
        Footer(背景仅为演示)
      </veui-footer>
    </veui-layout>
  </veui-layout>
</veui-layout>
</template>

<script>
import { Layout, Header, Footer, Sidebar, Content } from 'veui'

export default {
  components: {
    'veui-layout': Layout,
    'veui-header': Header,
    'veui-footer': Footer,
    'veui-sidebar': Sidebar,
    'veui-content': Content
  },
  data () {
    return {
      mode: 'slim',
      modes: [
        { label: 'slim', value: 'slim' },
        { label: 'hidden', value: 'hidden' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.center,
.veui-layout-header,
.veui-layout-footer,
.veui-layout-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.full {
  height: 100%;
}
</style>

API

属性

名称类型默认值描述
direction'column' | 'row''column'布局排列方向。在有 Sidebar 时,默认为 'row'

插槽

名称描述
default布局内容,可以是 Header / Sidebar / Footer / Content 组件或嵌套使用 Layout 组件。
在 GitHub 上编辑此页面编辑