semantic-ui-react-button-pagination

A pagination component for Semantic-UI-React using Button.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
semantic-ui-react-button-pagination
401.0.34 years ago5 years agoMinified + gzip package size for semantic-ui-react-button-pagination in KB

Readme

semantic-ui-react-button-pagination
Build Status Coverage Status npm version
A pagination component for Semantic UI React using Button.

Installation

npm install semantic-ui-react-button-pagination

Demo

Demo

Demo

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example of semantic-ui-react-button-pagination</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';
import Pagination from 'semantic-ui-react-button-pagination';

class Example extends React.Component {
  constructor() {
    super();
    this.state = {offset: 0};
  }

  handleClick(offset) {
    this.setState({offset});
  }

  render() {
    return (
      <Pagination
        offset={this.state.offset}
        limit={10}
        total={100}
        onClick={(e, props, offset) => this.handleClick(offset)}
      />
    );
  }
}

ReactDOM.render(
  <Example/>,
  document.getElementById('app')
);

Props

| Name | Default | Type | Description | | -----| ------- | -----| ----------- | | limit (required) | | custom | The number of rows per page. Allow a number greater than or equal to 1.| | offset (required) | | custom | The number of rows to skip. Allow a number greater than or equal to 0.| | total (required) | | custom | The total number of rows. Allow a number greater than or equal to 0.| | as | | custom | An element type of the group of buttons to render as (string or function). | | attached | | bool|enum | The group of buttons can be attached to other content.

Enums:
left right top bottom | | basic | false | bool | Basic buttons is less pronounced. | | className | | string | Additional classes of the group of buttons. | | color | | enum | Buttons can have different colors.

Enums:
red orange yellow olive green teal blue violet purple pink brown grey black | | compact | false | bool | Buttons can reduce its padding to fit into tighter spaces. | | currentPageColor | | enum | The current page button can have different colors.

Enums:
Same as 'color'. | | currentPageNegative | false | bool | The current page button can hint towards a negative consequence. | | currentPagePositive | false | bool | The current page button can hint towards a positive consequence. | | currentPagePrimary | false | bool | The current page button can be formatted to show different levels of emphasis. | | currentPageSecondary | false | bool | The current page button can be formatted to show different levels of emphasis. | | currentPageStyle | | object | Apply the inline-styles to the current page button. | | disabled | false | bool | Buttons can show it is currently unable to be interacted with. | | floated | | enum | The group of buttons can be aligned to the left or right of its container.

Enums:
left right | | fluid | false | bool | The group of buttons can take the width of their container. | | inverted | false | bool | Buttons can be formatted to appear on dark backgrounds. | | negative | false | bool | Buttons can hint towards a negative consequence. | | nextPageAnimated | | bool|enum | The next page button can animate to show hidden content.

Enums:
fade vertical | | nextPageChildren | '>' 1 | custom | Primary content of the next page button. | | nextPageContent | | custom | Shorthand for primary content of the next page button. | | nextPageIcon | | custom | Add an icon to the next page button by passing name, props object, or an <Icon />. | | nextPageIconPosition | | enum | The labeled icon button of the next page can format an icon to appear on the left or right.

Enums:
left right | | onClick | | func | Called after user's click.

onClick(event: SyntheticEvent, data: object, offset: number)
event: React's original SyntheticEvent.
data: All props.
offset: The number of new offset. | | otherPageColor | | enum | The other page buttons can have different colors.

Enums:
Same as 'color'. | | otherPageNegative | false | bool | The other page buttons can hint towards a negative consequence. | | otherPagePositive | false | bool | The other page buttons can hint towards a positive consequence. | | otherPagePrimary | false | bool | The other page buttons can be formatted to show different levels of emphasis. | | otherPageSecondary | false | bool | The other page buttons can be formatted to show different levels of emphasis. | | otherPageStyle | | object | Apply the inline-styles to the other page buttons. | | positive | false | bool | Buttons can hint towards a positive consequence. | | previousPageAnimated | | bool|enum | The previous page button can animate to show hidden content.

Enums:
fade vertical | | previousPageChildren | '<' 1 | custom | Primary content of the previous page button. | | previousPageContent | | custom | Shorthand for primary content of the previous page button. | | previousPageIcon | | custom | Add an icon to the previous page button by passing name, props object, or an <Icon />. | | previousPageIconPosition | | enum | The labeled icon button of the previous page can format an icon to appear on the left or right.

Enums:
left right | | primary | false | bool | Buttons can be formatted to show different levels of emphasis. | | secondary | false | bool | Buttons can be formatted to show different levels of emphasis. | | size | | enum | The group of buttons can have different sizes.

Enums:
tiny small medium large huge | | vertical | false | bool | The group of buttons can be formatted to appear vertically. | | reduced | false | bool | Reduce the number of displayed buttons. | | style | | | Apply the inline-styles to the group of buttons. | | tabIndex | | number|string | Buttons can receive focus. |
1: Only if content and icon are null.

License

MIT, see LICENSE for details.