Categories
Ant Design Vue

Getting Started with Ant Design Vue

Spread the love

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.

Getting Started

We can install AntD Vue by running:

npm i --save ant-design-vue

Then we can register the plugin by writing:

import Vue from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
Vue.use(Antd);
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

This will register the components and load the CSS.

Buttons

We can add buttons with AntD Vue by using the a-button component”

<template>
  <div id="app">
    <a-button type="primary">Primary</a-button>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

The type is the color type.

We can add a button group by writing:

<template>
  <div id="app">
    <a-button-group>
      <a-button>L</a-button>
      <a-button disabled>M</a-button>
      <a-button disabled>R</a-button>
    </a-button-group>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We can add an icon with the icon prop:

<template>
  <div id="app">
    <a-button icon="search">Search</a-button>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

To make a button a block-level element, we can add the block prop:

<template>
  <div id="app">
    <a-button type="primary" block>Primary</a-button>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Also, we can make it show a loading indicator with the loading prop:

<template>
  <div id="app">
    <a-button type="primary" loading>Loading</a-button>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

The size can be changed with the size prop:

<template>
  <div id="app">
    <a-button type="primary" size="large">Primary</a-button>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Icon

AntD Vue comes with various icons.

For example, we can add one by writing:

<template>
  <div id="app">
    <a-icon type="step-backward"/>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We use the a-icon component to add the icon.

There are many more we can add. The list is at https://www.antdv.com/components/icon/.

Grid

Ant Design Vue comes with its own layout grid. We can add it with the a-row and a-col components:

<template>
  <div id="app">
    <a-row>
      <a-col :span="12">col-12</a-col>
      <a-col :span="12">col-12</a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We set the span prop to a value from 0 to 12 to make the layout.

It supports flexbox, and we can set the options with the justify and align props:

<template>
  <div id="app">
    <a-row type="flex" justify="center" align="top">
      <a-col :span="4">
        <p class="height-100">col-4</p>
      </a-col>
      <a-col :span="4">
        <p class="height-50">col-4</p>
      </a-col>
      <a-col :span="4">
        <p class="height-120">col-4</p>
      </a-col>
      <a-col :span="4">
        <p class="height-80">col-4</p>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Now they are all centered.

Conclusion

We can use Ant Design Vue to create a good looking UI in our Vue app.

Leave a Reply

Your email address will not be published. Required fields are marked *