Morioh
Login
Vuejs Components

Vuejs Components

3 years ago

A vuejs and reactjs pagination component

pagination-js-component

A vuejs and reactjs pagination component

features

  • vuejs component
  • reactjs component
  • previous/next page
  • home/end page

link css

<link rel="stylesheet" href="./node_modules/pagination-js-component/dist/pagination.min.css" />

vuejs component

gzip size

npm pagination-vue-component

import { Pagination } from "pagination-vue-component";
app.component('pagination', Pagination)

or

<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-class-component/dist/vue-class-component.min.js"></script>
<script src="./node_modules/pagination-vue-component/dist/pagination-vue-component.min.js"></script>

<pagination :total="total"
    :current="current"
    :count="count"
    @jump="jump($event)"></pagination>

the online demo: https://plantain-00.github.io/pagination-js-component/packages/vue/demo

reactjs component

gzip size

npm pagination-react-component

import { Pagination } from "pagination-react-component";

or

<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/pagination-react-component/dist/pagination-react-component.min.js"></script>

<Pagination total={this.total}
    current={this.current}
    count={this.count}
    jump={page => this.jump(page)}></Pagination>

the online demo: https://plantain-00.github.io/pagination-js-component/packages/react/demo

properties and events of the component

name type description
total number total page count
current number current page
count number page count around current page, eg, if current is 5, count is 2, then 3 4 5 6 7 will be displayed
jump (page: number) => void triggered when click a page
mode number? mode

change logs

// v4 vue 2
import 'pagination-vue-component'

// v5 vue 3
import { Pagination } from "pagination-vue-component"
app.component('pagination', Pagination)

# v3
npm i pagination-js-component

# v4
npm i pagination-vue-component
npm i pagination-react-component
npm i pagination-angular-component

// v3
import "pagination-js-component/vue";
import { Pagination } from "pagination-js-component/react";
import { PaginationModule } from "pagination-js-component/angular";

// v4
import "pagination-vue-component";
import { Pagination } from "pagination-react-component";
import { PaginationModule } from "pagination-angular-component";

// v3
<link rel="stylesheet" href="./node_modules/pagination-js-component/pagination.min.css" />

// v4
<link rel="stylesheet" href="./node_modules/pagination-js-component/dist/pagination.min.css" />

// v2 angular AOT:
import { PaginationModule } from "pagination-js-component/angular";

// v3 angular AOT:
import { PaginationModule } from "pagination-js-component/aot/angular";

// v2
import "pagination-js-component/vue";

// v1
import "pagination-js-component/dist/vue";

Download Details:

Author: plantain-00

Source Code: https://github.com/plantain-00/pagination-js-component

#vuejs #vue #javascript #reactjs

A vuejs and reactjs pagination component
2.15 GEEK