material-ui-flat-pagination
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.2 • Public • Published

    material-ui-flat-pagination

    Build Status Coverage Status npm version

    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

    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.

    Install

    npm i material-ui-flat-pagination

    DownloadsWeekly Downloads

    3,419

    Version

    4.1.2

    License

    MIT

    Unpacked Size

    29.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • szmslab