@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
63 lines • 4.5 kB
JavaScript
define(["require", "exports", "tslib", "react", "@uifabric/experiments/lib/LayoutGroup", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/Dropdown", "office-ui-fabric-react/lib/TextField", "office-ui-fabric-react/lib/ChoiceGroup", "office-ui-fabric-react/lib/Checkbox", "office-ui-fabric-react/lib/Label"], function (require, exports, tslib_1, React, LayoutGroup_1, Button_1, Dropdown_1, TextField_1, ChoiceGroup_1, Checkbox_1, Label_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var LayoutGroupBasicExample = /** @class */ (function (_super) {
tslib_1.__extends(LayoutGroupBasicExample, _super);
function LayoutGroupBasicExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
LayoutGroupBasicExample.prototype.render = function () {
return (React.createElement("div", null,
React.createElement("h3", null, "Layout Group"),
React.createElement(LayoutGroup_1.LayoutGroup, { layoutGap: 20, direction: "vertical" },
React.createElement("h2", null, "A List of Inputs"),
React.createElement(Dropdown_1.Dropdown, { placeholder: "Select an Option", label: "Basic uncontrolled example:", ariaLabel: "Basic dropdown example", options: [
{ key: 'A', text: 'Option a' },
{ key: 'B', text: 'Option b' },
{ key: 'C', text: 'Option c' },
{ key: 'D', text: 'Option d' },
{ key: 'E', text: 'Option e' },
{ key: 'F', text: 'Option f' },
{ key: 'G', text: 'Option g' },
{ key: 'H', text: 'Option h' },
{ key: 'I', text: 'Option i' },
{ key: 'J', text: 'Option j' }
] }),
React.createElement(LayoutGroup_1.LayoutGroup, { layoutGap: 20, direction: "horizontal", justify: "fill" },
React.createElement(TextField_1.TextField, { label: "TextField with a placeholder", placeholder: "Now I am a Placeholder", ariaLabel: "Please enter text here" }),
React.createElement(TextField_1.TextField, { label: "TextField with an icon", iconProps: { iconName: 'Calendar' } })),
React.createElement(LayoutGroup_1.LayoutGroup, { layoutGap: 20, direction: "horizontal", justify: "fill" },
React.createElement(ChoiceGroup_1.ChoiceGroup, { defaultSelectedKey: "B", options: [
{
key: 'A',
text: 'Option A'
},
{
key: 'B',
text: 'Option B'
},
{
key: 'C',
text: 'Option C',
disabled: true
},
{
key: 'D',
text: 'Option D',
disabled: true
}
], label: "Pick one", required: true }),
React.createElement(LayoutGroup_1.LayoutGroup, { layoutGap: 10 },
React.createElement(Label_1.Label, null, "Pick a few"),
React.createElement(Checkbox_1.Checkbox, { label: "Checkbox A" }),
React.createElement(Checkbox_1.Checkbox, { label: "Checkbox A" }),
React.createElement(Checkbox_1.Checkbox, { label: "Checkbox A" }),
React.createElement(Checkbox_1.Checkbox, { label: "Checkbox A" }),
React.createElement(Checkbox_1.Checkbox, { label: "Checkbox A" }))),
React.createElement(Button_1.PrimaryButton, null, "Submit"))));
};
return LayoutGroupBasicExample;
}(React.Component));
exports.LayoutGroupBasicExample = LayoutGroupBasicExample;
});
//# sourceMappingURL=LayoutGroup.Basic.Example.js.map