3.2.3 • Published 3 months ago

@ant-design-vue/pro-layout v3.2.3

Weekly downloads
1,375
License
-
Repository
-
Last release
3 months ago

NPM version Vue Support Vue Grammar Level NPM downloads License

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

# 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.

// 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:

<template>
  <pro-layout
    :locale="locale"
    v-bind="layoutConf"
    v-model:openKeys="state.openKeys"
    v-model:collapsed="state.collapsed"
    v-model:selectedKeys="state.selectedKeys"
  >
    <router-view />
  </pro-layout>
</template>

<script setup lang="ts">
import { reactive, useRouter } from 'vue';
import { getMenuData, clearMenuItem } from '@ant-design-vue/pro-layout';

const locale = (i18n: string) => i18n;
const router = useRouter();

const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));

const state = reactive({
  collapsed: false, // default value
  openKeys: ['/dashboard'],
  selectedKeys: ['/welcome'],
})
const layoutConf = reactive({
  navTheme: 'dark',
  layout: 'mix',
  splitMenus: false,
  menuData,
});
</script>

API

ProLayout

PropertyDescriptionTypeDefault Value
titlelayout in the upper left corner titleVNode | String'Ant Design Pro'
logolayout top left logo urlVNode | render-
loadinglayout loading statusboolean-
layoutlayout menu mode, sidemenu: right navigation, topmenu: top navigation'side' | 'top' | 'mix''side'
contentWidthcontent mode of layout, Fluid: adaptive, Fixed: fixed width 1200px'Fixed' | 'Fluid'Fluid
navThemeNavigation theme'light' |'dark''light'
headerThemeHeader Bar theme'light' |'dark''light'
menuDataVue-router routes propObject[{}]
collapsedcontrol menu's collapse and expansionbooleantrue
selectedKeysmenu selected keysstring[][]
openKeysmenu openKeysstring[][]
isMobileis mobilebooleanfalse
onCollapse | @collapsefolding collapse event of menu(collapsed: boolean) => void-
menuHeaderRenderrender header logo and titlev-slot | VNode | (logo,title)=>VNode | false-
menuExtraRenderrender extra menu itemv-slot | VNode | (props)=>VNode | false-
menuFooterRenderrender footer menu itemv-slot | VNode | (props)=>VNode | false-
headerContentRendercustom header render methodslot | (props: BasicLayoutProps) => VNode-
rightContentRenderheader right content render methodslot | (props: HeaderViewProps) => VNode-
collapsedButtonRendercustom collapsed button methodslot | (collapsed: boolean) => VNode-
footerRendercustom footer render methodslot | (props: BasicLayoutProps) => VNodefalse
breadcrumbRendercustom breadcrumb render methodslot | ({ route, params, routes, paths, h }) => VNode[]-
menuItemRendercustom render Menu.Itemv-slot#menuItemRender="{ item, icon }" | ({ item, icon }) => VNodenull
subMenuItemRendercustom render Menu.SubItemv-slot#subMenuItemRender="{ item, icon }" | ({ item, icon }) => VNodenull
localei18nFunction (key: string) => string | falsefalse

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

PageContainer

PropertyDescriptionTypeDefault Value
contentContent areaVNode | v-slot-
extraExtra content area, on the right side of contentVNode | v-slot-
extraContentExtra content area, on the right side of contentVNode | v-slot-
tabListTabs title listArray<{key: string, tab: sting}>-
tab-changeSwitch panel callback(key) => void-
tab-active-keyThe currently highlighted tab itemstring-

WaterMark

PropertyDescriptionTypeDefault Value
markStylemark styleCSSProperties-
markClassNamemark classstring-
gapXHorizontal spacing between water-marknumber212
gapYVertical spacing between watermarknumber222
offsetLeftHorizontal offsetnumberoffsetTop = gapX / 2
offsetTopVertical offsetnumberoffsetTop = gapY / 2
widthnumber120
heightnumber64
rotateAngle of rotation, unit °number-22
imageimage srcstring-
zIndexwater-mark z-indexnumber9
contentwater-mark Contentstring-
fontColorfont-colorstringrgba(0,0,0,.15)
fontSizefont-sizestring\|number16

Custom Render

Custom rightContentRender

<template #rightContentRender>
  <div style="margin-right: 12px">
    <a-avatar shape="square" size="small">
      <template #icon>
        <UserOutlined />
      </template>
    </a-avatar>
  </div>
</template>

Custom menu.item

<template #menuItemRender="{ item, icon }">
  <a-menu-item
    :key="item.path"
    :disabled="item.meta?.disabled"
    :danger="item.meta?.danger"
    :icon="icon"
  >
    <router-link :to="{ path: item.path }">
      <span class="ant-pro-menu-item">
        <a-badge count="5" dot>
          <span class="ant-pro-menu-item-title">{{ item.meta.title }}</span>
        </a-badge>
      </span>
    </router-link>
  </a-menu-item>
