@ocrv/vue-tailwind-pagination

Vue Tailwind Pagination
5,369
Install
npm install @ocrv/vue-tailwind-pagination
Latest Version:0.0.4
Vue:3
License:MIT
Last Updated:Feb 19, 2021
Links: npm
Maintainer: stdi0

Vue Tailwind Pagination

build downloads-week downloads

Vue component for creating Pagination using Tailwind CSS.

screenshot

Install

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

Usage

  1. Import library styles
import '@ocrv/vue-tailwind-pagination/styles'
  1. Import the components
import VueTailwindPagination from '@ocrv/vue-tailwind-pagination'

Define base data

export default {
    name: 'Pagination Example',
    components: {
        VueTailwindPagination,
    },
    data() {
        return {
            currentPage: 1,
            perPage: 5,
            total: 20
        }
    }
}

Next, in your HTML code:

<VueTailwindPagination
        :current="currentPage"
        :total="total"
        :per-page="perPage"
        @page-changed="currentPage = $event"

        text-before-input="Idź do strony"
        text-after-input="Idź"/>

More examples here

Related Packages

vue-pagination-tw

Simple Vue Pagination component that can be used in any project with range & ui...

1,542 8
vue-tailwind-modal

A modal window for Vue using Tailwind CSS.

8,532 28
@vue-interface/pagination

A TailwindCSS pagination utility.

2,734 3
unocss

The instant on-demand Atomic CSS engine.

19,637,909 18,983
vite-plugin-vue-tailwind-auto-reference

Automatically @reference your Tailwind CSS file in Vue SFC blocks.

51,792 34

Version History

Version Released Vue License
0.0.4 ^3.0.5 MIT
0.0.3 ^3.0.5 MIT
0.0.2 ^3.0.5 MIT
0.0.1 ^3.0.5 MIT