UNPKG

office-ui-fabric-react

Version:

Reusable React components for building experiences for Office 365.

30 lines (28 loc) 2.83 kB
define(["require", "exports", "tslib", "react", "@uifabric/example-app-base", "./examples/Label.Basic.Example"], function (require, exports, tslib_1, React, example_app_base_1, Label_Basic_Example_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var LabelBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Label/examples/Label.Basic.Example.tsx'); var LabelPage = (function (_super) { tslib_1.__extends(LabelPage, _super); function LabelPage() { return _super !== null && _super.apply(this, arguments) || this; } LabelPage.prototype.render = function () { return (React.createElement(example_app_base_1.ComponentPage, { title: 'Label', componentName: 'LabelExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Label', code: LabelBasicExampleCode }, React.createElement(Label_Basic_Example_1.LabelBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [ require('!raw-loader!office-ui-fabric-react/src/components/Label/Label.Props.ts') ] }), overview: React.createElement("div", null, React.createElement("p", null, "Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as TextField, Dropdown, or Toggle, already have Labels incorporated, but other components may optionally add a Label if it helps inform the user of the component\u2019s purpose.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null, React.createElement("ul", null, React.createElement("li", null, "Use sentence casing, e.g. \u201CFirst name\u201D."), React.createElement("li", null, "Be short and concise."), React.createElement("li", null, "When adding a Label to components, use the text as a noun or short noun phrase."))), donts: React.createElement("div", null, React.createElement("ul", null, React.createElement("li", null, "Use Labels as instructional text, e.g. \u201CClick to get started\u201D."), React.createElement("li", null, "Don\u2019t use full sentences or complex punctuation (colons, semicolons, etc.)."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Label/Label.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible })); }; return LabelPage; }(React.Component)); exports.LabelPage = LabelPage; }); //# sourceMappingURL=LabelPage.js.map