@eluck/material-ui-flat-pagination-2.1.4 NPM

material-ui-flat-pagination

A pagination component for Material-UI using Flat Button.

Installation

npm install material-ui-flat-pagination

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.

pagination material-ui react

prop-types

@everything-registry/sub-chunk-287

2.1.4

5 years ago