Ant Design Pro Layout
[](https://npmjs.org/package/@ant-design-vue/pro-layout) [](./package.json) [](https://v3.vuejs.org/guide/composition-api-introduction.html) [](https://npmjs.org/package/@ant-design-vue/pro-layout) [](./LICENSE)
💻 Preview layout:
## Basic Usage
Recommend look [Examples](./examples/) or [Use Template](https://github.com/sendya/preview-pro)
## 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
```bash
# yarn
yarn add @ant-design-vue/pro-layout
# npm
npm 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.
```js
// main.[js|ts]
import "@ant-design-vue/pro-layout/dist/style.css"; // pro-layout css or style.less
import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import ProLayout, { PageContainer } from "@ant-design-vue/pro-layout";
const app = createApp(App);
app.use(Antd).use(ProLayout).use(PageContainer).mount("#app");
```
After that, you can use pro-layout in your Vue components as simply as this:
```vue
```
## 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
```vue
```
#### Custom menu.item
```vue
```
#### Custom menuExtraRender
```vue
```
#### Custom menuFooterRender
```vue
menu footer
```
#### Custom breadcrumbRender
```vue
{{ route.breadcrumbName }}
{{ route.breadcrumbName }}
```
#### Custom collapsedButtonRender
```vue
```
#### Custom tabRender
```vue
tabRender fixedHeader：{{fixedHeader}} width：{{ width }}
```
#### Custom footer with slot
```vue
footerRender headerTheme：{{ headerTheme }} width：{{ width }}
```
#### Custom footer with props
```vue
```
### Use WaterMark
```vue
```
## Build project
```bash
pnpm build # Build library and .d.ts
```