vueComponent/ pro-layout
About the developer
266 Stars 
124 Forks 
MIT License 
270 Commits 
0 Opened issues 
Description
easy use `Ant Design Vue` layout
Services available
Contributors list
Ant Design Pro Layout
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-layoutthat 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.lessimport { 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
routesprop | 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