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.
