office-ui-fabric-react/lib-amd/components/Toggle/TogglePage.js

Reusable React components for building experiences for Office 365.

define(["require", "exports", "tslib", "react", "@uifabric/example-app-base", "./examples/Toggle.Basic.Example", "./examples/Toggle.AriaLabel.Example", "../../Styling", "../../demo/ComponentStatus/ComponentStatus", "./Toggle.checklist"], function (require, exports, tslib_1, React, example_app_base_1, Toggle_Basic_Example_1, Toggle_AriaLabel_Example_1, Styling_1, ComponentStatus_1, Toggle_checklist_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ToggleBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Toggle/examples/Toggle.Basic.Example.tsx');
    var ToggleAriaLabelExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Toggle/examples/Toggle.AriaLabel.Example.tsx');
    var TogglePage = /** @class */ (function (_super) {
        tslib_1.__extends(TogglePage, _super);
        function TogglePage() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        TogglePage.prototype.render = function () {
            return (React.createElement(example_app_base_1.ComponentPage, { title: 'Toggle', componentName: 'ToggleExample', exampleCards: React.createElement("div", null,
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Default Toggles', code: ToggleBasicExampleCode },
                        React.createElement(Toggle_Basic_Example_1.ToggleBasicExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Toggle with specialized aria labels for the screen-reader to announce when the toggle is on and off', code: ToggleAriaLabelExampleCode },
                        React.createElement(Toggle_AriaLabel_Example_1.ToggleAriaLabelExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                        require('!raw-loader!office-ui-fabric-react/src/components/Toggle/Toggle.types.ts')
                    ] }), overview: React.createElement("div", null,
                    React.createElement("p", null, "Toggles represent a physical switch that allows users to turn things on or off. Use Toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action. Use a Toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best control to use."),
                    React.createElement("h2", { className: Styling_1.FontClassNames.xLarge }, "Choosing between Toggle and Checkbox"),
                    React.createElement("p", null, "For some actions, either a Toggle or a Checkbox might work. To decide which control would work better, follow these tips:"),
                    React.createElement("ul", null,
                        React.createElement("li", null, "Use a Toggle for binary settings when changes become effective immediately after the user changes them."),
                        React.createElement("li", null, "In the above example, it's clear with the Toggle that the wireless is set to \"On.\" But with the Checkbox, the user needs to think about whether the wireless is on now or whether they need to check the box to turn wireless on."),
                        React.createElement("li", null, "Use a Checkbox when the user has to perform extra steps for changes to be effective. For example, if the user must click a \"Submit\", \"Next\", \"Ok\" button to apply changes, use a Checkbox."))), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                    React.createElement("ul", null,
                        React.createElement("li", null, "Only replace the On and Off labels if there are more specific labels for the setting. If there are short (3-4 characters) labels that represent binary opposites that are more appropriate for a particular setting, use them. For example, you might use \"Show/Hide\" if the setting is \"Show images.\""))), donts: React.createElement("div", null,
                    React.createElement("ul", null, "Don\u2019t use a Toggle if the user will have to do something else or go somewhere else in order to experience its effect. If any extra step is required for changes to be effective, you should use a checkbox and corresponding \"Apply\" button instead of a Toggle.")), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, Toggle_checklist_1.ToggleStatus)) }));
        };
        return TogglePage;
    }(React.Component));
    exports.TogglePage = TogglePage;
});
//# sourceMappingURL=TogglePage.js.map