text: import * as tslib_1 from "tslib";
  import * as React from 'react';
  import { ExampleCard, ComponentPage, PropertiesTableSet } from '@uifabric/example-app-base';
  import { DropdownBasicExample } from './examples/Dropdown.Basic.Example';
  import { DropdownCustomExample } from './examples/Dropdown.Custom.Example';
  import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
  import { DropdownStatus } from './Dropdown.checklist';
  var DropdownBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx');
  var DropdownCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Custom.Example.tsx');
  var DropdownPage = /** @class */ (function (_super) {
      tslib_1.__extends(DropdownPage, _super);
      function DropdownPage() {
          return _super !== null && _super.apply(this, arguments) || this;
      }
      DropdownPage.prototype.render = function () {
          return (React.createElement(ComponentPage, { title: 'Dropdown', componentName: 'DropdownExample', exampleCards: React.createElement("div", null,
                  React.createElement(ExampleCard, { title: 'Dropdown', code: DropdownBasicExampleCode },
                      React.createElement(DropdownBasicExample, null)),
                  React.createElement(ExampleCard, { title: 'Customized Dropdown', code: DropdownCustomExampleCode },
                      React.createElement(DropdownCustomExample, null))), propertiesTables: React.createElement(PropertiesTableSet, { sources: [
                      require('!raw-loader!office-ui-fabric-react/src/components/Dropdown/Dropdown.Props.ts'),
                      require('!raw-loader!office-ui-fabric-react/src/utilities/selectableOption/SelectableDroppableText.Props.ts')
                  ] }), overview: React.createElement("div", null,
                  React.createElement("p", null, "A Dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                  React.createElement("ul", null,
                      React.createElement("li", null, "Use a Dropdown when there are multiple choices that can be collapsed under one title. Or if the list of items is long or when space is constrained."),
                      React.createElement("li", null, "Dropdowns contain shortened statements or words."),
                      React.createElement("li", null, "Use a Dropdown when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible putting more emphasis on the other options)."))), donts: React.createElement("div", null), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus, tslib_1.__assign({}, DropdownStatus)) }));
      };
      return DropdownPage;
  }(React.Component));
  export { DropdownPage };
  //# sourceMappingURL=DropdownPage.js.map