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.