Ant Design Vue — Layouts

Image for post
Image for post
Photo by Charlie Deets on Unsplash

Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.

In this article, we’ll look at how to use it in our Vue apps.

Header and Side Bar

We can add a header and sidebar together. For example, we can write:

<template>
<div id="app">
<a-layout id="components-layout-demo-top-side-2">
<a-layout-header class="header">
<div class="logo"/>
<a-menu
theme="dark"
mode="horizontal"
:default-selected-keys="['2']"
:style="{ lineHeight: '64px' }"
>
<a-menu-item key="1">nav 1</a-menu-item>
<a-menu-item key="2">nav 2</a-menu-item>
<a-menu-item key="3">nav 3</a-menu-item>
</a-menu>
</a-layout-header>
<a-layout>
<a-layout-sider width="200" style="background: #fff">
<a-menu
mode="inline"
:default-selected-keys="['1']"
:default-open-keys="['sub1']"
:style="{ height: '100%', borderRight: 0 }"
>
<a-sub-menu key="sub1">
<span slot="title">
<a-icon type="user"/>subnav 1
</span>
<a-menu-item key="1">option1</a-menu-item>
<a-menu-item key="2">option2</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<span slot="title">
<a-icon type="laptop"/>subnav 2
</span>
<a-menu-item key="3">option3</a-menu-item>
<a-menu-item key="4">option4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub3">
<span slot="title">
<a-icon type="notification"/>subnav 3
</span>
<a-menu-item key="5">option5</a-menu-item>
<a-menu-item key="6">option60</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>
<a-layout style="padding: 0 24px 24px">
<a-breadcrumb style="margin: 16px 0">
<a-breadcrumb-item>Home</a-breadcrumb-item>
<a-breadcrumb-item>List</a-breadcrumb-item>
<a-breadcrumb-item>App</a-breadcrumb-item>
</a-breadcrumb>
<a-layout-content
:style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
>Content</a-layout-content>
</a-layout>
</a-layout>
</a-layout>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
collapsed: false
};
}
};
</script>

We put the a-layout-header component on top.

Then the a-layout contains the a-layout-sider with the sidebar.

a-sub-menu has the submenus.

The bottom a-layout has the content.

Header and Content

We can also add a header and content without the sidebar:

<template>
<div id="app">
<a-layout id="components-layout-demo-top" class="layout">
<a-layout-header>
<div class="logo"/>
<a-menu
theme="dark"
mode="horizontal"
:default-selected-keys="['2']"
:style="{ lineHeight: '64px' }"
>
<a-menu-item key="1">nav 1</a-menu-item>
<a-menu-item key="2">nav 2</a-menu-item>
<a-menu-item key="3">nav 3</a-menu-item>
</a-menu>
</a-layout-header>
<a-layout-content style="padding: 0 50px">
<a-breadcrumb style="margin: 16px 0">
<a-breadcrumb-item>Home</a-breadcrumb-item>
<a-breadcrumb-item>List</a-breadcrumb-item>
<a-breadcrumb-item>App</a-breadcrumb-item>
</a-breadcrumb>
<div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">Content</div>
</a-layout-content>
<a-layout-footer style="text-align: center">Ant Design</a-layout-footer>
</a-layout>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
collapsed: false
};
}
};
</script>

We just add the a-layout-content without the a-layout component.

Also, we can add the sidebar without the header:

<template>
<div id="app">
<a-layout id="components-layout-demo-responsive">
<a-layout-sider
breakpoint="lg"
collapsed-width="0"
@collapse="onCollapse"
@breakpoint="onBreakpoint"
>
<div class="logo"/>
<a-menu theme="dark" mode="inline" :default-selected-keys="['4']">
<a-menu-item key="1">
<a-icon type="user"/>
<span class="nav-text">nav 1</span>
</a-menu-item>
<a-menu-item key="2">
<a-icon type="video-camera"/>
<span class="nav-text">nav 2</span>
</a-menu-item>
<a-menu-item key="3">
<a-icon type="upload"/>
<span class="nav-text">nav 3</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout>
<a-layout-header :style="{ background: '#fff', padding: 0 }"/>
<a-layout-content :style="{ margin: '24px 16px 0' }">
<div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">content</div>
</a-layout-content>
<a-layout-footer style="textAlign: center">Ant Design</a-layout-footer>
</a-layout>
</a-layout>
</div>
</template>
<script>
export default {
name: "App",
methods: {
onCollapse(collapsed, type) {
console.log(collapsed, type);
},
onBreakpoint(broken) {
console.log(broken);
}
}
};
</script>

Conclusion

We can add various layouts with Ant Design Vue.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store