# v-pager

v-pager is a flexible Vue.js pagination component. it give you various param to control pagination's interface.

## Screen shots
![preview](demo/shot.png)

## Requirements
- [vue.js](http://vuejs.org/)  `^1.0.0`

## Installation
### NPM
`npm install v-pager --save`

### Bower
`bower install v-pager`

## Usage

#### ES6
```js
import VPager from 'VPager'

export default {
  ...
  components: {
    VPager
  },
  ...
}
```

#### ES5

```js
var Vue = require('vue')
var VPager = require('VPager')

var component = Vue.extend({
  ...
  components: {
    VPager: VPager
  }
  ...
});

```

#### Browser
```html
<script src="/path/to/vue/vue.min.js"></script>
<script src="/path/to/v-pager.js"></script>
```

```js
new Vue({
  ...
  components: {
    VPager: Vpager
  }
  ...
})
```

#### HTML structure
```html
<v-pager :total-pages="10" :visiable-pages="4" page-click="function"></v-pager>
```

## Props
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>isRequire</th>
      <th>Default</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>totalPages</td>
      <td>Number</td>
      <td>Yes</td>
      <td></td>
      <td>totalPages must greater than 0</td>
    </tr>
    <tr>
      <td>visiablePages</td>
      <td>Number</td>
      <td>Yes</td>
      <td></td>
      <td>visiablePages must greater than 0</td>
    </tr>
    <tr>
      <td>pageClick</td>
      <td>Function</td>
      <td>Yes</td>
      <td></td>
      <td>function have a param, eg: `function(clear) {}`, when user click page, page item will triggle loading, you can use `clear()` to remove loading </td>
    </tr>
    <tr>
      <td>currentPage</td>
      <td>Number</td>
      <td>No</td>
      <td>1</td>
      <td>current page location</td>
    </tr>
    <tr>
      <td>theme</td>
      <td>String</td>
      <td>No</td>
      <td></td>
      <td>Component provide two themes, 'default' and 'mini'</td>
    </tr>
    <tr>
      <td>previousLabel</td>
      <td>String</td>
      <td>No</td>
      <td>Previous</td>
      <td>previous button label</td>
    </tr>
    <tr>
      <td>nextLabel</td>
      <td>String</td>
      <td>No</td>
      <td>Next</td>
      <td>Next button label</td>
    </tr>
    <tr>
      <td>defaultHideNextStepBtn</td>
      <td>Boolean</td>
      <td>No</td>
      <td>false</td>
      <td>if show previous button or next button, when current page equal 1 or total page</td>
    </tr>
    <tr>
      <td>showOtherInfo</td>
      <td>Boolean</td>
      <td>No</td>
      <td>
      <td>show or hide page info (current page and total page)</td>
    </tr>
    <tr>
      <td>showTools</td>
      <td>Boolean</td>
      <td>No</td>
      <td></td>
      <td>show or hide page tool (jump to target page)</td>
    </tr>
  </tbody>
</table>

## License

Released under the [MIT](LICENSE) License.