我如何为我的ActivityBar ViewContainer添加一个数字气泡

发布于 2025-01-23 05:41:17 字数 309 浏览 2 评论 0原文

我正在使用ActivityBar ViewContainer添加特定于扩展程序的侧边栏图标。当您单击侧边栏中的图标时，它将打开一个显示列表的视图。该列表可以随时更新。我希望图标具有一个数字，该数字显示列表中有多少个项目，就像源控件扩展程序和文件explorer一样，当文件未保存时。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

回心转意 2025-01-30 05:41:17

看起来这将在v1.72中发布（现在是内部构建中的 - 演示来自内部人员的构建）。

viewContainers上的徽章的API非常简单：

export interface TreeView<T> extends Disposable {
  // other stuff
  /**
   * The badge to display for this TreeView.
   * To remove the badge, set to undefined.
  */
  badge?: ViewBadge | undefined;
  
  // other stuff
}

这就是viewBadge is：

/**
 * A badge presenting a value for a view
 */
export interface ViewBadge {

  /**
   * A label to present in tooltip for the badge.
   */
  readonly tooltip: string;

  /**
   * The value to present in the badge.
   */
  readonly value: number;
}

因此，此代码有效：

// in a class that has a TreeView named 'tabView'
public tabView: vscode.TreeView<treeNodes>;

this.tabView = vscode.window.createTreeView('editor-groups', 
    { treeDataProvider: this.myTreeProvider,        
        showCollapseAll: true, 
        canSelectMany: true, 
        dragAndDropController: this.myTreeDragController
    });

// value is a number, tooltip and value are NOT optional
this.tabView.badge = {tooltip:"my badge tooltip", value: vscode.window.tabGroups.all.length};

然后您可以更新this.tabview.badge.badge.badge.badge使用新的value在您想要的时候（似乎每次更新值时都必须保留工具提示）。

在这里，它正在处理我写的扩展名：

It looks like this will be released in v1.72 (it is in the Insiders Build now - the demo is from the Insiders Build).

The api for badges on ViewContainers is quite simple:

export interface TreeView<T> extends Disposable {
  // other stuff
  /**
   * The badge to display for this TreeView.
   * To remove the badge, set to undefined.
  */
  badge?: ViewBadge | undefined;
  
  // other stuff
}

and here is what a ViewBadge is:

/**
 * A badge presenting a value for a view
 */
export interface ViewBadge {

  /**
   * A label to present in tooltip for the badge.
   */
  readonly tooltip: string;

  /**
   * The value to present in the badge.
   */
  readonly value: number;
}

So this code works:

// in a class that has a TreeView named 'tabView'
public tabView: vscode.TreeView<treeNodes>;

this.tabView = vscode.window.createTreeView('editor-groups', 
    { treeDataProvider: this.myTreeProvider,        
        showCollapseAll: true, 
        canSelectMany: true, 
        dragAndDropController: this.myTreeDragController
    });

// value is a number, tooltip and value are NOT optional
this.tabView.badge = {tooltip:"my badge tooltip", value: vscode.window.tabGroups.all.length};

and then you can update this.tabView.badge with a new value whenever you want (it seems you have to keep including the tooltip each time you update the value though).

Here it is working on an extension I wrote: