office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
42 lines • 4.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var VerticalDivider_Basic_Example_1 = require("./examples/VerticalDivider.Basic.Example");
var VerticalDivider_Custom_Example_1 = require("./examples/VerticalDivider.Custom.Example");
var ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var Divider_checklist_1 = require("./Divider.checklist");
var VerticalDividerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Basic.Example.tsx');
var VerticalDividerCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Custom.Example.tsx');
var DividerPage = /** @class */ (function (_super) {
tslib_1.__extends(DividerPage, _super);
function DividerPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
DividerPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Divider', componentName: 'DividerExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Vertical Divider', code: VerticalDividerBasicExampleCode },
React.createElement(VerticalDivider_Basic_Example_1.VerticalDividerBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Custom Vertical Divider', code: VerticalDividerCustomExampleCode },
React.createElement(VerticalDivider_Custom_Example_1.VerticalDividerCustomExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Divider/VerticalDivider.types.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "A Divider is a line that is used to visually differentiate different parts of a UI. They are commonly used in headers and command bars. This divider automatically center algins itself within the parent container and can be customized to be shown in different heights and colors.")), bestPractices: React.createElement("div", null,
React.createElement("p", null, "Use a divider component to show a sectional or continuity change in the content between two blocks of information. The spacing around the divider is generally determined by the content surrounding it."),
React.createElement("p", null,
"There are two recommended divider color combinations:",
React.createElement("ol", null,
React.createElement("li", null, "#C8C8C8/neutralTertiaryAlt divider when used within an #F4F4F4/neutralLighter layout"),
React.createElement("li", null, " #EAEAEA/neutralLight divider when used within an #FFFFFF/white layout")))), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use a divider to separate sections that may not otherwise have a clear beginning or end."),
React.createElement("li", null, "Use a divider to separate information blocks where the context or continuity changes between the blocks."),
React.createElement("li", null, "When the divider is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type, or may be used to provide for an accessible fallback in older browsers that do not support WAI-ARIA use role=\"presentation\"."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Do not use dividers for graphic decoration."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, Divider_checklist_1.DividerStatus)) }));
};
return DividerPage;
}(React.Component));
exports.DividerPage = DividerPage;
//# sourceMappingURL=DividerPage.js.map