Member-only story

Ant Design Vue — Spacing and Breadcrumbs

John Au-Yeung
3 min readJan 11, 2021

--

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…

--

--

No responses yet