Ant Design Vue Pro Layout

Ant Design Pro Layout of Vue, easy to use pro scaffolding.

中文 | English

Install

1npm i antdv-pro-layout

Simple Usage

First, you should add the antdv-pro-layout that you need into the library.

1// main.[js|ts]
2import { createApp } from "vue";
3import App from "./App.vue";
4
5import "ant-design-vue/dist/reset.css";
6import Antd from "ant-design-vue";
7
8import 'antdv-pro-layout/dist/style.css';
9import { ProLayout, PageContainer } from "antdv-pro-layout";
10
11const app = createApp(App);
12
13app.use(Antd).use(ProLayout).use(PageContainer).mount("#app");

After that, you can use pro-layout in your Vue components as simply as this:

1<template>
2  <pro-layout
3    :locale="locale"
4    :menu-data="menuData"
5    v-bind="layoutConf"
6    v-model:openKeys="state.openKeys"
7    v-model:collapsed="state.collapsed"
8    v-model:selectedKeys="state.selectedKeys"
9  >
10    <router-view />
11  </pro-layout>
12</template>
13
14<script setup lang="ts">
15import { reactive, useRouter } from "vue";
16import { getMenuData, clearMenuItem, type MenuDataItem } from "antdv-pro-layout";
17
18const locale = (menuData: MenuDataItem) => menuData.meta?.title;
19const router = useRouter();
20
21const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
22
23const state = reactive({
24  collapsed: false, // default value
25  openKeys: ["/dashboard"], // defualt openKeys
26  selectedKeys: ["/welcome"], // default selectedKeys
27});
28
29const layoutConf = reactive({
30  layout: "side",
31  theme: "light", // "dark" | "light",
32  menuTheme: "light", // "dark" | "light",
33  fixedHeader: true,
34  fixSiderbar: true,
35  splitMenus: true,
36});
37</script>

API

Function Layout - ProLayout

• MediaQueryEnum Screen size media query enumeration object
• getMediaScreen Screen size
• useMediaScreen Screen size ref responds to listening
• PrefersColorSchemeEnum Media theme color mode enumeration object
• getPrefersColorScheme Media Theme Color Mode Preferences
• usePrefersColorScheme Media Theme Color Mode Preferences ref responds to listening
• viewTransitionTheme Theme switching view transitions
• getMenuData The routing table exits the system menu
• clearMenuItem Clear menu item, property excluded !name and meta

Component Layout - ProLayout

Property	Description	Type	Default Value
title	Text to the right of the layout LOGO	string	'Ant Design Pro'
logo	Layout Logo Link	string	-
logoStyle	Layout Logo Style	object	-
loading	Layout content area loading waiting status	boolean	false
layout	Menu Layout	'side' | 'top' | 'mix'	'side'
breadcrumb	Layout content: Breadcrumbs in the upper left corner	Object	-
theme	Global Theme Colors	'light' |'dark'	'light'
menuTheme	Menu navigation theme color	'light' |'dark'	'light'
menuData	Menu item data MenuDataItem[]	Array	[]
collapsed	When the left side of the menu is closed and expanded	boolean	true
collapsedWidth	Collapse width size on the left side of the menu	number	48
siderWidth	Expand width size on the left side of the menu	number	200
selectedKeys	Choose highlight keys from the menu	string[]	[]
openKeys	Menu select open expand keys	string[]	[]
fixSiderbar	Fixed list on left side of menu	boolean	false
splitMenus	The menu layout mix splits the secondary menu to the left	boolean	false
menuHeaderRender	Renders the header logo and header area of the menu	v-slot | VNode | (props: BasicLayoutProps) => VNode | false	-
menuHeaderExtraRender	Render menu header expands area	v-slot | VNode | (props: BasicLayoutProps) => VNode | false	-
menuFooterRender	Render the footer area of the menu	v-slot | VNode | (props: BasicLayoutProps) => VNode | false	-
menuItemRender	Render menu items Menu.Item	v-slot#menuItemRender="menuItem"	-
menuSubItemRender	Nested subitems of the render menu Menu.SubItem	v-slot#menuSubItemRender="menuItem"	-
collapsedButtonRender	The render menu closes the button area	v-slot#collapsedButtonRender="collapsed"	-
fixedHeader	The top area is fixed	boolean	false
headerRender	Render the top area	v-slot | VNode | (props: BasicLayoutProps) => VNode	-
headerContentRender	Render the top content area, only the side layout works	v-slot | (props: BasicLayoutProps) => VNode	-
headerContentRightRender	Renders the right area of the top content	v-slot | (props: BasicLayoutProps) => VNode	-
footerRender	Render the bottom area	v-slot | ({ width, ...props }) => VNode	false
tabRender	Renders the top tab area	v-slot | ({ width, ...props }) => VNode	false
breadcrumbRender	Render the BREADCRUMB area	v-slot | ({ route, params, routes, paths, h }) => VNode[]	-
locale	Menu name internationalization function processing	Function(menuDataItem?: MenuDataItem) => string | false	false
collapse	The left side of the menu folds up to expand the trigger function processing	Function(collapsed: boolean) => void	-

Menu generation requires getMenuData and clearMenuItem function transformations For example: const { menuData } = getMenuData(clearMenuItem(routes))

Custom Render

headerContentRender

