office-ui-fabric-react/lib/components/ChoiceGroup/examples/ChoiceGroup.Image.Example.js

Reusable React components for building experiences for Office 365.

import * as React from 'react';
import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
import { TestImages } from '@uifabric/example-data';
export var ChoiceGroupImageExample = function () {
    var _a = React.useState('bar'), selectedKey = _a[0], setSelectedKey = _a[1];
    var onChange = function (ev, option) {
        setSelectedKey(option.key);
    };
    return (React.createElement("div", null,
        React.createElement(ChoiceGroup, { label: "Pick one image", selectedKey: selectedKey, options: [
                {
                    key: 'bar',
                    imageSrc: TestImages.choiceGroupBarUnselected,
                    imageAlt: 'Bar chart icon',
                    selectedImageSrc: TestImages.choiceGroupBarSelected,
                    imageSize: { width: 32, height: 32 },
                    text: 'Clustered bar chart' // This text is long to show text wrapping.
                },
                {
                    key: 'pie',
                    imageSrc: TestImages.choiceGroupBarUnselected,
                    selectedImageSrc: TestImages.choiceGroupBarSelected,
                    imageSize: { width: 32, height: 32 },
                    text: 'Pie chart'
                }
            ], onChange: onChange })));
};
//# sourceMappingURL=ChoiceGroup.Image.Example.js.map