@khard/material-ui-flat-pagination-2-1-1
v2.1.4
Published
A pagination component for Material-UI using Flat Button.
Downloads
2
Readme
material-ui-flat-pagination
A pagination component for Material-UI using Flat Button.
Installation
npm install material-ui-flat-pagination
Demo
Demo
Example
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import FlatPagination from 'material-ui-flat-pagination';
class Example extends React.Component {
constructor() {
super();
this.state = {offset: 0};
}
handleClick(offset) {
this.setState({offset});
}
render() {
return (
<MuiThemeProvider>
<FlatPagination
offset={this.state.offset}
limit={10}
total={100}
onClick={(e, offset) => this.handleClick(offset)}
/>
</MuiThemeProvider>
);
}
}
ReactDOM.render(
<Example/>,
document.getElementById('app')
);
Props
| Name | Type | Default | Description |
| -----| -----| ------- | ----------- |
| limit
(required) | validateNumber | | The number of rows per page. Allow a number greater than or equal to 1
.|
| offset
(required) | validateNumber | | The number of rows to skip. Allow a number greater than or equal to 0
.|
| total
(required) | validateNumber | | The total number of rows. Allow a number greater than or equal to 0
.|
| className
| string | | The CSS class name of the root element. |
| currentPageHoverColor
| string | | Color of the current page button when mouse hovers over. |
| currentPageLabelStyle
| object | | Override the inline-styles of the button's label element of current page. |
| currentPageStyle
| object | | Override the inline-styles of the button element of current page. |
| disabled
| bool | false | If true, the button will be disabled. |
| disableTouchRipple
| bool | false | If true, the button's ripple effect will be disabled. |
| hoverColor
| string | | Color of button when mouse hovers over. |
| nextPageLabel
| node | '>' | Label for the next page button. |
| onClick
| func | | Callback function fired when the button is clicked.Signature:function(event: object, offset: number) => void
event: Click event targeting the button.offset: The number of new offset. |
| otherPageLabelStyle
| object | | Override the inline-styles of the button's label element of other pages except the current page. |
| otherPageStyle
| object | | Override the inline-styles of the button element of other pages except the current page. |
| previousPageLabel
| node | '<' | Label for the previous page button. |
| rippleColor
| string | | Color for the ripple after button is clicked. |
| reduced
| bool | false | Reduce the number of displayed buttons if set to true. |
| style
| object | | Override the inline-styles of the root element. |
License
MIT, see LICENSE for details.