</template>

Custom menuExtraRender

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

Custom menuFooterRender

<template #menuFooterRender>
  <div>menu footer</div>
</template>

Custom breadcrumbRender

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

Custom collapsedButtonRender

<template #collapsedButtonRender="collapsed">
  <HeartOutlined v-if="collapsed" />
  <SmileOutlined v-else />
</template>

Custom footer with slot

<GlobalFooter>
  <template #links>
    <a>链接1</a>
    <a>链接2</a>
    <a>链接3</a>
    <a>链接4</a>
  </template>
  <template #copyright>
    <span>Pro Layout &copy; 2021 Sendya.</span>
  </template>
</GlobalFooter>

Custom footer with props

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

Use WaterMark

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

Build project

pnpm build # Build library and .d.ts
3.2.3

3 months ago

1.0.13

4 months ago

3.2.2

6 months ago

3.2.1

6 months ago

3.2.0

6 months ago

3.2.0-alpha.4

7 months ago

3.2.0-alpha.5

7 months ago

3.2.0-alpha.1

7 months ago

3.2.0-alpha.2

7 months ago

3.2.0-alpha.3

7 months ago

3.2.0-rc.0

7 months ago

3.2.0-rc.2

7 months ago

3.2.0-rc.1

7 months ago

3.2.0-rc.4

7 months ago

3.2.0-rc.3

7 months ago

3.2.0-rc.5

7 months ago

1.0.12

6 months ago

3.1.10-beta.2

10 months ago

3.1.10-beta.1

10 months ago

3.1.12

10 months ago

3.1.11

10 months ago

3.1.13

9 months ago

3.1.10

10 months ago

3.1.9

10 months ago

3.1.8

10 months ago

1.0.9

11 months ago

3.1.7

10 months ago

3.1.6

11 months ago

3.1.5

11 months ago

3.1.4

11 months ago

1.0.11

10 months ago

1.0.10

11 months ago

3.1.3

11 months ago

3.1.2

12 months ago

3.1.1

12 months ago

3.1.0

1 year ago

3.1.0-beta.5

1 year ago

3.1.0-beta.6

1 year ago

3.1.0-beta.4

1 year ago

3.1.0-beta.3

1 year ago

3.1.0-beta.1

1 year ago

3.1.0-beta.2

1 year ago

3.1.0-alpha.10

1 year ago

3.1.0-alpha.9

1 year ago

3.1.0-alpha.8

1 year ago

3.1.0-alpha.7

1 year ago

3.1.0-alpha.6

1 year ago

3.1.0-alpha.4

1 year ago

3.1.0-alpha.2

1 year ago

3.1.0-alpha.3

1 year ago

3.1.0-alpha.1

1 year ago

3.0.0-beta.13

1 year ago

3.0.0-beta.14

1 year ago

3.1.0-alpha.0

1 year ago

3.0.0-beta.10

1 year ago

3.0.0-beta.11

1 year ago

3.0.0-beta.12

1 year ago

3.0.0-beta.7

1 year ago

3.0.0-beta.9

1 year ago

3.0.0-beta.8

1 year ago

3.0.0-beta.6

1 year ago

3.0.0-beta.5

2 years ago

3.0.0-beta.4

2 years ago

3.0.0-beta.3

2 years ago

3.0.0-beta.2

2 years ago

3.0.0-beta.1

2 years ago

3.0.0-alpha.8

2 years ago

3.0.0-alpha.7

2 years ago

3.0.0-alpha.6

2 years ago

3.0.0-alpha.5

2 years ago

1.0.8

2 years ago

3.0.0-alpha.4

2 years ago

3.0.0-alpha.3

2 years ago

3.0.0-alpha.2

2 years ago

1.0.7

2 years ago

3.0.0-alpha.1

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.1-0

2 years ago

1.0.0

2 years ago

0.3.13

2 years ago

0.3.12

2 years ago

0.3.11

2 years ago

0.3.10

2 years ago

0.3.9

2 years ago

0.3.8

2 years ago

0.3.7

2 years ago

0.3.6-0

2 years ago

0.3.6

2 years ago

0.3.5

2 years ago

0.3.4

2 years ago

0.3.3

2 years ago

0.3.2

2 years ago

0.3.0

2 years ago

0.2.11-0

2 years ago

0.2.10

2 years ago

0.2.9

2 years ago

0.2.8

2 years ago

0.2.7

2 years ago

0.2.6

2 years ago

0.2.5

2 years ago

0.2.4

2 years ago

0.2.3

2 years ago

0.2.2

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.1.2-0

3 years ago

0.1.1-beta.5

3 years ago

0.1.1-beta.2

3 years ago

0.1.1-beta.3

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago