Sidebar 布局侧边栏

示例

收起侧边栏

通过 collapse-mode 属性指定收起模式，分别是 slim（部分收起） / hidden（完全收起）。

Header
Content
Footer（背景仅为演示）
在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-radio-button-group
    v-model="mode"
    :items="modes"
  />
  <div class="mock-window">
    <veui-layout>
      <veui-header>Header</veui-header>
      <veui-layout>
        <veui-sidebar :collapse-mode="mode">
          <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>
  </div>
</article>
</template>

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

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

<style lang="less" scoped>
.mock-window {
  height: 384px;
  transform: translate(0, 0); // bfc for fixed
  overflow: auto;
  border: 1px solid #eee;

  & > .veui-layout {
    min-width: 860px;
  }
}

.center,
.veui-layout-header,
.veui-layout-footer,
.veui-layout-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.veui-radio-button-group {
  margin-bottom: 12px;
}

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

展示/隐藏切换按钮

使用 collapsible 属性设置是否显示侧边栏展开/收起按钮。

Header
Content
Footer（背景仅为演示
在 GitHub 上编辑此页编辑
<template>
<article>
  <div class="mock-window">
    <veui-layout>
      <veui-header>Header</veui-header>
      <veui-layout>
        <veui-sidebar :collapsible="false">
          <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>
  </div>
</article>
</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>
.mock-window {
  height: 384px;
  transform: translate(0, 0); // bfc for fixed

  & > .veui-layout {
    min-width: 860px;
  }
}

.center,
.veui-layout-header,
.veui-layout-footer,
.veui-layout-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

API

属性

名称类型默认值描述
stickybooleanfalse是否吸顶。使用注意参考吸顶/吸底布局。
collapsiblebooleanfalse是否显示收起/展开按钮。
collapsedbooleanfalse

.sync

收起/展开的状态。

autocollapsebooleanfalse是否拉伸窗口到一定阈值时自动收起。
collapse-mode'slim' | 'hidden''slim'收起模式，分别是 slim（部分收起）/hidden（完全收起）。

插槽

名称描述
default布局侧边栏的内容。
在 GitHub 上编辑此页编辑