Categories
Ant Design Vue

Ant Design Vue — Pagination and Steps

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.

Pagination

We can add pagination buttons with the a-pagination component.

For example, we can write:

<template>
  <div>
    <a-pagination v-model="current" :total="50" show-less-items/>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      current: 2
    };
  }
};
</script>

We have the a-pagination component with the v-model directive to bind the current page clicked to a reactive property.

total is the total number of pages.

show-less-items makes the button bar display fewer buttons.

We can listen to the showSizeChange event that is emitted when page size changes:

<template>
  <div>
    <a-pagination
      show-size-changer
      :default-current="3"
      :total="500"
      @showSizeChange="onShowSizeChange"
    />
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    onShowSizeChange(current, pageSize) {
      console.log(current, pageSize);
    }
  }
};
</script>

current has the current page. pageSize has the page size.

Also, we can make the pagination buttons smaller with the size prop:

<template>
  <div>
    <a-pagination size="small" :total="50"/>
  </div>
</template>

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

And we can enable simple mode with the simple prop:

<template>
  <div>
    <a-pagination simple :default-current="2" :total="50"/>
  </div>
</template>

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

We can listen to the change event to watch for page changes:

<template>
  <div>
    <a-pagination :current="current" :total="50" @change="onChange"/>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      current: 3
    };
  },
  methods: {
    onChange(current) {
      this.current = current;
    }
  }
};
</script>

The current parameter has the current page clicked.

The show-total prop lets us show the total by setting the prop to a function:

<template>
  <div>
    <a-pagination
      :total="100"
      :show-total="total => `Total ${total} items`"
      :page-size="20"
      :default-current="1"
    />
  </div>
</template>

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

Steps

We can add a component to show steps with the a-steps component:

<template>
  <div>
    <a-steps :current="1">
      <a-step>
        <template slot="title">Finished</template>
        <span slot="description">This is a description.</span>
      </a-step>
      <a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description."/>
      <a-step title="Waiting" description="This is a description."/>
    </a-steps>
  </div>
</template>

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

The current prop sets the index of current step.

sub-title has the subtitle.

We can make it smaller with the with the size prop:

<template>
  <div>
    <a-steps :current="1" size="small">
      <a-step title="Finished"/>
      <a-step title="In Progress"/>
      <a-step title="Waiting"/>
    </a-steps>
  </div>
</template>

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

Also, we can add the steps with icons:

<template>
  <div>
    <a-steps :current="1">
      <a-step status="finish" title="Login">
        <a-icon slot="icon" type="user"/>
      </a-step>
      <a-step status="finish" title="Verification">
        <a-icon slot="icon" type="solution"/>
      </a-step>
      <a-step status="process" title="Pay">
        <a-icon slot="icon" type="loading"/>
      </a-step>
    </a-steps>
  </div>
</template>

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

We can control the steps with the current prop:

<template>
  <div>
    <a-steps :current="current">
      <a-step v-for="item in steps" :key="item.title" :title="item.title"/>
    </a-steps>
    <div class="steps-content">{{ steps[current].content }}</div>
    <div class="steps-action">
      <a-button v-if="current < steps.length - 1" type="primary" [@click](http://twitter.com/click "Twitter profile for @click")="next">Next</a-button>
      <a-button
        v-if="current == steps.length - 1"
        type="primary"
        [@click](http://twitter.com/click "Twitter profile for @click")="$message.success('Processing complete!')"
      >Done</a-button>
      <a-button v-if="current > 0" style="margin-left: 8px" [@click](http://twitter.com/click "Twitter profile for @click")="prev">Previous</a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      current: 0,
      steps: [
        {
          title: "First",
          content: "First-content"
        },
        {
          title: "Second",
          content: "Second-content"
        },
        {
          title: "Last",
          content: "Last-content"
        }
      ]
    };
  },
  methods: {
    next() {
      this.current++;
    },
    prev() {
      this.current--;
    }
  }
};
</script>

The button changes the current reactive property to move through the steps.

Conclusion

We can add steps display and pagination buttons to our Vue app with Ant Design Vue.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

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