@uifabric/experiments/lib-commonjs/components/Pagination/PaginationPage.js

Experimental React components for building experiences for Office 365.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Link_1 = require("office-ui-fabric-react/lib/Link");
var Pagination_Buttons_Basic_Example_1 = require("./examples/Pagination.Buttons.Basic.Example");
var Pagination_Buttons_Customization_Example_1 = require("./examples/Pagination.Buttons.Customization.Example");
var Pagination_Buttons_Customization_Round_Example_1 = require("./examples/Pagination.Buttons.Customization.Round.Example");
var Pagination_ComboBox_Example_1 = require("./examples/Pagination.ComboBox.Example");
var PaginationButtonsBasicExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Pagination/examples/Pagination.Buttons.Basic.Example.tsx');
var PaginationButtonsCustomizationExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Pagination/examples/Pagination.Buttons.Customization.Example.tsx');
var PaginationButtonsCustomizationRoundExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Pagination/examples/Pagination.Buttons.Customization.Round.Example.tsx');
var PaginationComboBoxExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Pagination/examples/Pagination.ComboBox.Example.tsx');
var PaginationPage = /** @class */ (function (_super) {
    tslib_1.__extends(PaginationPage, _super);
    function PaginationPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    PaginationPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: "Pagination", componentName: "PaginationExample", exampleCards: React.createElement("div", null,
                React.createElement(example_app_base_1.ExampleCard, { title: "Pagination with combo box", code: PaginationComboBoxExampleCode },
                    React.createElement(Pagination_ComboBox_Example_1.PaginationComboBoxExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: "Pagination with buttons", code: PaginationButtonsBasicExampleCode },
                    React.createElement(Pagination_Buttons_Basic_Example_1.PaginationButtonsBasicExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: "Pagination with buttons without the visible item label", code: PaginationButtonsCustomizationExampleCode },
                    React.createElement(Pagination_Buttons_Customization_Example_1.PaginationButtonsCustomizationExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: "Pagination with buttons and round background", code: PaginationButtonsCustomizationRoundExampleCode },
                    React.createElement(Pagination_Buttons_Customization_Round_Example_1.PaginationButtonsCustomizationRoundExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [require('!raw-loader!@uifabric/experiments/src/components/Pagination/Pagination.types.ts')] }), overview: React.createElement("div", null,
                React.createElement("p", null, "Pagination control"),
                React.createElement("p", null, "This control provides a customizable pagination component that can be used to achieve specific design requirement.There are two design options: with a list of buttons, with combobox"),
                React.createElement("p", null,
                    "For cases when your application supports theming, Pagination component is equipped with everything you need to just load the custom theme to the application, and as long as the color palette you provide has an override for the",
                    ' ',
                    React.createElement(Link_1.Link, { href: "https://developer.microsoft.com/en-us/fabric#/styles/colors" },
                        React.createElement("code", null, "Fabric colors")),
                    ' ',
                    "used in Pagination, everything should be ok. If no theming is supported, then follow the example showing the use of the",
                    ' ',
                    React.createElement("code", null, "styles"),
                    " prop.")), isHeaderVisible: this.props.isHeaderVisible }));
    };
    return PaginationPage;
}(React.Component));
exports.PaginationPage = PaginationPage;
//# sourceMappingURL=PaginationPage.js.map