office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 1.58 kB
JavaScript
module.exports = "import * as React from 'react';\nimport {\n Checkbox\n} from '../../../../Checkbox';\n\nexport interface ICheckboxBasicExampleState {\n isChecked: boolean;\n}\n\nexport class CheckboxBasicExample extends React.Component<{}, ICheckboxBasicExampleState> {\n constructor() {\n super();\n\n this.state = {\n isChecked: false\n };\n\n this._onCheckboxChange = this._onCheckboxChange.bind(this);\n }\n\n public render() {\n let { isChecked } = this.state;\n\n return (\n <div>\n <Checkbox\n label='Uncontrolled checkbox'\n onChange={ this._onCheckboxChange }\n inputProps={ {\n onFocus: () => { console.log('Uncontrolled checkbox is focused'); },\n onBlur: () => { console.log('Uncontrolled checkbox is blured'); }\n } } />\n\n <Checkbox\n label='Uncontrolled checkbox with defaultChecked true'\n defaultChecked={ true }\n onChange={ this._onCheckboxChange } />\n\n <Checkbox\n label='Disabled uncontrolled checkbox with defaultChecked true'\n disabled={ true }\n defaultChecked={ true }\n onChange={ this._onCheckboxChange } />\n\n <Checkbox\n label='Controlled checkbox'\n checked={ isChecked }\n onChange={ (ev, checked) => this.setState({ isChecked: checked }) } />\n </div>\n );\n }\n\n private _onCheckboxChange(ev: React.FormEvent<HTMLElement>, isChecked: boolean) {\n console.log(`The option has been changed to ${isChecked}.`);\n }\n\n}\n";