Checkbox


import * as React from 'react';    
import { Checkbox, ICheckboxStyles} from 'office-ui-fabric-react/lib/Checkbox';

interface IProps_CheckboxExample {
}
interface IState_CheckboxExample {
  isChecked: boolean;
}

export class CheckboxBasicExample extends React.Component<IProps_CheckboxExample ,

IState_CheckboxExample> {
  constructor(props: IProps_CheckboxExample) {
    super(props);

    this.state = {
      isChecked: false
    };

    this._onCheckboxChange = this._onCheckboxChange.bind(this);
  }

  render() {
    let { isChecked } = this.state;

    let styles: ICheckboxStyles = {
      root: {
        marginTop: '10px',
        backgroundColor: '#8CC152',
        paddingTop: '10px',
        paddingBottom: '10px',
        paddingLeft: '10px'
      },
      checkmark: {
      }
    };

    return (
      <div>
        <Checkbox
          label='CheckBox 1'
          onChange={ this._onCheckboxChange }
          inputProps={ {
            onFocus: () => { console.log('Uncontrolled checkbox is focused'); },
            onBlur: () => { console.log('Uncontrolled checkbox is blured'); }
          } }
          styles={ styles }
        />

        <Checkbox
          label='CheckBox 2'
          onChange={ this._onCheckboxChange }
          inputProps={ {
            onFocus: () => { console.log('Uncontrolled checkbox is focused'); },
            onBlur: () => { console.log('Uncontrolled checkbox is blured'); }
          } }
          styles={ styles }
        />
      </div>
    );
  }

  _onCheckboxChange(ev: React.FormEvent<HTMLElement>, isChecked: boolean) {
    console.log("The option has been changed to ${isChecked}.");
  }
}



© 2019 Better Solutions Limited. All Rights Reserved. © 2019 Better Solutions Limited TopPrevNext