Content

应用于内容发布、呈现的界面布局

ContentPress

内容发布布局结构，广泛应用于文档、博客、新闻、文章等页面

实例

快速应用布局

<template>
  <LayoutContentPress>
    <template #header>
      <div>Header</div>
    </template>
    <template #primaryAside>
      <div>Primary aside</div>
    </template>
    <template #secondaryAside>
      <div>Secondary aside</div>
    </template>
    <template #footer>
      <div>Footer</div>
    </template>

    Main content
  </LayoutContentPress>
</template>

<script setup>
import { LayoutContentPress } from 'v-layouts'
</script>

Header

Primary aside

Secondary aside

Main content

Footer

收起/展开侧边栏

<template>
  <LayoutContentPress
    :primary-aside-width="primaryAsideWidth"
    :secondary-aside-width="secondaryAsideWidth"
  >
    <template #primaryAside>
      <div>Primary aside</div>
    </template>
    <template #secondaryAside>
      <div>Secondary aside</div>
    </template>

    <div>
      Main content
      <button
        @click="collapse = !collapse"
      >collapse</button>
    </div>
  </LayoutContentPress>
</template>

<script setup>
import { ref, computed } from 'vue'
import { LayoutContentPress } from 'v-layouts'

const collapse = ref(false)
const primaryAsideWidth = computed(() => collapse.value ? '70px' : '200px')
const secondaryAsideWidth = computed(() => collapse.value ? '70px' : '200px')
</script>

收起 / 展开

Primary aside

Secondary aside

Main content

通过设置 primary-aside-width 与 secondary-aside-width 来切换主、次两个侧边栏的宽度，若希望达到将侧边栏完全收起的效果，将宽度设置为 0 即可

条件渲染区域

通过条件渲染将布局的 header、primaryAside、secondaryAside 与 footer 等区域进行切换打开/关闭状态

在布局区域关闭后，剩余可见的区域会自动对空间进行填充

<template>
  <LayoutContentPress aside-position="right">
    <template #header v-if="visible">
      <div>Header</div>
    </template>

    <div>
      Main content
      <button
        @click="visible = !visible"
      >change visible</button>
    </div>
  </LayoutContentPress>
</template>

<script setup>
import { ref } from 'vue'
import { LayoutContentPress } from 'v-layouts'

const visible = ref(true)
</script>

区域条件渲染

Header

Aside

Secondary aside

Main content

Footer

内容区位置

在默认布局中，内容区居中摆放，可通过 main-position 属性设置其布局位置

<LayoutContentPress main-position="right">
  <template #primaryAside>
    <div>Primary aside</div>
  </template>
  <template #secondaryAside>
    <div>Secondary aside</div>
  </template>

  <div>Main content</div>
</LayoutContentPress>

内容区位置leftcenterright

Header

Primary aside

Secondary aside

Main content

Footer

Props

布局的属性

type CssValue = string | number

interface AdminClassicProps {
  /**
   * 布局容器总宽度
   * @default `100vw`
   */
  width?: CssValue
  /**
   * 布局容器总高度
   * @default `100vh`
   */
  height?: CssValue
  /**
   * 头部栏高度
   * @default 60
   */
  headerHeight?: CssValue
  /**
   * 底部栏高度
   * @default 60
   */
  footerHeight?: CssValue
  /**
   * 主内容容器自定义扩展样式
   */
  mainClass?: StyleValue
  /**
   * 主侧边栏宽度
   * @default 260
   */
  primaryAsideWidth?: CssValue
  /**
   * 次侧边栏宽度
   * @default 260
   */
  secondaryAsideWidth?: CssValue
  /**
   * 主内容区位置
   * @default `center
   */
  mainPosition?: 'left' | 'center' | 'right'
}

插槽

在界面布局中，布局区域均使用具名插槽进行内容分发

• default 默认插槽对应了主内容区域
• header 头部区域，默认情况下独占一行
• primaryAside 主侧边栏
• secondaryAside 次侧边栏
• footer 底部栏