office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
30 lines • 1.88 kB
JavaScript
define(["require", "exports", "react", "office-ui-fabric-react/lib/Checkbox", "office-ui-fabric-react/lib/Link", "office-ui-fabric-react/lib/Stack"], function (require, exports, React, Checkbox_1, Link_1, Stack_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// Optional extra props to pass through to the input element
var inputProps = {
onFocus: function () { return console.log('Checkbox is focused'); },
onBlur: function () { return console.log('Checkbox is blurred'); }
};
// Used to add spacing between example checkboxes
var stackTokens = { childrenGap: 10 };
exports.CheckboxOtherExample = function () {
// Only for the first checkbox, which is controlled
var _a = React.useState(true), isChecked = _a[0], setIsChecked = _a[1];
var onChange = React.useCallback(function (ev, checked) {
setIsChecked(!!checked);
}, []);
return (React.createElement(Stack_1.Stack, { tokens: stackTokens },
React.createElement(Checkbox_1.Checkbox, { label: "Controlled checkbox", checked: isChecked, onChange: onChange }),
React.createElement(Checkbox_1.Checkbox, { label: 'Checkbox rendered with boxSide "end"', boxSide: "end" }),
React.createElement(Checkbox_1.Checkbox, { label: "Checkbox with extra props for the input", inputProps: inputProps }),
React.createElement(Checkbox_1.Checkbox, { label: "Checkbox with link inside the label", onRenderLabel: _renderLabelWithLink })));
};
function _renderLabelWithLink() {
return (React.createElement("span", null,
"Custom-rendered label with a",
' ',
React.createElement(Link_1.Link, { href: "https://www.microsoft.com", target: "_blank" }, "link")));
}
});
//# sourceMappingURL=Checkbox.Other.Example.js.map