Question

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

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

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

Answer 1

某些小部件是预先调整大小的，无法更改。其他可通过其配置对话框进行配置。 Widget Size

先决条件


您必须是团队项目的成员。如果你没有团队   项目，在VSTS中创建一个。

如果您尚未加入团队成员，请立即添加。

任何有权访问团队项目的人，包括利益相关者，都可以   查看仪表板。

要添加，编辑或管理团队信息中心，您必须是团队管理员，a   项目管理员，或具有仪表板权限。一般来说，你需要   成为当前所选团队的团队管理员，以编辑仪表板。   请求您当前的团队或项目管理员将您添加为团队   管理员。

如果预览功能尚未启用，则需要先打开预览功能 Enable Preview Features

Answer 2

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

在vss-extension.json contributions对象下，您可以将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（带配置）引用example widget extension。您可以在supportedSizes下定义更多尺寸（如上例所示）。

注意：您还需要在目标下指定配置。作为上述示例的".HelloWorldWidget.Configuration"。

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

2 个答案: