office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
86 lines • 8.51 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage, 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 { FontClassNames } from '../../Styling';
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', 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("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: 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."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus, tslib_1.__assign({}, PanelStatus)) }));
};
return PanelPage;
}(React.Component));
export { PanelPage };
//# sourceMappingURL=PanelPage.js.map