Ant Design Vue — Grids and Layouts

Image for post
Image for post
Photo by Rostyslav Savchyn 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.

Grid Order

We can change the grid order by setting the order prop:

<template>
<div id="app">
<a-row type="flex">
<a-col :span="6" :order="4">1 order-4</a-col>
<a-col :span="6" :order="3">2 order-3</a-col>
<a-col :span="6" :order="2">3 order-2</a-col>
<a-col :span="6" :order="1">4 order-1</a-col>
</a-row>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

We set the order to a number.

Grid Column Offset

We can add the offset prop to add gaps between grid columns. For example, we can write:

<template>
<div id="app">
<a-row>
<a-col :span="8">col-8</a-col>
<a-col :span="8" :offset="8">col-8</a-col>
</a-row>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

Responsive Grid

We can set the sizes of the columns at different breakpoints.

For example, we can write:

<template>
<div id="app">
<a-row>
<a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
<a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">Col</a-col>
<a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
</a-row>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

to set the column size for the xs , sm , md and lg breakpoints.

Push and Pull

We can also set the column order with the push and pull props:

<template>
<div id="app">
<a-row>
<a-col :span="18" :push="6">col-18 col-push-6</a-col>
<a-col :span="6" :pull="18">col-6 col-pull-18</a-col>
</a-row>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

Layout

Ant Design Vue comes with various components for creating layouts.

We can use the a-layout , a-layout-header , a-layout-content , and a-layout-footer components:

<template>
<div id="app">
<a-layout>
<a-layout-header>Header</a-layout-header>
<a-layout-content>Content</a-layout-content>
<a-layout-footer>Footer</a-layout-footer>
</a-layout>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

The header is black.

We can trigger content to be displayed when we click on a link on a menu:

<template>
<div id="app">
<a-layout id="components-layout-demo-custom-trigger">
<a-layout-sider v-model="collapsed" :trigger="null" collapsible>
<div class="logo"/>
<a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
<a-menu-item key="1">
<a-icon type="user"/>
<span>nav 1</span>
</a-menu-item>
<a-menu-item key="2">
<a-icon type="video-camera"/>
<span>nav 2</span>
</a-menu-item>
<a-menu-item key="3">
<a-icon type="upload"/>
<span>nav 3</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout>
<a-layout-header style="background: #fff; padding: 0">
<a-icon
class="trigger"
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
@click="() => (collapsed = !collapsed)"
/>
</a-layout-header>
<a-layout-content
:style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
>Content</a-layout-content>
</a-layout>
</a-layout>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
collapsed: false
};
}
};
</script>

We created a sidebar menu with the a-menu component. How it’s displaying us controlled by the collapsed component.

a-layout displays beside the menu.

Conclusion

We can add layouts and grids 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