Ant Design Pro Layout

💻 Preview layout:

Basic Usage

Recommend look Examples or Use Template

Branch

• 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

Install

1# yarn
2yarn add @ant-design-vue/pro-layout
3# npm
4npm i @ant-design-vue/pro-layout -S

Simple Usage

First, you should add the @ant-design-vue/pro-layout that you need into the library.

1// main.[js|ts]
2import "@ant-design-vue/pro-layout/dist/style.css"; // pro-layout css or style.less
3
4import { createApp } from "vue";
5import App from "./App.vue";
6import Antd from "ant-design-vue";
7import ProLayout, { PageContainer } from "@ant-design-vue/pro-layout";
8
9const app = createApp(App);
10
11app.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    v-bind="layoutConf"
5    v-model:openKeys="state.openKeys"
6    v-model:collapsed="state.collapsed"
7    v-model:selectedKeys="state.selectedKeys"
8  >
9    <router-view />
10  </pro-layout>
11</template>
12
13<script setup lang="ts">
14import { reactive, useRouter } from "vue";
15import { getMenuData, clearMenuItem } from "@ant-design-vue/pro-layout";
16
17const locale = (i18n: string) => i18n;
18const router = useRouter();
19
20const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
21
22const state = reactive({
23  collapsed: false, // default value
24  openKeys: ["/dashboard"],
25  selectedKeys: ["/welcome"],
26});
27const layoutConf = reactive({
28  navTheme: "dark",
29  layout: "mix",
30  splitMenus: false,
31  menuData,
32});
33</script>

API

ProLayout

Property	Description	Type	Default Value
title	layout in the upper left corner title	VNode | String	'Ant Design Pro'
logo	layout top left logo url	VNode | render	-
loading	layout loading status	boolean	-
layout	layout menu mode, sidemenu: right navigation, topmenu: top navigation	'side' | 'top' | 'mix'	'side'
contentWidth	content mode of layout, Fluid: adaptive, Fixed: fixed width 1200px	'Fixed' | 'Fluid'	Fluid
navTheme	Navigation theme	'light' |'dark'	'light'
headerTheme	Header Bar theme	'light' |'dark'	'light'
menuData	Vue-router routes prop	Object	[{}]
collapsed	control menu's collapse and expansion	boolean	true
selectedKeys	menu selected keys	string[]	[]
openKeys	menu openKeys	string[]	[]
isMobile	is mobile	boolean	false
onCollapse | @collapse	folding collapse event of menu	(collapsed: boolean) => void	-
menuHeaderRender	render header logo and title	v-slot | VNode | (logo,title)=>VNode | false	-
menuExtraRender	render extra menu item	v-slot | VNode | (props)=>VNode | false	-
menuFooterRender	render footer menu item	v-slot | VNode | (props)=>VNode | false	-
menuItemRender	custom render Menu.Item	v-slot#menuItemRender="{ item, icon }" | ({ item, icon }) => VNode	null
subMenuItemRender	custom render Menu.SubItem	v-slot#subMenuItemRender="{ item, icon }" | ({ item, icon }) => VNode	null
collapsedButtonRender	custom collapsed button method	slot | (collapsed: boolean) => VNode	-
headerRender	custom header render method	slot | (props: BasicLayoutProps) => VNode	-
headerContentRender	header content render method only layout side	slot | (props: BasicLayoutProps) => VNode	-
rightContentRender	header right content render method	slot | (props: BasicLayoutProps) => VNode	-
footerRender	custom footer render method	slot | ({ width, ...BasicLayoutProps }) => VNode	false
tabRender	custom tab render method	slot | ({ width, ...BasicLayoutProps }) => VNode	false
breadcrumbRender	custom breadcrumb render method	slot | ({ route, params, routes, paths, h }) => VNode[]	-
locale	i18n	Function (key: string) => string | false	false

Menu generation requires getMenuData and clearMenuItem function e.g. const { menuData } = getMenuData(clearMenuItem(routes))

PageContainer

Property	Description	Type	Default Value
content	Content area	VNode | v-slot	-
extra	Extra content area, on the right side of content	VNode | v-slot	-
extraContent	Extra content area, on the right side of content	VNode | v-slot	-
tabList	Tabs title list	Array<{key: string, tab: sting}>	-
tab-change	Switch panel callback	(key) => void	-
tab-active-key	The currently highlighted tab item	string	-
breadcrumb	Show Bread crumbs bar	Boolean	-

WaterMark

Property	Description	Type	Default Value
markStyle	mark style	CSSProperties	-
markClassName	mark class	string	-
gapX	Horizontal spacing between water-mark	number	212
gapY	Vertical spacing between watermark	number	222
offsetLeft	Horizontal offset	number	offsetTop = gapX / 2
offsetTop	Vertical offset	number	offsetTop = gapY / 2
width		number	120
height		number	64
rotate	Angle of rotation, unit °	number	-22
image	image src	string	-
zIndex	water-mark z-index	number	9
content	water-mark Content	string	-
fontColor	font-color	string	rgba(0,0,0,.15)
fontSize	font-size	string|number	16

Custom Render

Custom rightContentRender

1<template #rightContentRender>
2  <div style="margin-right: 12px">
3    <a-avatar shape="square" size="small">
4      <template #icon>
5        <UserOutlined />
6      </template>
7    </a-avatar>
8  </div>
9</template>

Custom menu.item

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

Custom menuExtraRender

1<template #menuExtraRender="{ collapsed }">
2  <a-input-search v-if="!collapsed" />
3</template>

Custom menuFooterRender

1<template #menuFooterRender>
2  <div>menu footer</div>
3</template>

Custom breadcrumbRender

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

Custom collapsedButtonRender

1<template #collapsedButtonRender="collapsed">
2  <HeartOutlined v-if="collapsed" />
3  <SmileOutlined v-else />
4</template>

Custom 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        zIndex: 14,
17        padding: '4px 16px',
18        width: width,
19        background: '#fff',
20        boxShadow: '0 1px 4px #0015291f',
21        transition: 'background 0.3s, width 0.2s',
22      }"
23    >
24      tabRender fixedHeader：{{fixedHeader}} width：{{ width }} 
25    </div>
26  </div>
27</template>

Custom footer with slot

1<template #footerRender="{ width, headerTheme }">
2  <div>
3    <footer class="ant-layout-footer" style="height: 36px; line-height: 36px; background: transparent"></footer>
4    <div
5      :style="{
6        margin: '0',
7        height: '36px',
8        lineHeight: '36px',
9        right: '0px',
10        bottom: '0px',
11        position: headerTheme == 'dark' ? 'fixed' : 'unset',
12        zIndex: 14,
13        padding: '4px 16px',
14        width: width,
15        background: '#fff',
16        boxShadow: '0 1px 4px #0015291f',
17        transition: 'background 0.3s, width 0.2s'
18      }"
19    >
20      footerRender headerTheme：{{ headerTheme }} width：{{ width }}
21    </div>
22  </div>
23</template>

Custom footer with props

1<GlobalFooter
2  :links="[
3    { title: 'Link 1', href: '#' },
4    { title: 'Link 2', href: '#' },
5  ]"
6  copyright="Pro Layout &copy; 2021 Sendya."
7/>

Use WaterMark

1<router-view v-slot="{ Component }">
2  <WaterMark content="Pro Layout">
3    <component :is="Component" />
4  </WaterMark>
5</router-view>

Build project

1pnpm build # Build library and .d.ts