我们正在使用 Fluent UI React 上下文菜单,因为 Fluent UI Northstar 库不包含上下文菜单组件。但是,我们想使用 Fluent UI Northstar 库中的 MS Teams 图标,但我似乎找不到任何关于如何使用 JSX/Component 作为上下文菜单上的图标的文档。任何想法如何做到这一点?
Microsoft 的相关文档: Fluent UI 上下文菜单图标属性 Fluent UI Northstar Icons
我们正在使用 Fluent UI React 上下文菜单,因为 Fluent UI Northstar 库不包含上下文菜单组件。但是,我们想使用 Fluent UI Northstar 库中的 MS Teams 图标,但我似乎找不到任何关于如何使用 JSX/Component 作为上下文菜单上的图标的文档。任何想法如何做到这一点?
Microsoft 的相关文档: Fluent UI 上下文菜单图标属性 Fluent UI Northstar Icons
上下文菜单有一个属性contextualMenuItemAs
,您可以将 menuItemTemplate 函数传递给该属性。以下是如何制作该功能的示例:
const menuItemTemplate: React.FunctionComponent<IContextualMenuItemProps> = menuItemProps => {
const getIcon = (key: string): JSX.Element => {
switch (key) {
case 'phone':
return <CallIcon outline />;
case 'chat':
return <ChatIcon outline />;
default:
return <span></span>;
}
}
return (
<div>
<span className={contextMenuItemIconStyle}>{getIcon(menuItemProps.item.key)}</span>
<span className={contextMenuItemTextStyle}>{menuItemProps.item.text}</span>
</div>
)};
然后,您必须设置自己的样式来设置这些菜单项跨度的样式。