Ant Design Vue — Spacing and Breadcrumbs

Image for post
Image for post
Photo by Ryan Wallace 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.

Space

We can add components with spacing with the a-space component.

For example, we can write:

<template>
<div id="app">
<a-space size="small">
<a-button type="primary">Primary</a-button>
<a-button>Default</a-button>
<a-button type="dashed">Dashed</a-button>
<a-button type="link">Link</a-button>
</a-space>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

We set the size of the space with the size prop.

Affix

We make a component stick to a viewport with the a-affix component.

For example, we can write:

<template>
<div id="app">
<a-affix :offset-top="top">
<a-button type="primary" @click="top += 10">Affix top</a-button>
</a-affix>
<br>
<a-affix :offset-bottom="bottom">
<a-button type="primary" @click="bottom += 10">Affix bottom</a-button>
</a-affix>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
top: 20,
bottom: 20
};
}
};
</script>

We make them stick to the top with the offset-top prop.

And we make the component stick to the bottom with the offset-bottom prop.

Breadcrumb

We can add a breadcrumb with the a-breadcrumb component.

For example, we can write:

<template>
<div id="app">
<a-breadcrumb>
<a-breadcrumb-item>Home</a-breadcrumb-item>
<a-breadcrumb-item>
<a href>Application Center</a>
</a-breadcrumb-item>
<a-breadcrumb-item>
<a href>Application List</a>
</a-breadcrumb-item>
<a-breadcrumb-item>An Application</a-breadcrumb-item>
</a-breadcrumb>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

We can also add breadcrumb item with icons by writing:

<template>
<div id="app">
<a-breadcrumb>
<a-breadcrumb-item href="">
<a-icon type="home" />
</a-breadcrumb-item>
<a-breadcrumb-item href="">
<a-icon type="user" />
<span>Application List</span>
</a-breadcrumb-item>
<a-breadcrumb-item>
Application
</a-breadcrumb-item>
</a-breadcrumb>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

It also works with Vue Router.

For example, we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import VueRouter from "vue-router";
Vue.use(Antd);
Vue.use(VueRouter);
Vue.config.productionTip = false;
const routes = [];const router = new VueRouter({
routes
});
new Vue({
router,
render: (h) => h(App)
}).$mount("#app");

App.vue

<template>
<div id="app">
<a-breadcrumb :routes="routes">
<template slot="itemRender" slot-scope="{ route, params, routes, paths }">
<span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
<router-link v-else :to="`${basePath}/${paths.join('/')}`">{{ route.breadcrumbName }}</router-link>
</template>
</a-breadcrumb>
<br>
{{ $route.path }}
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
basePath: "/components/breadcrumb",
routes: [
{
path: "index",
breadcrumbName: "home"
},
{
path: "first",
breadcrumbName: "first",
children: [
{
path: "/general",
breadcrumbName: "General"
},
{
path: "/layout",
breadcrumbName: "Layout"
}
]
},
{
path: "second",
breadcrumbName: "second"
}
]
};
}
};
</script>

to add breadcrumb with router-link components.

We put the router-link s into the itemRender slot to render them.

The routes prop takes an array of objects with the path , children and breadcrumbName properties.

Conclusion

We can add breadcrumbs for navigation 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