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.

Leave a Reply

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