如何更改 azure-devops-ui/Menu 中 <MenuButton> 的外观

Question

我正在为 Azure DevOps 开发一个扩展，我想使用

<MenuButton>

组件创建一个“更多选项”按钮，类似于当前面板中使用的按钮。我需要通过以下方式自定义按钮的外观：

• 将按钮变小
• 更改

  onEnter

  和

  onLeave

  事件的颜色
• 删除 V 形图标

结果将是： 预期结果

我想知道是否可以使用 Azure Devops UI 库或者我需要使用其他东西？

这是我如何使用

<MenuButton>

的基本示例：

import { IMenuItem, MenuButton } from "azure-devops-ui/Menu";


<div style={{ width: "25px", height: "25px", position: "absolute", top: "3px", right: "3px", justifyContent: "center" }}>
          <MenuButton
            subtle={true}
            iconProps={{ iconName: "More" }}
            className="full-size"
            contextualMenuProps={{
              menuProps: {
                items: menuItems,
                onActivate: handleMenuActivate,
                id: "cardSelectionMenu",
              },
            }}
          />
        </div>

但我会这样

糟糕的用户体验

我正在使用

dependencies": {
    "azure-devops-extension-api": "~1.157.0",
    "azure-devops-extension-sdk": "~2.0.11",
    "azure-devops-ui": "~2.164.0",
}

Answer 1

要将菜单项添加到看板上的卡片上，您需要使用扩展程序的

ms.vss-work-web.work-item-context-menu

文件中的目标 ID“

vss-extension.json

”。

如果您打开工作项，此项目也会显示在菜单列表中。

有关更多详细信息，您可以参考代码这里来开发自己的扩展。代码是开源的。

---