office-ui-fabric-react/lib/components/Slider/SliderPage.js

Reusable React components for building experiences for Office 365.

"use strict";
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 Slider_Basic_Example_1 = require("./examples/Slider.Basic.Example");
var SliderBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Slider/examples/Slider.Basic.Example.tsx');
var SliderPage = (function (_super) {
    tslib_1.__extends(SliderPage, _super);
    function SliderPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    SliderPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'Slider', componentName: 'SliderExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Slider', code: SliderBasicExampleCode },
                React.createElement(Slider_Basic_Example_1.SliderBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/Slider/Slider.Props.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "A Slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the Slider bar can show values and users can choose where they want to drag the knob or lever to set the value."),
                React.createElement("p", null, "A Slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium\u2014not about setting the value to two or five.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Consider a Slider when changing a value."),
                    React.createElement("li", null, "Use a slider when you want your users to be able to set defined values (such as volume or brightness)."),
                    React.createElement("li", null, "Include a label indicating what value the Slider changes."),
                    React.createElement("li", null, "Use step points (or tick marks) if you don\u2019t want the Slider to allow arbitrary values between min and max. "),
                    React.createElement("li", null, "Use a Slider when the user would benefit from instant feedback on the effect of setting changes. "))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Don't use a Slider when the options are not values."),
                    React.createElement("li", null, "Don\u2019t use a Slider for binary settings."),
                    React.createElement("li", null, "Don\u2019t create a continuous Slider if the range of values is large."),
                    React.createElement("li", null, "Don\u2019t use for a range of three values or less."))), isHeaderVisible: this.props.isHeaderVisible }));
    };
    return SliderPage;
}(React.Component));
exports.SliderPage = SliderPage;

//# sourceMappingURL=SliderPage.js.map