@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
46 lines • 2.27 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Pagination } from '@uifabric/experiments/lib/Pagination';
var PaginationButtonsCustomizationRoundExample = /** @class */ (function (_super) {
tslib_1.__extends(PaginationButtonsCustomizationRoundExample, _super);
function PaginationButtonsCustomizationRoundExample(props) {
var _this = _super.call(this, props) || this;
_this.onPageChange = function (index) {
_this.setState({
selectedPageIndex: index
});
};
_this.state = { selectedPageIndex: 0 };
return _this;
}
PaginationButtonsCustomizationRoundExample.prototype.render = function () {
return (React.createElement(Pagination, { selectedPageIndex: this.state.selectedPageIndex, pageCount: 27, itemsPerPage: 10, totalItemCount: 268, format: 'buttons', previousPageAriaLabel: 'previous page', nextPageAriaLabel: 'next page', firstPageAriaLabel: 'first page', lastPageAriaLabel: 'last page', pageAriaLabel: 'page', selectedAriaLabel: 'selected', onPageChange: this.onPageChange, styles: {
previousNextPage: {
color: '#0078d4'
},
pageNumber: {
width: '32px',
height: '32px',
textAlign: 'center',
selectors: {
':hover': {
borderRadius: '16px'
},
'&[aria-selected=true]': {
backgroundColor: '#0078d4',
fontWeight: 'bold',
borderRadius: '16px',
color: 'white'
},
'&:hover[aria-selected=true]': {
backgroundColor: '#0078d4',
color: 'white'
}
}
}
} }));
};
return PaginationButtonsCustomizationRoundExample;
}(React.Component));
export { PaginationButtonsCustomizationRoundExample };
//# sourceMappingURL=Pagination.Buttons.Customization.Round.Example.js.map