Layout

The Layout component needs to be used with the Header / Sidebar / Footer / Content components.

Examples

Basic layout

The Layout component supports multiple typical layouts.

/demos/layout/basic.vue

<template>
<veui-layout>
  <veui-header class="header">
    Header
  </veui-header>
  <veui-layout>
    <veui-sidebar>
      <div class="center full">
        Sidebar
      </div>
    </veui-sidebar>
    <veui-layout>
      <veui-content class="content">
        Content
      </veui-content>
      <veui-footer
        class="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,
.header,
.footer,
.content {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/demos/layout/global-sidebar.vue

Edit this demo on GitHubEdit

<template>
<veui-layout>
  <veui-sidebar>
    <div class="center full">
      Sidebar
    </div>
  </veui-sidebar>
  <veui-layout>
    <veui-header class="header">
      Header
    </veui-header>
    <veui-layout>
      <veui-content class="content">
        Content
      </veui-content>
      <veui-footer
        class="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,
.header,
.footer,
.content {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/demos/layout/global-footer.vue

Edit this demo on GitHubEdit

<template>
<veui-layout>
  <veui-header class="header">
    Header
  </veui-header>
  <veui-layout>
    <veui-sidebar>
      <div class="center full">
        Sidebar
      </div>
    </veui-sidebar>
    <veui-layout>
      <veui-content class="content">
        Content
      </veui-content>
    </veui-layout>
  </veui-layout>
  <veui-footer
    class="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,
.header,
.footer,
.content {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

Sticky layout

The Header / Sidebar / Footer components all support setting sticky behavior using the sticky prop.

When using a sticky layout header together with a sticky sidebar, the parent component Layout of the layout header needs to set --dls-layout-header-height to specify the height of the layout header.

When using a sticky layout footer together with a sticky sidebar, the parent component Layout of the layout footer needs to set --dls-layout-footer-height to specify the height of the layout footer.

/demos/layout/sticky.vue

Edit this demo on GitHubEdit

<template>
<veui-layout style="--dls-layout-header-height: 64px;">
  <veui-header
    class="header"
    sticky
  >
    Header
  </veui-header>
  <veui-layout>
    <veui-sidebar sticky>
      <div class="center full">
        Sidebar
      </div>
    </veui-sidebar>
    <veui-layout>
      <veui-content class="content">
        <div
          class="center"
          style="height: 800px;"
        >
          Sidebar
        </div>
      </veui-content>
      <veui-footer
        class="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,
.header,
.footer,
.content {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

API

Props

Name	Type	Default	Description
`direction`	`'column' \| 'row'`	`'column'`	The layout direction. When there is a `Sidebar`, the default is `'row'`.

Slots

Name	Description
`default`	The layout content, can be the `Header` / `Sidebar` / `Footer` / `Content` component or nested `Layout` components.

CSS

Name	Type	Default	Description
`--dls-layout-header-height`	`<length>`	-	The height of the layout header.
`--dls-layout-footer-height`	`<length>`	-	The height of the layout footer.

Edit this page on GitHubEdit

VEUI

Layout

Examples

Basic layout

Global Sidebar

Global footer

Sticky layout

API

Props

Slots

CSS