office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
73 lines • 8.58 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage, PropertiesTableSet } from '@uifabric/example-app-base';
import { ContextualMenuBasicExample } from './examples/ContextualMenu.Basic.Example';
import { ContextualMenuIconExample } from './examples/ContextualMenu.Icon.Example';
import { ContextualMenuSectionExample } from './examples/ContextualMenu.Section.Example';
import { ContextualMenuSubmenuExample } from './examples/ContextualMenu.Submenu.Example';
import { ContextualMenuCustomizationWithNoWrapExample } from './examples/ContextualMenu.CustomizationWithNoWrap.Example';
import { ContextualMenuCheckmarksExample } from './examples/ContextualMenu.Checkmarks.Example';
import { ContextualMenuDirectionalExample } from './examples/ContextualMenu.Directional.Example';
import { ContextualMenuCustomizationExample } from './examples/ContextualMenu.Customization.Example';
import { ContextualMenuWithScrollBarExample } from './examples/ContextualMenu.ScrollBar.Example';
import { ContextualMenuWithCustomMenuItemExample } from './examples/ContextualMenu.CustomMenuItem.Example';
import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
import { ContextualMenuStatus } from './ContextualMenu.checklist';
var ContextualMenuBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx');
var ContextualMenuIconExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Icon.Example.tsx');
var ContextualMenuSectionExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Section.Example.tsx');
var ContextualMenuSubmenuExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx');
var ContextualMenuCustomizationWithNoWrapExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomizationWithNoWrap.Example.tsx');
var ContextualMenuCheckmarksExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx');
var ContextualMenuDirectionalExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Directional.Example.tsx');
var ContextualMenuCustomizationExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx');
var ContextualMenuWithScrollBarExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.ScrollBar.Example.tsx');
var ContextualMenuWithCustomMenuItemExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx');
var ContextualMenuPage = /** @class */ (function (_super) {
tslib_1.__extends(ContextualMenuPage, _super);
function ContextualMenuPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ContextualMenuPage.prototype.render = function () {
return (React.createElement(ComponentPage, { title: 'ContextualMenu', componentName: 'ContextualMenuExample', exampleCards: React.createElement("div", null,
React.createElement(ExampleCard, { title: 'Default ContextualMenu', code: ContextualMenuBasicExampleCode },
React.createElement(ContextualMenuBasicExample, null)),
React.createElement(ExampleCard, { title: 'ContextualMenu with icons', code: ContextualMenuIconExampleCode },
React.createElement(ContextualMenuIconExample, null)),
React.createElement(ExampleCard, { title: 'ContextualMenu with submenus', code: ContextualMenuSubmenuExampleCode },
React.createElement(ContextualMenuSubmenuExample, null)),
React.createElement(ExampleCard, { title: 'ContextualMenu with section headers', code: ContextualMenuSectionExampleCode },
React.createElement(ContextualMenuSectionExample, null)),
React.createElement(ExampleCard, { title: 'ContextualMenu with checkable menu items and toggable split button', code: ContextualMenuCheckmarksExampleCode },
React.createElement(ContextualMenuCheckmarksExample, null)),
React.createElement(ExampleCard, { title: 'ContextualMenu with beak and directional settings', code: ContextualMenuDirectionalExampleCode },
React.createElement(ContextualMenuDirectionalExample, null)),
React.createElement(ExampleCard, { title: 'ContextualMenu with customized submenus', code: ContextualMenuCustomizationExampleCode },
React.createElement(ContextualMenuCustomizationExample, null)),
React.createElement(ExampleCard, { title: 'ContextualMenu with customized submenus and noWrap attributes', code: ContextualMenuSubmenuExampleCode },
React.createElement(ContextualMenuCustomizationWithNoWrapExample, null)),
React.createElement(ExampleCard, { title: 'ContextualMenu with a scroll bar and fixed direction', code: ContextualMenuWithScrollBarExampleCode },
React.createElement(ContextualMenuWithScrollBarExample, null)),
React.createElement(ExampleCard, { title: 'ContextualMenu with custom rendered menu items', code: ContextualMenuWithCustomMenuItemExampleCode },
React.createElement(ContextualMenuWithCustomMenuItemExample, null))), propertiesTables: React.createElement(PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts'),
require('!raw-loader!office-ui-fabric-react/src/components/Callout/Callout.types.ts'),
] }), overview: React.createElement("div", null,
React.createElement("p", null, "ContextualMenus are lists of commands that are based on the context of selection, mouse hover or keyboard focus. They are one of the most effective and highly used command surfaces, and can be used in a variety of places."),
React.createElement("p", null, "There are variants that originate from a command bar, or from cursor or focus. Those that come from CommandBars use a beak that is horizontally centered on the button. Ones that come from right click and menu button do not have a beak, but appear to the right and below the cursor. ContextualMenus can have submenus from commands, show selection checks, and icons."),
React.createElement("p", null, "Organize commands in groups divided by rules. This helps users remember command locations, or find less used commands based on proximity to others. One should also group sets of mutually exclusive or multiple selectable options. Use icons sparingly, for high value commands, and don\u2019t mix icons with selection checks, as it makes parsing commands difficult. Avoid submenus of submenus as they can be difficult to invoke or remember.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use to display commands."),
React.createElement("li", null, "Divide groups of commands with rules."),
React.createElement("li", null, "Use selection checks without icons."),
React.createElement("li", null, "Provide submenus for sets of related commands that aren\u2019t as critical as others."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use them to display content."),
React.createElement("li", null, "Show commands as one large group."),
React.createElement("li", null, "Mix checks and icons."),
React.createElement("li", null, "Create submenus of submenus."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus, tslib_1.__assign({}, ContextualMenuStatus)) }));
};
return ContextualMenuPage;
}(React.Component));
export { ContextualMenuPage };
//# sourceMappingURL=ContextualMenuPage.js.map