@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
70 lines • 4.33 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var LayoutGroup_1 = require("@uifabric/experiments/lib/LayoutGroup");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var Dropdown_1 = require("office-ui-fabric-react/lib/Dropdown");
var TextField_1 = require("office-ui-fabric-react/lib/TextField");
var ChoiceGroup_1 = require("office-ui-fabric-react/lib/ChoiceGroup");
var Checkbox_1 = require("office-ui-fabric-react/lib/Checkbox");
var Label_1 = require("office-ui-fabric-react/lib/Label");
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