我需要在React fluent UI的下拉菜单中为禁用选项添加悬停提示。
我可以使用https://www.npmjs.com/package/@fluentui/react-tooltip向单个组件添加工具提示
<Tooltipcontent="Example tooltip">
<Button/>
</Tooltip>
但如何将类似的行为添加到下拉选项中,并且仅适用于disabled
选项,如:“Disabled cause of non avilability”示例下拉列表fluent用户界面代码
const options: IDropdownOption[] = [
{ key: 'fruitsHeader', text: 'Fruits', itemType: DropdownMenuItemType.Header },
{ key: 'apple', text: 'Apple' },
{ key: 'banana', text: 'Banana' },
{ key: 'orange', text: 'Orange', disabled: true },
];
export const DropdownBasicExample: React.FunctionComponent = () => {
return (
<Stack tokens={stackTokens}>
<Dropdown
placeholder="Select an option"
label="Basic uncontrolled example"
options={options}
styles={dropdownStyles}
/>
</Stack>
);
};
谢谢
1条答案
按热度按时间lbsnaicq1#
通过循环手动设置选项