@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
26 lines • 1.89 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Toggle } from '../index';
var toggleTokens = function (props) {
return tslib_1.__assign({}, (props.checked ? { textColor: 'green' } : { textColor: 'red' }), (props.disabled
? tslib_1.__assign({ pillBackground: 'gainsboro' }, (props.checked ? { pillBackground: 'slategrey' } : {})) : tslib_1.__assign({ pillBackground: 'turquoise' }, (props.checked ? { pillBackground: 'navy' } : {}))));
};
var ToggleTokensFunctionExample = /** @class */ (function (_super) {
tslib_1.__extends(ToggleTokensFunctionExample, _super);
function ToggleTokensFunctionExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
ToggleTokensFunctionExample.prototype.render = function () {
return (React.createElement("div", null,
React.createElement(Toggle, { defaultChecked: true, label: "Enabled and checked", onText: "On", offText: "Off", onChange: this._onChange, tokens: toggleTokens }),
React.createElement(Toggle, { defaultChecked: false, label: "Enabled and unchecked", onText: "On", offText: "Off", onChange: this._onChange, tokens: toggleTokens }),
React.createElement(Toggle, { defaultChecked: true, disabled: true, label: "Disabled and checked", onText: "On", offText: "Off", tokens: toggleTokens }),
React.createElement(Toggle, { defaultChecked: false, disabled: true, label: "Disabled and unchecked", onText: "On", offText: "Off", tokens: toggleTokens })));
};
ToggleTokensFunctionExample.prototype._onChange = function (ev, checked) {
console.log('toggle is ' + (checked ? 'checked' : 'not checked'));
};
return ToggleTokensFunctionExample;
}(React.Component));
export { ToggleTokensFunctionExample };
//# sourceMappingURL=Toggle.Tokens.Function.Example.js.map