Admin

Interface layout applied to the management platform

AdminClassic

Classic layout structure of the management platform

Examples

Quick layout

<template>
  <LayoutAdminClassic>
    <template #header>
      <div>Header</div>
    </template>
    <template #aside>
      <div>Aside</div>
    </template>
    <template #breadcrumb>
      <div>Breadcrumb</div>
    </template>
    <template #footer>
      <div>Footer</div>
    </template>

    Main content
  </LayoutAdminClassic>
</template>

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

Header

Aside

Breadcrumb

Main content

Footer

Sidebar collapse/expand

<template>
  <LayoutAdminClassic :aside-width="asideWidth">
    <template #aside>
      <div>Aside</div>
    </template>

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

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

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

The width of the collapsed sidebar70px0px

Aside

Main content

Toggle the width of the sidebar by setting aside-width. If you want to completely collapse the sidebar, set the width to 0

Conditional rendering area

Use conditional rendering to switch the layout's header, aside, breadcrumb and footer areas visible/invisible

After the layout area is closed, the remaining visible area will automatically fill the space

<template>
  <LayoutAdminClassic aside-position="right">
    <template #aside v-if="visible">
      <div>Aside</div>
    </template>

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

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

const visible = ref(true)
</script>

Area conditional rendering

Header

Aside

Breadcrumb

Main content

Footer

Exclusive column for aside

In the default layout, the header column is exclusive to one row, you can set the aside-full-height prop to make the aside column exclusive to one row

<LayoutAdminClassic aside-full-height>
  <template #aside>
    <div>Aside</div>
  </template>

  <div>Main content</div>
</LayoutAdminClassic>

Header

Aside

Breadcrumb

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
  /**
   * Breadcrumb height
   * @default 60
   */
  breadcrumbHeight?: CssValue
  /**
   * Aside width
   * @default 260
   */
  asideWidth?: CssValue
  /**
   * Aside position
   */
  asidePosition?: 'left' | 'right'
  /**
   * Aside full height
   * @default false
   */
  asideFullHeight?: boolean
}

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
• aside Aside bar
• breadcrumb Breadcrumb bar
• footer Footer bar