mirror of
https://github.com/microsoft/vscode-extension-samples.git
synced 2026-04-27 16:55:44 +08:00
Added documentation and example of using custom view containers
This commit is contained in:
@ -37,3 +37,38 @@ vscode.window.registerTreeDataProvider('nodeDependencies', new DepNodeProvider()
|
||||
```
|
||||
|
||||
See [nodeDependencies.ts](src/nodeDependencies.ts) for the implementation.
|
||||
|
||||
# contributes.viewsContainers extension point
|
||||
|
||||
As of Visual Studio Code v1.23.0, you can move custom views into your own view container which will show up in the activity bar.
|
||||
|
||||
To do such, extension writers can add a `viewContainers` object in the contributes section. each object will require three things:
|
||||
|
||||
- `id`: The name of the new view you're creating
|
||||
- `title`: The name which will show up at the top of the view
|
||||
- `icon`: an image which will be displayed for the view container in the activity bar
|
||||
|
||||
Following, in the views object, you can then add a field with the same string as the `id` in the `viewContainers`.
|
||||
|
||||
```json
|
||||
"contributes": {
|
||||
"viewContainers": {
|
||||
"activitybar": [
|
||||
{
|
||||
"id": "tree-view",
|
||||
"title": "Tree View",
|
||||
"icon": "media/dep.svg"
|
||||
}
|
||||
]
|
||||
},
|
||||
"views": {
|
||||
"tree-view": [
|
||||
{
|
||||
"id": "nodeDependencies",
|
||||
"name": "Node Dependencies",
|
||||
"when": "workspaceHasPackageJSON"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -21,8 +21,17 @@
|
||||
"main": "./out/src/extension",
|
||||
"icon": "media/dep.png",
|
||||
"contributes": {
|
||||
"viewsContainers": {
|
||||
"activitybar": [
|
||||
{
|
||||
"id": "tree-view",
|
||||
"title": "Tree View",
|
||||
"icon": "media/dep.svg"
|
||||
}
|
||||
]
|
||||
},
|
||||
"views": {
|
||||
"explorer": [
|
||||
"tree-view": [
|
||||
{
|
||||
"id": "nodeDependencies",
|
||||
"name": "Node Dependencies"
|
||||
|
||||
Reference in New Issue
Block a user