@ant-design-vue/pro-layout

Ant Design Pro Layout

Install

# yarn
yarn add @ant-design-vue/pro-layout@next
# npm
npm i @ant-design-vue/pro-layout@next -S

Basic Usage

First, you should add the icons that you need into the library.

import 'ant-design-vue/dist/antd.less'; // antd css
import '@ant-design-vue/pro-layout/dist/style.css'; // pro-layout css

import { createApp } from 'vue';
import ProLayout, { PageContainer } from '@ant-design-vue/pro-layout';

const app = createApp();

app.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="state"
    v-model:openKeys="state.openKeys"
    v-model:collapsed="state.collapsed"
    v-model:selectedKeys="state.selectedKeys"
  >
    <router-view />
  </pro-layout>
</template>

<script>
import { defineComponent, reactive } from 'vue';
// import { getMenuData, clearMenuItem } from '@ant-design-vue/pro-layout';

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

export default defineComponent({
  setup() {
    const state = reactive({
      collapsed: false,
      openKeys: ['/dashboard'],
      selectedKeys: ['/welcome'],

      isMobile: false,
      fixSiderbar: false,
      fixedHeader: false,
      menuData: [],
      sideWidth: 208,
      hasSideMenu: true,
      hasHeader: true,
      hasFooterToolbar: false,
      setHasFooterToolbar: has => (state.hasFooterToolbar = has),
    });

    return {
      locale,
      state,
    };
  },
});
</script>

or TSX

import { defineComponent, reactive } from 'vue';
import { RouterView } from 'vue-router';
import ProLayout from '@ant-design-vue/pro-layout';
import '@ant-design-vue/pro-layout/dist/style.css'; // pro-layout css

export default defineComponent({
  setup() {
    const state = reactive({
      collapsed: false,

      openKeys: ['/dashboard'],
      selectedKeys: ['/welcome'],

      isMobile: false,
      fixSiderbar: false,
      fixedHeader: false,
      menuData: [],
      sideWidth: 208,
      hasSideMenu: true,
      hasHeader: true,
      hasFooterToolbar: false,
      setHasFooterToolbar: (has: boolean) => (state.hasFooterToolbar = has),
    });

    return () => (
      <ProLayout {...state} locale={(i18n: string) => i18n}>
        <RouterView />
      </ProLayout>
    );
  },
});

Build project

npm run build # Build library
npm run test # Runing Test