vueComponent/ pro-layout

(1.0.8) about 1 month ago

TypeScript

Shell

JavaScript

Less

antd

Vue.js

View on GitHub

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

151 Stars

91 Forks

MIT License

173 Commits

32 Opened issues

Description

easy use `Ant Design Vue` layout

Services available

Need anything else?

Contributors list

Readme

Ant Design Pro Layout

Name: pro-layout
Brand: pro-layout
SKU: //vueComponent/pro-layout
Rating: 2.1275 (151 reviews)

Install

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

Basic Usage

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

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:

TSX

```tsx import { defineComponent, reactive } from 'vue'; import ProLayout, { createRouteContext, RouteContextProps } from '@ant-design-vue/pro-layout';

export default defineComponent({ setup () { const [ RouteContextProvider ] = createRouteContext();

  const state = reactive({
    collapsed: false,

openKeys: ['/dashboard'],
setOpenKeys: (keys: string[]) =&gt; (state.openKeys = keys),
selectedKeys: ['/welcome'],
setSelectedKeys: (keys: string[]) =&gt; (state.selectedKeys = keys),

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

}) ```

Build project

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