Ant Design Vue — Spacing and Breadcrumbs

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.