material-ui-flat-pagination
A pagination component for Material-UI using Button component.
Compatibility
Supported Versions
material-ui-flat-pagination | Material-UI |
---|---|
>=4.0.0 | >=4.0.0 |
>=3.0.0 | >=1.0.0 |
2.x | 0.x |
Installation
npm install material-ui-flat-pagination
Demo
Demo
Example
import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
import Pagination from "material-ui-flat-pagination";
const theme = createMuiTheme();
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { offset: 0 };
}
handleClick(offset) {
this.setState({ offset });
}
render() {
return (
<MuiThemeProvider theme={theme}>
<CssBaseline />
<Pagination
limit={10}
offset={this.state.offset}
total={100}
onClick={(e, offset) => this.handleClick(offset)}
/>
</MuiThemeProvider>
);
}
}
ReactDOM.render(<Example />, document.getElementById("root"));
Props
Name | Type | Default | Description |
---|---|---|---|
limit * |
number | The number of rows per page. Allow a number greater than or equal to 1 . |
|
offset * |
number | The number of rows to skip. Allow a number greater than or equal to 0 . |
|
total * |
number | The total number of rows. Allow a number greater than or equal to 0 . |
|
centerRipple |
bool | false | If true, the ripples of all buttons will be centered. |
classes |
object | Override or extend the styles applied to the component. See CSS API below for more details. | |
component |
union: string | func | object |
'div' | The component used for the root node. Either a string to use a DOM element or a component. |
currentPageColor |
enum: 'default' | 'inherit' | 'primary' | 'secondary' |
'secondary' | The color of the current page button. |
disabled |
bool | false | If true, all buttons will be disabled. |
disableFocusRipple |
bool | false | If true, the keyboard focus ripple of all buttons will be disabled. |
disableRipple |
bool | false | If true, the ripple effect of all buttons will be disabled. |
fullWidth |
bool | false | If true, all buttons will take up the full width of its container. |
innerButtonCount |
number | 2 | The number of displayed standard page buttons adjacent to the current button. Allow a number greater than or equal to 0 . |
nextPageLabel |
node | '>' | The content of the next page button. |
onClick |
func | Callback fired when the button is clicked. Signature: function(event: object, offset: number, page: number) => void event: The event source of the callback. offset: The number of new offset. page: The number of new page. |
|
otherPageColor |
enum: 'default' | 'inherit' | 'primary' | 'secondary' |
'primary' | The color of the buttons of other pages excluding the current page. |
outerButtonCount |
number | 2 | The number of standard page buttons displayed at the end. Allow a number greater than or equal to 1 . |
previousPageLabel |
node | '<' | The content of the previous page button. |
reduced |
bool | false | If true, the number of displayed buttons will be reduced. Equivalent to innerButtonCount=1 and outerButtonCount=1 . |
renderButton |
func | Callback fired when the button is rendered. Main use case is to use anchor for pagination: ({ page, children }) => React.cloneElement(children as React.ReactElement, { href: `?page=${page}` }) Signature: function({ offset: number, page: number, children: node}) => ReactElement offset: The number of new offset. page: The number of new page. children: The page button component. |
|
size |
enum: 'small' | 'medium' | 'large' |
'medium' | The size of all buttons. |
Any other properties supplied will be spread to the root element.
CSS API
Name | Description |
---|---|
root |
Styles applied to the root element. |
rootCurrent |
Styles applied to the root element of the current page button. |
rootEllipsis |
Styles applied to the root element of the ellipsis page button. |
rootEnd |
Styles applied to the root element of the end page button. |
rootStandard |
Styles applied to the root element of the standard page button. |
label |
Styles applied to the span element of the page button that wraps the children. |
text |
Styles applied to the root element of the page button. |
textPrimary |
Styles applied to the root element of the page button if currentPageColor="primary" or otherPageColor="primary" . |
textSecondary |
Styles applied to the root element of the page button if currentPageColor="secondary" or otherPageColor="secondary" . |
colorInherit |
Styles applied to the root element of the page button if currentPageColor="inherit" or otherPageColor="inherit" . |
colorInheritCurrent |
Styles applied to the root element of the current page button if currentPageColor="inherit" . |
colorInheritOther |
Styles applied to the root element of the other page button if otherPageColor="inherit" . |
disabled |
Styles applied to the root element of the page button if disabled={true} . |
sizeSmall |
Styles applied to the root element of the page button if size="small" . |
sizeSmallCurrent |
Styles applied to the root element of the current page button if size="small" . |
sizeSmallEllipsis |
Styles applied to the root element of the ellipsis page button if size="small" . |
sizeSmallEnd |
Styles applied to the root element of the end page button if size="small" . |
sizeSmallStandard |
Styles applied to the root element of the standard page button if size="small" . |
sizeLarge |
Styles applied to the root element of the page button if size="large" . |
sizeLargeCurrent |
Styles applied to the root element of the current page button if size="large" . |
sizeLargeEllipsis |
Styles applied to the root element of the ellipsis page button if size="large" . |
sizeLargeEnd |
Styles applied to the root element of the end page button if size="large" . |
sizeLargeStandard |
Styles applied to the root element of the standard page button if size="large" . |
fullWidth |
Styles applied to the root element of the page button if fullWidth={true}.
|
License
MIT, see LICENSE for details.