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

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage, PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base';
import { PanelSmallRightExample } from './examples/Panel.SmallRight.Example';
import { PanelSmallLeftExample } from './examples/Panel.SmallLeft.Example';
import { PanelSmallFluidExample } from './examples/Panel.SmallFluid.Example';
import { PanelMediumExample } from './examples/Panel.Medium.Example';
import { PanelLargeExample } from './examples/Panel.Large.Example';
import { PanelLargeFixedExample } from './examples/Panel.LargeFixed.Example';
import { PanelExtraLargeExample } from './examples/Panel.ExtraLarge.Example';
import { PanelCustomExample } from './examples/Panel.Custom.Example';
import { PanelHiddenOnDismissExample } from './examples/Panel.HiddenOnDismiss.Example';
import { PanelLightDismissExample } from './examples/Panel.LightDismiss.Example';
import { PanelLightDismissCustomExample } from './examples/Panel.LightDismissCustom.Example';
import { PanelNonModalExample } from './examples/Panel.NonModal.Example';
import { PanelFooterExample } from './examples/Panel.Footer.Example';
import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
import { PanelStatus } from './Panel.checklist';
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 PanelHiddenOnDismissExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.HiddenOnDismiss.Example.tsx');
var PanelLightDismissExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismiss.Example.tsx');
var PanelLightDismissCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismissCustom.Example.tsx');
var PanelNonModalExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.NonModal.Example.tsx');
var PanelFooterExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.Footer.Example.tsx');
var PanelPage = /** @class */ (function (_super) {
    tslib_1.__extends(PanelPage, _super);
    function PanelPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    PanelPage.prototype.render = function () {
        return (React.createElement(ComponentPage, { title: 'Panel', componentName: 'PanelExample', componentUrl: 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Panel', allowNativeProps: true, exampleCards: React.createElement("div", null,
                React.createElement(ExampleCard, { title: 'Panel - Small Panel, Anchored Right, Fixed Width', code: PanelSmallRightExampleCode },
                    React.createElement(PanelSmallRightExample, null)),
                React.createElement(ExampleCard, { title: 'Panel - Small Panel, Anchored Left, Fixed Width', code: PanelSmallLeftExampleCode },
                    React.createElement(PanelSmallLeftExample, null)),
                React.createElement(ExampleCard, { title: 'Panel - Small Panel, Full Screen, Fluid Width', code: PanelSmallFluidExampleCode },
                    React.createElement(PanelSmallFluidExample, null)),
                React.createElement(ExampleCard, { title: 'Panel - Medium', code: PanelMediumExampleCode },
                    React.createElement(PanelMediumExample, null)),
                React.createElement(ExampleCard, { title: 'Panel - Large', code: PanelLargeExampleCode },
                    React.createElement(PanelLargeExample, null)),
                React.createElement(ExampleCard, { title: 'Panel - LargeFixed', code: PanelLargeFixedExampleCode },
                    React.createElement(PanelLargeFixedExample, null)),
                React.createElement(ExampleCard, { title: 'Panel - Extra Large', code: PanelExtraLargeExampleCode },
                    React.createElement(PanelExtraLargeExample, null)),
                React.createElement(ExampleCard, { title: 'Panel - Custom', code: PanelCustomExampleCode },
                    React.createElement(PanelCustomExample, null)),
                React.createElement(ExampleCard, { title: 'Panel - Hidden on Dismiss', code: PanelHiddenOnDismissExampleCode },
                    React.createElement(PanelHiddenOnDismissExample, null)),
                React.createElement(ExampleCard, { title: 'Panel - Light Dismiss', code: PanelLightDismissExampleCode },
                    React.createElement(PanelLightDismissExample, null)),
                React.createElement(ExampleCard, { title: 'Panel - Custom Light Dismiss', code: PanelLightDismissCustomExampleCode },
                    React.createElement(PanelLightDismissCustomExample, null)),
                React.createElement(ExampleCard, { title: 'Panel - Non-Modal', code: PanelNonModalExampleCode },
                    React.createElement(PanelNonModalExample, null)),
                React.createElement(ExampleCard, { title: 'Panel - Footer', code: PanelFooterExampleCode },
                    React.createElement(PanelFooterExample, null))), propertiesTables: React.createElement(PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/Panel/Panel.types.ts')
                ] }), overview: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Panel/docs/PanelOverview.md')), bestPractices: React.createElement("div", null), dos: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Panel/docs/PanelDos.md')), donts: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Panel/docs/PanelDonts.md')), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus, tslib_1.__assign({}, PanelStatus)) }));
    };
    return PanelPage;
}(React.Component));
export { PanelPage };
//# sourceMappingURL=PanelPage.js.map