@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
34 lines • 2.23 kB
JavaScript
define(["require", "exports", "tslib", "react", "@uifabric/experiments/lib/Pagination"], function (require, exports, tslib_1, React, Pagination_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var PaginationButtonsCustomizationExample = /** @class */ (function (_super) {
tslib_1.__extends(PaginationButtonsCustomizationExample, _super);
function PaginationButtonsCustomizationExample(props) {
var _this = _super.call(this, props) || this;
_this.onPageChange = function (index) {
_this.setState({
selectedPageIndex: index
});
};
_this.state = { selectedPageIndex: 15 };
return _this;
}
PaginationButtonsCustomizationExample.prototype.render = function () {
return (React.createElement(Pagination_1.Pagination, { selectedPageIndex: this.state.selectedPageIndex, pageCount: 50, numberOfPageButton: 8, format: 'buttons', previousPageAriaLabel: 'previous page', nextPageAriaLabel: 'next page', firstPageAriaLabel: 'first page', lastPageAriaLabel: 'last page', pageAriaLabel: 'page', selectedAriaLabel: 'selected', onPageChange: this.onPageChange, firstPageIconProps: { iconName: 'ChevronLeftEnd6' }, previousPageIconProps: { iconName: 'ChevronLeftSmall' }, nextPageIconProps: { iconName: 'ChevronRightSmall' }, lastPageIconProps: { iconName: 'ChevronRightEnd6' }, styles: {
previousNextPage: { color: 'black' },
pageNumber: {
fontWeight: 'bold',
selectors: {
':hover': { backgroundColor: '#c8c8c8', borderRadius: '16px' },
'&[aria-selected=true]': {
fontWeight: 'bold'
}
}
}
} }));
};
return PaginationButtonsCustomizationExample;
}(React.Component));
exports.PaginationButtonsCustomizationExample = PaginationButtonsCustomizationExample;
});
//# sourceMappingURL=Pagination.Buttons.Customization.Example.js.map