1.1.0 • Published 4 years ago

tvt-pagination v1.1.0

Weekly downloads
3
License
MIT
Repository
github
Last release
4 years ago

tvt-pagination

A long list can be divided into several pages using Pagination, and only one page will be loaded at a time.

Getting started

yarn add tvt-pagination

screen_shot

Example

import React from 'react';
import Pagination from 'tvt-pagination';

export default () => (
  <Pagination
    defaultCurrent={1}
    total={50}
  />
);
import React from 'react';
import { Text } from 'react-native';
import Pagination from 'tvt-pagination';

export default () => (
  <Pagination
    size="small"
    total={50}
    prevIcon={
      <Text>Prev</Text>
    }
    nextIcon={
      <Text>Next</Text>
    }
  />
);
import React from 'react';
import Pagination from 'tvt-pagination';

export default () => (
  <Pagination
    total={50}
    defaultCurrent={1}
    defaultPageSize={5}
    onChange={(page, pageSize) => alert(`${page} ${pageSize}`)}
  />
);

API

PropertyDescriptionTypeDefault
defaultCurrentDefault initial page numbernumber1
defaultPageSizeDefault number of data items per pagenumber10
disabledDisable paginationboolean
totalTotal number of data itemsnumber0
onChangeCalled when the page number is changed, and it takes the resulting page number and pageSize as its argumentsfunction(page, pageSize)
sizeSpecify the size of Pagination, can be set to smalldefaultmiddlesmall
borderColorBorder color button paginationstring#d9d9d9
borderColorActiveBorder color button current paginationstring#1890ff
activeOpacityDetermines what the opacity of the wrapped view should be when touch is activenumber1
prevIconSet the icon prevReactNode
nextIconSet the icon nextReactNode
styleBoxStyle for box buttonViewStyleProps
styleStyle for PaginationViewStyleProps
testIDUsed to locate this view in end-to-end testsstring