office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
65 lines (63 loc) • 7.67 kB
JavaScript
define(["require", "exports", "tslib", "react", "@uifabric/example-app-base", "./examples/Pivot.Basic.Example", "./examples/Pivot.IconCount.Example", "./examples/Pivot.Large.Example", "./examples/Pivot.Tabs.Example", "./examples/Pivot.TabsLarge.Example", "./examples/Pivot.Fabric.Example", "./examples/Pivot.OnChange.Example", "./examples/Pivot.Remove.Example", "./examples/Pivot.Override.Example", "./examples/Pivot.Separate.Example"], function (require, exports, tslib_1, React, example_app_base_1, Pivot_Basic_Example_1, Pivot_IconCount_Example_1, Pivot_Large_Example_1, Pivot_Tabs_Example_1, Pivot_TabsLarge_Example_1, Pivot_Fabric_Example_1, Pivot_OnChange_Example_1, Pivot_Remove_Example_1, Pivot_Override_Example_1, Pivot_Separate_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var PivotRemoveExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Remove.Example.tsx');
var PivotBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx');
var PivotLargeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Large.Example.tsx');
var PivotTabsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Tabs.Example.tsx');
var PivotTabsLargesExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.TabsLarge.Example.tsx');
var PivotFabricExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Fabric.Example.tsx');
var PivotOnChangeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.OnChange.Example.tsx');
var PivotIconCountExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.IconCount.Example.tsx');
var PivotOverrideExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Override.Example.tsx');
var PivotSeparateExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx');
var PivotPage = (function (_super) {
tslib_1.__extends(PivotPage, _super);
function PivotPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
PivotPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Pivot', componentName: 'PivotExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Basic example', code: PivotBasicExampleCode },
React.createElement(Pivot_Basic_Example_1.PivotBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Count and Icon', code: PivotIconCountExampleCode },
React.createElement(Pivot_IconCount_Example_1.PivotIconCountExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Large link size', code: PivotLargeExampleCode },
React.createElement(Pivot_Large_Example_1.PivotLargeExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Links of tab style', code: PivotTabsExampleCode },
React.createElement(Pivot_Tabs_Example_1.PivotTabsExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Links of large tab style', code: PivotTabsLargesExampleCode },
React.createElement(Pivot_TabsLarge_Example_1.PivotTabsLargeExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Trigger onchange event', code: PivotOnChangeExampleCode },
React.createElement(Pivot_OnChange_Example_1.PivotOnChangeExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering nested components within the Pivot', code: PivotFabricExampleCode },
React.createElement(Pivot_Fabric_Example_1.PivotFabricExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Show/Hide pivot item', code: PivotRemoveExampleCode },
React.createElement(Pivot_Remove_Example_1.PivotRemoveExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Override selected item', code: PivotOverrideExampleCode },
React.createElement(Pivot_Override_Example_1.PivotOverrideExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Render content separately', code: PivotSeparateExampleCode },
React.createElement(Pivot_Separate_Example_1.PivotSeparateExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Pivot/Pivot.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content views and relies on text headers to articulate the different sections of content."),
React.createElement("ul", null,
React.createElement("li", null, "Tapping on a pivot item header navigates to that header's section content."),
React.createElement("li", null, "Swiping left or right on a pivot item header navigates to the adjacent section."),
React.createElement("li", null, "Swiping left or right on section content navigates to the adjacent section. "),
React.createElement("li", null, "Pivots are stationary when all pivot headers fit within the allowed space."),
React.createElement("li", null, "Pivots carousel when all pivot headers don't fit within the allowed space.")),
React.createElement("p", null, "Tabs are a visual variant of Pivot that use a combination of icons and text or just icons to articulate section content.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use on content-heavy pages that require a significant amount of scrolling to access the various sections."),
React.createElement("li", null, "Be concise on the navigation labels, ideally one or two words rather than a phrase."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t use on pages which doesn\u2019t scroll."),
React.createElement("li", null, "Don\u2019t use the Pivot to link to a new page."),
React.createElement("li", null, "Don\u2019t use the Pivot to link to hidden content."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Pivot/Pivot.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
};
return PivotPage;
}(React.Component));
exports.PivotPage = PivotPage;
});
//# sourceMappingURL=PivotPage.js.map