office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 1.9 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport {\r\n Dropdown\r\n} from '../../../../index';\r\nimport './Dropdown.Basic.Example.scss';\r\n\r\nexport class DropdownBasicExample extends React.Component<any, any> {\r\n constructor() {\r\n super();\r\n this.state = {\r\n selectedItem: null\r\n };\r\n }\r\n\r\n public render() {\r\n let { selectedItem } = this.state;\r\n\r\n return (\r\n <div className='ms-DropdownBasicExample'>\r\n\r\n <Dropdown\r\n label='Basic example:'\r\n options={\r\n [\r\n { key: 'A', text: 'Option a' },\r\n { key: 'B', text: 'Option b' },\r\n { key: 'C', text: 'Option c' },\r\n { key: 'D', text: 'Option d' },\r\n { key: 'E', text: 'Option e' },\r\n { key: 'F', text: 'Option f' },\r\n { key: 'G', text: 'Option g' },\r\n { key: 'H', text: 'Option h' },\r\n { key: 'I', text: 'Option i' },\r\n { key: 'J', text: 'Option j' },\r\n ]\r\n }\r\n onChanged={ (item) => this.setState({ selectedItem: item }) }\r\n />\r\n <div>{ `Item selected: ${selectedItem ? selectedItem.text : '<none>'}` }</div>\r\n\r\n <Dropdown\r\n label='Disabled example:'\r\n defaultSelectedKey='D'\r\n options={\r\n [\r\n { key: 'A', text: 'Option a' },\r\n { key: 'B', text: 'Option b' },\r\n { key: 'C', text: 'Option c' },\r\n { key: 'D', text: 'Option d' },\r\n { key: 'E', text: 'Option e' },\r\n { key: 'F', text: 'Option f' },\r\n { key: 'G', text: 'Option g' },\r\n ]\r\n }\r\n disabled={ true }\r\n />\r\n </div>\r\n );\r\n }\r\n\r\n}\r\n"; });