Skip to content

Instantly share code, notes, and snippets.

@LukeOwlclaw

LukeOwlclaw/index.html

Last active July 21, 2020 13:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LukeOwlclaw/894b6aa833996f2879bd2f5e3bc519bd to your computer and use it in GitHub Desktop.
Save LukeOwlclaw/894b6aa833996f2879bd2f5e3bc519bd to your computer and use it in GitHub Desktop.
Download ZIP
FluentUI Dropdown with many items
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Fabric Example Pen</title>
<script src="//unpkg.com/react@16.8.6/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
</head>
<body translate="no">
<script src="//unpkg.com/office-ui-fabric-react@7/dist/office-ui-fabric-react.js"></script>
<script src="//unpkg.com/@uifabric/react-hooks@7/dist/react-hooks.js"></script>
<div id="content"></div>
<script id="rendered-js">
"use strict";
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
var _a = window.Fabric, Dropdown = _a.Dropdown, DropdownMenuItemType = _a.DropdownMenuItemType, IDropdownOption = _a.IDropdownOption, IDropdownStyles = _a.IDropdownStyles, Fabric = _a.Fabric, initializeIcons = _a.initializeIcons;
// Initialize icons in case this example uses them
initializeIcons();
var dropdownStyles = { dropdown: { width: 300 } };
var DropdownControlledMultiExampleOptions = [
{ key: 'fruitsHeader', text: 'Fruits', itemType: DropdownMenuItemType.Header },
{ key: 'apple', text: 'Apple' },
{ key: 'banana', text: 'Banana' },
{ key: 'orange', text: 'Orange', disabled: true },
{ key: 'grape', text: 'Grape' },
{ key: 'divider_1', text: '-', itemType: DropdownMenuItemType.Divider },
{ key: 'vegetablesHeader', text: 'Vegetables', itemType: DropdownMenuItemType.Header },
{ key: 'broccoli', text: 'Broccoli' },
{ key: 'carrot', text: 'Carrot' },
{ key: 'lettuce', text: 'Lettuce' },
{ key: 'broccoli1', text: 'Broccoli1' },
{ key: 'broccoli2', text: 'Broccoli2' },
{ key: 'broccoli3', text: 'Broccoli3' },
{ key: 'broccoli4', text: 'Broccoli4' },
{ key: 'broccoli5', text: 'Broccoli5' },
{ key: 'broccoli6', text: 'Broccoli6' },
{ key: 'broccoli7', text: 'Broccoli7' },
{ key: 'broccoli8', text: 'Broccoli8' },
{ key: 'broccoli9', text: 'Broccoli9' },
{ key: 'broccoli10', text: 'Broccoli10' },
{ key: 'broccoli11', text: 'Broccoli11' },
{ key: 'broccoli12', text: 'Broccoli12' },
{ key: 'broccoli13', text: 'Broccoli13' },
{ key: 'broccoli14', text: 'Broccoli14' },
{ key: 'broccoli15', text: 'Broccoli15' },
{ key: 'broccoli16', text: 'Broccoli16' },
{ key: 'broccoli17', text: 'Broccoli17' },
{ key: 'broccoli18', text: 'Broccoli18' },
{ key: 'broccoli19', text: 'Broccoli19' },
{ key: 'broccoli20', text: 'Broccoli20' },
{ key: 'broccoli21', text: 'Broccoli21' },
{ key: 'broccoli22', text: 'Broccoli22' },
{ key: 'broccoli23', text: 'Broccoli23' },
{ key: 'broccoli24', text: 'Broccoli24' },
{ key: 'broccoli25', text: 'Broccoli25' },
{ key: 'broccoli26', text: 'Broccoli26' },
{ key: 'broccoli27', text: 'Broccoli27' },
{ key: 'broccoli28', text: 'Broccoli28' },
{ key: 'broccoli29', text: 'Broccoli29' },
{ key: 'broccoli30', text: 'Broccoli30' },
{ key: 'broccoli31', text: 'Broccoli31' },
{ key: 'broccoli32', text: 'Broccoli32' },
{ key: 'broccoli33', text: 'Broccoli33' },
{ key: 'broccoli34', text: 'Broccoli34' },
{ key: 'broccoli35', text: 'Broccoli35' },
{ key: 'broccoli36', text: 'Broccoli36' },
{ key: 'broccoli37', text: 'Broccoli37' },
{ key: 'broccoli38', text: 'Broccoli38' },
{ key: 'broccoli39', text: 'Broccoli39' },
{ key: 'broccoli40', text: 'Broccoli40' },
{ key: 'broccoli41', text: 'Broccoli41' },
{ key: 'broccoli42', text: 'Broccoli42' },
{ key: 'broccoli43', text: 'Broccoli43' },
{ key: 'broccoli44', text: 'Broccoli44' },
{ key: 'broccoli45', text: 'Broccoli45' },
{ key: 'broccoli46', text: 'Broccoli46' },
{ key: 'broccoli47', text: 'Broccoli47' },
{ key: 'broccoli48', text: 'Broccoli48' },
{ key: 'broccoli49', text: 'Broccoli49' },
{ key: 'broccoli50', text: 'Broccoli50' },
{ key: 'broccoli51', text: 'Broccoli51' },
{ key: 'broccoli52', text: 'Broccoli52' },
{ key: 'broccoli53', text: 'Broccoli53' },
{ key: 'broccoli54', text: 'Broccoli54' },
{ key: 'broccoli55', text: 'Broccoli55' },
{ key: 'broccoli56', text: 'Broccoli56' },
{ key: 'broccoli57', text: 'Broccoli57' },
{ key: 'broccoli58', text: 'Broccoli58' },
{ key: 'broccoli59', text: 'Broccoli59' },
{ key: 'broccoli60', text: 'Broccoli60' },
{ key: 'broccoli61', text: 'Broccoli61' },
{ key: 'broccoli62', text: 'Broccoli62' },
{ key: 'broccoli63', text: 'Broccoli63' },
{ key: 'broccoli64', text: 'Broccoli64' },
{ key: 'broccoli65', text: 'Broccoli65' },
{ key: 'broccoli66', text: 'Broccoli66' },
{ key: 'broccoli67', text: 'Broccoli67' },
{ key: 'broccoli68', text: 'Broccoli68' },
{ key: 'broccoli69', text: 'Broccoli69' },
{ key: 'broccoli70', text: 'Broccoli70' },
{ key: 'broccoli71', text: 'Broccoli71' },
{ key: 'broccoli72', text: 'Broccoli72' },
{ key: 'broccoli73', text: 'Broccoli73' },
{ key: 'broccoli74', text: 'Broccoli74' },
{ key: 'broccoli75', text: 'Broccoli75' },
{ key: 'broccoli76', text: 'Broccoli76' },
{ key: 'broccoli77', text: 'Broccoli77' },
{ key: 'broccoli78', text: 'Broccoli78' },
{ key: 'broccoli79', text: 'Broccoli79' },
{ key: 'broccoli80', text: 'Broccoli80' },
{ key: 'broccoli81', text: 'Broccoli81' },
{ key: 'broccoli82', text: 'Broccoli82' },
{ key: 'broccoli83', text: 'Broccoli83' },
{ key: 'broccoli84', text: 'Broccoli84' },
{ key: 'broccoli85', text: 'Broccoli85' },
{ key: 'broccoli86', text: 'Broccoli86' },
{ key: 'broccoli87', text: 'Broccoli87' },
{ key: 'broccoli88', text: 'Broccoli88' },
{ key: 'broccoli89', text: 'Broccoli89' },
{ key: 'broccoli90', text: 'Broccoli90' },
{ key: 'broccoli91', text: 'Broccoli91' },
{ key: 'broccoli92', text: 'Broccoli92' },
{ key: 'broccoli93', text: 'Broccoli93' },
{ key: 'broccoli94', text: 'Broccoli94' },
{ key: 'broccoli95', text: 'Broccoli95' },
{ key: 'broccoli96', text: 'Broccoli96' },
{ key: 'broccoli97', text: 'Broccoli97' },
{ key: 'broccoli98', text: 'Broccoli98' },
{ key: 'broccoli99', text: 'Broccoli99' },
{ key: 'broccoli100', text: 'Broccoli100' },
{ key: 'broccoli101', text: 'Broccoli101' },
{ key: 'broccoli102', text: 'Broccoli102' },
{ key: 'broccoli103', text: 'Broccoli103' },
{ key: 'broccoli104', text: 'Broccoli104' },
{ key: 'broccoli105', text: 'Broccoli105' },
{ key: 'broccoli106', text: 'Broccoli106' },
{ key: 'broccoli107', text: 'Broccoli107' },
{ key: 'broccoli108', text: 'Broccoli108' },
{ key: 'broccoli109', text: 'Broccoli109' },
{ key: 'broccoli110', text: 'Broccoli110' },
{ key: 'broccoli111', text: 'Broccoli111' },
{ key: 'broccoli112', text: 'Broccoli112' },
{ key: 'broccoli113', text: 'Broccoli113' },
{ key: 'broccoli114', text: 'Broccoli114' },
{ key: 'broccoli115', text: 'Broccoli115' },
{ key: 'broccoli116', text: 'Broccoli116' },
{ key: 'broccoli117', text: 'Broccoli117' },
{ key: 'broccoli118', text: 'Broccoli118' },
{ key: 'broccoli119', text: 'Broccoli119' },
{ key: 'broccoli120', text: 'Broccoli120' },
{ key: 'broccoli121', text: 'Broccoli121' },
{ key: 'broccoli122', text: 'Broccoli122' },
{ key: 'broccoli123', text: 'Broccoli123' },
{ key: 'broccoli124', text: 'Broccoli124' },
{ key: 'broccoli125', text: 'Broccoli125' },
{ key: 'broccoli126', text: 'Broccoli126' },
{ key: 'broccoli127', text: 'Broccoli127' },
{ key: 'broccoli128', text: 'Broccoli128' },
{ key: 'broccoli129', text: 'Broccoli129' },
{ key: 'broccoli130', text: 'Broccoli130' },
{ key: 'broccoli131', text: 'Broccoli131' },
{ key: 'broccoli132', text: 'Broccoli132' },
{ key: 'broccoli133', text: 'Broccoli133' },
{ key: 'broccoli134', text: 'Broccoli134' },
{ key: 'broccoli135', text: 'Broccoli135' },
{ key: 'broccoli136', text: 'Broccoli136' },
{ key: 'broccoli137', text: 'Broccoli137' },
{ key: 'broccoli138', text: 'Broccoli138' },
{ key: 'broccoli139', text: 'Broccoli139' },
{ key: 'broccoli140', text: 'Broccoli140' },
{ key: 'broccoli141', text: 'Broccoli141' },
{ key: 'broccoli142', text: 'Broccoli142' },
{ key: 'broccoli143', text: 'Broccoli143' },
{ key: 'broccoli144', text: 'Broccoli144' },
{ key: 'broccoli145', text: 'Broccoli145' },
{ key: 'broccoli146', text: 'Broccoli146' },
{ key: 'broccoli147', text: 'Broccoli147' },
{ key: 'broccoli148', text: 'Broccoli148' },
{ key: 'broccoli149', text: 'Broccoli149' },
{ key: 'broccoli150', text: 'Broccoli150' },
{ key: 'broccoli151', text: 'Broccoli151' },
{ key: 'broccoli152', text: 'Broccoli152' },
{ key: 'broccoli153', text: 'Broccoli153' },
{ key: 'broccoli154', text: 'Broccoli154' },
{ key: 'broccoli155', text: 'Broccoli155' },
{ key: 'broccoli156', text: 'Broccoli156' },
{ key: 'broccoli157', text: 'Broccoli157' },
{ key: 'broccoli158', text: 'Broccoli158' },
{ key: 'broccoli159', text: 'Broccoli159' },
{ key: 'broccoli160', text: 'Broccoli160' },
{ key: 'broccoli161', text: 'Broccoli161' },
{ key: 'broccoli162', text: 'Broccoli162' },
{ key: 'broccoli163', text: 'Broccoli163' },
{ key: 'broccoli164', text: 'Broccoli164' },
{ key: 'broccoli165', text: 'Broccoli165' },
{ key: 'broccoli166', text: 'Broccoli166' },
{ key: 'broccoli167', text: 'Broccoli167' },
{ key: 'broccoli168', text: 'Broccoli168' },
{ key: 'broccoli169', text: 'Broccoli169' },
{ key: 'broccoli170', text: 'Broccoli170' },
{ key: 'broccoli171', text: 'Broccoli171' },
{ key: 'broccoli172', text: 'Broccoli172' },
{ key: 'broccoli173', text: 'Broccoli173' },
{ key: 'broccoli174', text: 'Broccoli174' },
{ key: 'broccoli175', text: 'Broccoli175' },
{ key: 'broccoli176', text: 'Broccoli176' },
{ key: 'broccoli177', text: 'Broccoli177' },
{ key: 'broccoli178', text: 'Broccoli178' },
{ key: 'broccoli179', text: 'Broccoli179' },
{ key: 'broccoli180', text: 'Broccoli180' },
{ key: 'broccoli181', text: 'Broccoli181' },
{ key: 'broccoli182', text: 'Broccoli182' },
{ key: 'broccoli183', text: 'Broccoli183' },
{ key: 'broccoli184', text: 'Broccoli184' },
{ key: 'broccoli185', text: 'Broccoli185' },
{ key: 'broccoli186', text: 'Broccoli186' },
{ key: 'broccoli187', text: 'Broccoli187' },
{ key: 'broccoli188', text: 'Broccoli188' },
{ key: 'broccoli189', text: 'Broccoli189' },
{ key: 'broccoli190', text: 'Broccoli190' },
{ key: 'broccoli191', text: 'Broccoli191' },
{ key: 'broccoli192', text: 'Broccoli192' },
{ key: 'broccoli193', text: 'Broccoli193' },
{ key: 'broccoli194', text: 'Broccoli194' },
{ key: 'broccoli195', text: 'Broccoli195' },
{ key: 'broccoli196', text: 'Broccoli196' },
{ key: 'broccoli197', text: 'Broccoli197' },
{ key: 'broccoli198', text: 'Broccoli198' },
{ key: 'broccoli199', text: 'Broccoli199' },
{ key: 'broccoli200', text: 'Broccoli200' },
{ key: 'broccoli201', text: 'Broccoli201' },
{ key: 'broccoli202', text: 'Broccoli202' },
{ key: 'broccoli203', text: 'Broccoli203' },
{ key: 'broccoli204', text: 'Broccoli204' },
{ key: 'broccoli205', text: 'Broccoli205' },
{ key: 'broccoli206', text: 'Broccoli206' },
{ key: 'broccoli207', text: 'Broccoli207' },
{ key: 'broccoli208', text: 'Broccoli208' },
{ key: 'broccoli209', text: 'Broccoli209' },
{ key: 'broccoli210', text: 'Broccoli210' },
{ key: 'broccoli211', text: 'Broccoli211' },
{ key: 'broccoli212', text: 'Broccoli212' },
{ key: 'broccoli213', text: 'Broccoli213' },
{ key: 'broccoli214', text: 'Broccoli214' },
{ key: 'broccoli215', text: 'Broccoli215' },
{ key: 'broccoli216', text: 'Broccoli216' },
{ key: 'broccoli217', text: 'Broccoli217' },
{ key: 'broccoli218', text: 'Broccoli218' },
{ key: 'broccoli219', text: 'Broccoli219' },
{ key: 'broccoli220', text: 'Broccoli220' },
{ key: 'broccoli221', text: 'Broccoli221' },
{ key: 'broccoli222', text: 'Broccoli222' },
{ key: 'broccoli223', text: 'Broccoli223' },
{ key: 'broccoli224', text: 'Broccoli224' },
{ key: 'broccoli225', text: 'Broccoli225' },
{ key: 'broccoli226', text: 'Broccoli226' },
{ key: 'broccoli227', text: 'Broccoli227' },
{ key: 'broccoli228', text: 'Broccoli228' },
{ key: 'broccoli229', text: 'Broccoli229' },
{ key: 'broccoli230', text: 'Broccoli230' },
{ key: 'broccoli231', text: 'Broccoli231' },
{ key: 'broccoli232', text: 'Broccoli232' },
{ key: 'broccoli233', text: 'Broccoli233' },
{ key: 'broccoli234', text: 'Broccoli234' },
{ key: 'broccoli235', text: 'Broccoli235' },
{ key: 'broccoli236', text: 'Broccoli236' },
{ key: 'broccoli237', text: 'Broccoli237' },
{ key: 'broccoli238', text: 'Broccoli238' },
{ key: 'broccoli239', text: 'Broccoli239' },
{ key: 'broccoli240', text: 'Broccoli240' },
{ key: 'broccoli241', text: 'Broccoli241' },
{ key: 'broccoli242', text: 'Broccoli242' },
{ key: 'broccoli243', text: 'Broccoli243' },
{ key: 'broccoli244', text: 'Broccoli244' },
{ key: 'broccoli245', text: 'Broccoli245' },
{ key: 'broccoli246', text: 'Broccoli246' },
{ key: 'broccoli247', text: 'Broccoli247' },
{ key: 'broccoli248', text: 'Broccoli248' },
{ key: 'broccoli249', text: 'Broccoli249' },
{ key: 'broccoli250', text: 'Broccoli250' },
{ key: 'broccoli251', text: 'Broccoli251' },
{ key: 'broccoli252', text: 'Broccoli252' },
{ key: 'broccoli253', text: 'Broccoli253' },
{ key: 'broccoli254', text: 'Broccoli254' },
{ key: 'broccoli255', text: 'Broccoli255' },
{ key: 'broccoli256', text: 'Broccoli256' },
];
var DropdownControlledMultiExample = function () {
var _a = React.useState([]), selectedKeys = _a[0], setSelectedKeys = _a[1];
var onChange = function (event, item) {
if (item) {
setSelectedKeys(item.selected ? __spreadArrays(selectedKeys, [item.key]) : selectedKeys.filter(function (key) { return key !== item.key; }));
}
};
return (React.createElement(Dropdown, { placeholder: "Select options", label: "Multi-select controlled example", selectedKeys: selectedKeys,
// eslint-disable-next-line react/jsx-no-bind
onChange: onChange, multiSelect: true, options: DropdownControlledMultiExampleOptions, styles: dropdownStyles }));
};
var DropdownControlledMultiExampleWrapper = function () { return React.createElement(Fabric, null,
React.createElement(DropdownControlledMultiExample, null)); };
ReactDOM.render(React.createElement(DropdownControlledMultiExampleWrapper, null), document.getElementById('content'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment