@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
68 lines • 4.06 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { LayoutGroup } from '@uifabric/experiments/lib/LayoutGroup';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { Label } from '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, { layoutGap: 20, direction: "vertical" },
React.createElement("h2", null, "A List of Inputs"),
React.createElement(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, { layoutGap: 20, direction: "horizontal", justify: "fill" },
React.createElement(TextField, { label: "TextField with a placeholder", placeholder: "Now I am a Placeholder", ariaLabel: "Please enter text here" }),
React.createElement(TextField, { label: "TextField with an icon", iconProps: { iconName: 'Calendar' } })),
React.createElement(LayoutGroup, { layoutGap: 20, direction: "horizontal", justify: "fill" },
React.createElement(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, { layoutGap: 10 },
React.createElement(Label, null, "Pick a few"),
React.createElement(Checkbox, { label: "Checkbox A" }),
React.createElement(Checkbox, { label: "Checkbox A" }),
React.createElement(Checkbox, { label: "Checkbox A" }),
React.createElement(Checkbox, { label: "Checkbox A" }),
React.createElement(Checkbox, { label: "Checkbox A" }))),
React.createElement(PrimaryButton, null, "Submit"))));
};
return LayoutGroupBasicExample;
}(React.Component));
export { LayoutGroupBasicExample };
//# sourceMappingURL=LayoutGroup.Basic.Example.js.map