# C2 Pagination
### Overview
Pagination that has next, previous and go to methods. Set the total pages, default start page and max pages visible

### Props
| Props             | Type        | Default |
| ----------------- | ----------- | ------- |
| currentPage       | Number      | 1       |
| maxPagesVisible   | Number      | 7       |
| totalPages        | Number      | true    |
| previousBtnClasses| String      |         |
| nextBtnClasses    | String      |         |
| listClasses       | String      |         |
| listItemClasses   | String      |         |
| pageNumberBtnClasses | String   |         |
| activePageNumberBtnClasses | String   |         |


### Slots
| Name              |
| ----------------- |
| previous-page-btn  |
| next-page-btn      |

### Code snippet
```
    <c2-pagination
        :max-pages-visible="5"
        :current-page="1"
        :total-pages="12"
        :previous-btn-classes="'flex items-center justify-center h-8 w-8 mr-2'"
        :next-btn-classes="'flex items-center justify-center h-8 w-8 ml-2'"
        :list-classes="'flex items-center justify-center'"
        :list-item-classes="'flex items-center justify-center'"
        :page-number-btn-classes="'flex items-center justify-center p-2'"
        :active-page-number-btn-classes="'bg-green-300'"
        class="flex items-center justify-center"
        @change="changeCallbackMethod"
    >
        <template v-slot:previous-page-btn>
            <span class="sr-only">Previous Page</span>
            <span class="icon">
                P
            </span>
        </template>

        <template v-slot:next-page-btn>
            <span class="sr-only">Next Page</span>
            <span class="icon">
                Next
            </span>
        </template>
    </c2-pagination>
```