1<template #headerContentRender>
2  <div style="background-color: #ff7875">headerContentRender</div>
3</template>
4<template #headerContentRightRender>
5  <a-avatar shape="square" size="small"> Avatar </a-avatar>
6</template>

menuItemRender Menu.Item

1<template #menuItemRender="{ path, meta }">
2  <a-menu-item
3    :key="path"
4    :disabled="meta?.disabled"
5    :danger="meta?.danger"
6    :icon="meta?.icon"
7  >
8    <router-link :to="path">
9      <span class="ant-pro-menu-item">
10        <a-badge count="5" dot>
11          <span class="ant-pro-menu-item-title">{{ meta?.title }}</span>
12        </a-badge>
13      </span>
14    </router-link>
15  </a-menu-item>
16</template>

breadcrumbRender

1<template #breadcrumbRender="{ route, params, routes }">
2  <span v-if="routes.indexOf(route) === routes.length - 1">
3    {{ route.breadcrumbName }}
4  </span>
5  <RouterLink v-else :to="{ path: route.path, params }">
6    {{ route.breadcrumbName }}
7  </RouterLink>
8</template>

tabRender

1<template #tabRender="{ width, fixedHeader }">
2  <div>
3    <header
4      class="ant-layout-header"
5      style="height: 36px; line-height: 36px; background: transparent"
6      v-if="fixedHeader"
7    ></header>
8    <div
9      :style="{
10        margin: '0',
11        height: '36px',
12        lineHeight: '36px',
13        right: '0px',
14        top: '48px',
15        position: fixedHeader ? 'fixed' : 'unset',
16        width: fixedHeader ? width : '100%',
17        overflow: 'hidden',
18        zIndex: 14,
19        padding: '4px 16px',
20        background: '#fff',
21        boxShadow: '0 1px 4px #0015291f',
22        transition: 'background 0.3s, width 0.2s',
23      }"
24    >
25      tabRender fixedHeader：{{ fixedHeader }} width：{{ width }}
26    </div>
27  </div>
28</template>

footerRender

1<template #footerRender="{ width, fixedHeader }">
2  <div>
3    <footer
4      class="ant-layout-footer"
5      style="height: 48px; line-height: 48px; background: transparent"
6      v-if="fixedHeader"
7    ></footer>
8    <GlobalFooter
9      :style="{
10        margin: '0',
11        height: '48px',
12        lineHeight: '48px',
13        right: '0px',
14        bottom: '0px',
15        position: fixedHeader ? 'fixed' : 'unset',
16        width: fixedHeader ? width : '100%',
17        overflow: 'hidden',
18        zIndex: 14,
19        background: '#fff',
20        boxShadow: '0 1px 4px #0015291f',
21        transition: 'background 0.3s, width 0.2s',
22      }"
23      :links="[        {          blankTarget: true,          title: 'Link 1',          href: '#',        },        {          blankTarget: false,          title: 'Link 2',          href: 'https://gitee.com/TsMask/',        },        {          blankTarget: true,          title: 'Link 3',          href: '#',        },      ]"
24      copyright="Copyright &copy; 2023 Gitee For TsMask"
25    >
26    </GlobalFooter>
27  </div>
28</template>

Component Footer - GlobalFooter

Property	Description	Type	Default Value
links	Required, link jump	Array<{ key?: string; title: string; href: string; blankTarget?: boolean; }>	-
copyright	Copyright notice area	v-slot | VNode | (props: BasicLayoutProps) => VNode | false	undefined

1<GlobalFooter
2  :links="[
3    {
4      blankTarget: true,
5      title: 'Link 1',
6      href: '#',
7    },
8    {
9      blankTarget: false,
10      title: 'Link 2',
11      href: 'https://gitee.com/TsMask/',
12    },
13    {
14      blankTarget: true,
15      title: 'Link 3',
16      href: '#',
17    },
18  ]"
19  copyright="Copyright &copy; 2023 Gitee For TsMask"
20></GlobalFooter>

Component content page - PageContainer

Contains the ANTDV component API attributes: PageHeader、Affix

Property	Description	Type	Default Value
loading	Load status	boolean	false
flex	The content layout is full, with a default fixed width of 1200px	boolean	false
fixed-header	Fix the page header to the top	boolean	false
affixProps	Configuration of fasteners	affix	{offsetTop: 48}
pageFooter	Render footer slot	VNode | v-slot	-
pageHeader	The render header replaces the page header component slot	VNode | v-slot	-
...	The PageHeader property	PageHeader API	-
breadcrumb	Page header breadcrumb configuration, {} configuration is not displayed	breadcrumb	-
content	Page header default slot	VNode | v-slot	-
contentExtra	The default slot space on the right side of the page header	VNode | v-slot	-
tab-list	Pageheader footer slot no time to display the tag list	Array<{key: string, tab: any}>	-
tab-active-key	The list of tags currently activates the key	string	-
tab-change	Tab list tab is a callback for being clicked	(key) => void	-
tab-props	Tab list tab properties	tabs	-

Basic Usage

Recommend look Examples or Use Template

Source Project Repository Branch

From @ant-design-vue/pro-layout

• next : Vue3 + ant-design-vue@3.x (latest)
• v3.1 : Vue3 + ant-design-vue@2.2.x (release LTS)
• v2 : Vue2 + ant-design-vue@1.7.x

The version is still being updated v4

Continuous Maintenance

1# Required dependencies for installation
2npm install
3
4# The packaged build dist directory contains the d.ts file
5npm run build