lucid-ui
Version:
A UI component library from AppNexus.
25 lines (24 loc) • 1.31 kB
JavaScript
import React from 'react';
import { SingleSelect } from '../../../index';
// eslint-disable-next-line react/prop-types
const OptionCols = ({ col1, col2 }) => (React.createElement("div", { style: { display: 'flex' } },
React.createElement("div", { style: { width: 100 } }, col1),
React.createElement("div", null, col2)));
export default class extends React.Component {
render() {
return (React.createElement(SingleSelect, null,
React.createElement(SingleSelect.OptionGroup, null,
React.createElement(OptionCols, { col1: 'ID', col2: 'NAME' }),
React.createElement(SingleSelect.Option, { Selected: 'Foo (1234)' },
React.createElement(OptionCols, { col1: '1234', col2: 'Foo' })),
React.createElement(SingleSelect.Option, { Selected: 'Bar (2345)' },
React.createElement(OptionCols, { col1: '2345', col2: 'Bar' })),
React.createElement(SingleSelect.Option, { Selected: 'Baz (3456)' },
React.createElement(OptionCols, { col1: '3456', col2: 'Baz' })))));
}
}
// begin-hide-from-docs
export const notes = `
This allows you to have multiple columns of data in your dropdown. Use this when additional data is needed to make a selection.
`;
// end-hide-from-docs