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.