https://github.com/ocrvblockchain/vue-tailwind-pagination

Vue Tailwind Pagination
https://github.com/ocrvblockchain/vue-tailwind-pagination

css front-end pagination paging tailwind tailwind-css vue

Last synced: 5 days ago
JSON representation

Vue Tailwind Pagination

• Host: GitHub
• URL: https://github.com/ocrvblockchain/vue-tailwind-pagination
• Owner: OCRVblockchain
• Created: 2021-02-11T14:01:25.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-02-19T05:49:35.000Z (over 3 years ago)
• Last Synced: 2024-10-31T18:13:30.079Z (5 days ago)
• Topics: css, front-end, pagination, paging, tailwind, tailwind-css, vue
• Language: Vue
• Homepage:
• Size: 157 KB
• Stars: 26
• Watchers: 4
• Forks: 13
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue Tailwind Pagination

![build](https://github.com/OCRVblockchain/vue-tailwind-pagination/workflows/build/badge.svg?branch=main)

![downloads-week](https://img.shields.io/npm/dw/@ocrv/vue-tailwind-pagination)

![downloads](https://img.shields.io/npm/dt/@ocrv/vue-tailwind-pagination)

Vue component for creating Pagination using [Tailwind CSS](https://tailwindcss.com).



## Install

```

npm install --save @ocrv/vue-tailwind-pagination

```

## Usage

1. Import library styles

```js

import '@ocrv/vue-tailwind-pagination/styles'

```

2. Import the components

```js

import VueTailwindPagination from '@ocrv/vue-tailwind-pagination'

```

Define base data

```js

export default {

    name: 'Pagination Example',

    components: {

        VueTailwindPagination,

    },

    data() {

        return {

            currentPage: 1,

            perPage: 5,

            total: 20

        }

    }

}

```

Next, in your HTML code:

```html

```

More examples [here](https://github.com/OCRVblockchain/vue-tailwind-pagination/blob/main/src/components/Example.vue)