Need help with pro-layout?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

vueComponent
266 Stars 124 Forks MIT License 270 Commits 0 Opened issues

Description

easy use `Ant Design Vue` layout

Services available

!
?

Need anything else?

Contributors list

Ant Design Pro Layout

NPM version Vue Support Vue Grammar Level NPM downloads License

Install

# yarn
yarn add @ant-design-vue/[email protected]
# npm
npm i @ant-design-vue/[email protected] -S
💻 Preview layout:

Basic Usage

Recommend look Examples | *Use Template https://github.com/sendya/preview-pro *

Simple Usage

First, you should add the

@ant-design-vue/pro-layout
that you need into the library.
// main.[js|ts]
import 'ant-design-vue/dist/antd.less'; // antd css
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:

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
| | theme | Navigation menu theme | 'light' | 'dark' |
'light'
| | navTheme | Navigation 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 | | handleCollapse | 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 | - | | headerContentRender | custom header render method |
slot
| (props: BasicLayoutProps) => VNode | - | | rightContentRender | header right content render method |
slot
| (props: HeaderViewProps) => VNode | - | | collapsedButtonRender | custom collapsed button method |
slot
| (collapsed: boolean) => VNode | - | | footerRender | custom footer render method |
slot
| (props: BasicLayoutProps) => VNode |
false
| | breadcrumbRender | custom breadcrumb render method |
slot
| ({ route, params, routes, paths, h }) => VNode[] | - | | menuItemRender | custom render Menu.Item | v-slot#menuItemRender="{ item, icon }" | ({ item, icon }) => VNode | null | | menuSubItemRender | custom render Menu.SubItem | v-slot#menuSubItemRender="{ item, icon }" | ({ item, icon }) => VNode | null | | locale | i18n | Function (key: string) => string |
false
|
false
|

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
| - | | tab-change | Switch panel callback | (key) => void | - | | tab-active-key | The currently highlighted tab item | string | - |

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


Custom menu.item


Custom menuExtraRender


Custom menuFooterRender


Custom breadcrumbRender


Custom collapsedButtonRender


Use WaterMark

  
    
  

Build project

npm run build # Build library
npm run build:types # Build d.ts

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.