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) => voidevent: 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.