Member-only story
Ant Design Vue — Spacing and Breadcrumbs
3 min readJan 11, 2021
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…