1.1.0 • Published 5 years ago
tvt-pagination v1.1.0
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
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
| Property | Description | Type | Default | |
|---|---|---|---|---|
| defaultCurrent | Default initial page number | number | 1 | |
| defaultPageSize | Default number of data items per page | number | 10 | |
| disabled | Disable pagination | boolean | ||
| total | Total number of data items | number | 0 | |
| onChange | Called when the page number is changed, and it takes the resulting page number and pageSize as its arguments | function(page, pageSize) | ||
| size | Specify the size of Pagination, can be set to small | default | middle | small |
| borderColor | Border color button pagination | string | #d9d9d9 | |
| borderColorActive | Border color button current pagination | string | #1890ff | |
| activeOpacity | Determines what the opacity of the wrapped view should be when touch is active | number | 1 | |
| prevIcon | Set the icon prev | ReactNode | ||
| nextIcon | Set the icon next | ReactNode | ||
| styleBox | Style for box button | ViewStyleProps | ||
| style | Style for Pagination | ViewStyleProps | ||
| testID | Used to locate this view in end-to-end tests | string |