azure-devops - 如何调整 VSTS 仪表板小部件的大小

Question

我正在构建一个 VSTS 团队仪表板小部件，我想显示一些自定义 html 内容；然而，默认的小部件尺寸非常小，部分 html 被截断。请参阅以下屏幕截图：

如何调整小部件的大小以使小部件的面积更大？

注意：我尝试在小部件的 div 中添加一些 CSS，但这只改变了小部件容器“内部”的宽度，因此它并没有使小部件轮廓变大。

Answer 1

小部件大小可以在清单文件中定义，例如 vss-extension.json。

在 vss-extension.jsoncontributions对象下，您可以将 定义supportedSizes为贡献的属性。例如下面是一段定义了多种尺寸的 vss-extension.json 文件：

{
        "id": "HelloWorldWidget3",
        "type": "ms.vss-dashboards-web.widget",
        "targets": [
            "ms.vss-dashboards-web.widget-catalog",
            ".HelloWorldWidget.Configuration"
        ],
        "properties": {
            "name": "Hello World Widget 3 (with config)",
            "description": "My third widget which supports configuration.",
            "catalogIconUrl": "img/helloWorld.png",
            "previewImageUrl": "img/helloWorld_330x160.png",
            "uri": "hello-world3.html",
          "supportedSizes": [
            {
              "rowSpan": 1,
              "columnSpan": 2
            },
            {
              "rowSpan": 2,
              "columnSpan": 2
            },
            {
              "rowSpan": 3,
              "columnSpan": 2
            },
            {
              "rowSpan": 4,
              "columnSpan": 2
            }
          ],
            "supportedScopes": [
                "project_team"
            ]
        }
}

更多详细信息，您可以参考带有 Hello World Widget 3（带配置）的示例小部件扩展。supportedSizes您可以在（如上例）下定义更多尺寸。

注意：您还需要指定目标下的配置。如上".HelloWorldWidget.Configuration"例。

Answer 2

某些小部件已预先确定大小，无法更改。其他的可以通过他们的配置对话框进行配置。小部件大小

先决条件

• 您必须是团队项目的成员。如果您还没有团队项目，请在 VSTS 中创建一个。
• 如果您尚未添加为团队成员，请立即添加。
• 任何有权访问团队项目的人（包括利益相关者）都可以查看仪表板。
• 要添加、编辑或管理团队仪表板，您必须是团队管理员、项目管理员或拥有仪表板权限。通常，您需要成为当前所选团队的团队管理员才能编辑仪表板。请求您当前的团队或项目管理员将您添加为团队管理员。

如果尚未 启用预览功能，则需要先启用它们 启用预览功能