office-ui-fabric-react/lib-amd/components/Panel/PanelPage.js

Reusable React components for building experiences for Office 365.

define(["require", "exports", "tslib", "react", "@uifabric/example-app-base", "./examples/Panel.SmallRight.Example", "./examples/Panel.SmallLeft.Example", "./examples/Panel.SmallFluid.Example", "./examples/Panel.Medium.Example", "./examples/Panel.Large.Example", "./examples/Panel.LargeFixed.Example", "./examples/Panel.ExtraLarge.Example", "./examples/Panel.Custom.Example", "./examples/Panel.LightDismiss.Example", "./examples/Panel.NonModal.Example", "../../Styling"], function (require, exports, tslib_1, React, example_app_base_1, Panel_SmallRight_Example_1, Panel_SmallLeft_Example_1, Panel_SmallFluid_Example_1, Panel_Medium_Example_1, Panel_Large_Example_1, Panel_LargeFixed_Example_1, Panel_ExtraLarge_Example_1, Panel_Custom_Example_1, Panel_LightDismiss_Example_1, Panel_NonModal_Example_1, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var PanelSmallRightExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.SmallRight.Example.tsx');
    var PanelSmallLeftExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.SmallLeft.Example.tsx');
    var PanelSmallFluidExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.SmallFluid.Example.tsx');
    var PanelMediumExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.Medium.Example.tsx');
    var PanelLargeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.Large.Example.tsx');
    var PanelLargeFixedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.LargeFixed.Example.tsx');
    var PanelExtraLargeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.ExtraLarge.Example.tsx');
    var PanelCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.Custom.Example.tsx');
    var PanelLightDismissExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismiss.Example.tsx');
    var PanelNonModalExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.NonModal.Example.tsx');
    var PanelPage = (function (_super) {
        tslib_1.__extends(PanelPage, _super);
        function PanelPage() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        PanelPage.prototype.render = function () {
            return (React.createElement(example_app_base_1.ComponentPage, { title: 'Panel', componentName: 'PanelExample', exampleCards: React.createElement("div", null,
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Small Panel, Anchored Right, Fixed Width', code: PanelSmallRightExampleCode },
                        React.createElement(Panel_SmallRight_Example_1.PanelSmallRightExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Small Panel, Anchored Left, Fixed Width', code: PanelSmallLeftExampleCode },
                        React.createElement(Panel_SmallLeft_Example_1.PanelSmallLeftExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Small Panel, Full Screen, Fluid Width', code: PanelSmallFluidExampleCode },
                        React.createElement(Panel_SmallFluid_Example_1.PanelSmallFluidExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Medium', code: PanelMediumExampleCode },
                        React.createElement(Panel_Medium_Example_1.PanelMediumExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Large', code: PanelLargeExampleCode },
                        React.createElement(Panel_Large_Example_1.PanelLargeExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - LargeFixed', code: PanelLargeFixedExampleCode },
                        React.createElement(Panel_LargeFixed_Example_1.PanelLargeFixedExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Extra Large', code: PanelExtraLargeExampleCode },
                        React.createElement(Panel_ExtraLarge_Example_1.PanelExtraLargeExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Custom', code: PanelCustomExampleCode },
                        React.createElement(Panel_Custom_Example_1.PanelCustomExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Light Dismiss', code: PanelLightDismissExampleCode },
                        React.createElement(Panel_LightDismiss_Example_1.PanelLightDismissExample, null)),
                    ",",
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Panel - Non-Modal', code: PanelNonModalExampleCode },
                        React.createElement(Panel_NonModal_Example_1.PanelNonModalExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                        require('!raw-loader!office-ui-fabric-react/src/components/Panel/Panel.Props.ts')
                    ] }), overview: React.createElement("div", null,
                    React.createElement("p", null, "Panels are modal UI overlays that provide contextual app information. They often request some kind of creation or management action from the user. Panels are paired with the Overlay component, also known as a Light Dismiss. The Overlay blocks interactions with the app view until dismissed either through clicking or tapping on the Overlay or by selecting a close or completion action within the Panel."),
                    React.createElement("h2", { className: Styling_1.FontClassNames.xLarge }, "Examples of experiences that use Panels"),
                    React.createElement("ul", null,
                        React.createElement("li", null, "Member or group list creation or management"),
                        React.createElement("li", null, "Document list creation or management"),
                        React.createElement("li", null, "Permissions creation or management"),
                        React.createElement("li", null, "Settings creation or management"),
                        React.createElement("li", null, "Multi-field forms"))), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                    React.createElement("ul", null,
                        React.createElement("li", null, "Use for self-contained experiences where the user does not need to interact with the app view to complete the task. "),
                        React.createElement("li", null, "Use for complex creation, edit or management experiences."),
                        React.createElement("li", null, "Consider how the panel and its contained contents will scale across Fabric\u2019s responsive web breakpoints."))), donts: React.createElement("div", null,
                    React.createElement("ul", null,
                        React.createElement("li", null, "Use for experiences where the user needs to interact with the app view. Use a Pane (which pushes content, doesn\u2019t use an overlay, and sits on the same z-index as the rest of the UI) instead."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Panel/Panel.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
        };
        return PanelPage;
    }(React.Component));
    exports.PanelPage = PanelPage;
});

//# sourceMappingURL=PanelPage.js.map