Content

Interface layout applied to content publishing and presentation

ContentPress

Content publishing layout structure, widely used in documents, blogs, news, articles and other pages

Examples

Quick layout

<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

Sidebar collapse/expand

<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>

collapse / expand

Primary aside

Secondary aside

Main content

Toggle the width of the primary and secondary sidebars by setting primary-aside-width and secondary-aside-width, and set the width to 0 if you want the sidebars to be completely closed

Conditional rendering area

Conditional rendering toggles the layout's header, primaryAside, secondaryAside and footer areas visible/invisible

When a layout area is closed, the remaining visible areas are automatically filled with space

<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>

Area conditional rendering

Header

Aside

Secondary aside

Main content

Footer

Main area position

In the default layout, the content area is centered, and its position can be set with the main-position property

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

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

Main area positionleftcenterright

Header

Primary aside

Secondary aside

Main content

Footer

Props

Layout Properties

type CssValue = string | number

interface AdminClassicProps {
  /**
   * Layout container width
   * @default `100vw`
   */
  width?: CssValue
  /**
   * Layout container height
   * @default `100vh`
   */
  height?: CssValue
  /**
   * Header height
   * @default 60
   */
  headerHeight?: CssValue
  /**
   * Footer height
   * @default 60
   */
  footerHeight?: CssValue
  /**
   * Main container custom classes
   */
  mainClass?: StyleValue
  /**
   * Primary aside width
   * @default 260
   */
  primaryAsideWidth?: CssValue
  /**
   * Secondary aside width
   * @default 260
   */
  secondaryAsideWidth?: CssValue
  /**
   * Main container position
   * @default `center
   */
  mainPosition?: 'left' | 'center' | 'right'
}

Slots

In the interface layout, the layout areas all use named slots for content distribution

• default The default slot corresponds to the main content area
• header Header area, by default occupies one row
• primaryAside Primary aside
• secondaryAside Secondary aside
• footer Footer bar