microsoft
/
vscode-webview-ui-toolkit
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Configure Storybook GitHub Pages Deployment (#92) 

Set up the `npm run deploy:storybook` script to deploy the Storybook documentation site to GitHub Pages.

Additionally, update all the documentation links to point to the new deployment URL.
This commit is contained in:
Hawk Ticehurst 2021-05-24 18:01:50 -07:00 коммит произвёл GitHub
Родитель 37a13231e5
Коммит a2ba2af916
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
21 изменённых файлов: 786 добавлений и 104 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
README.md
Просмотреть файл

@ -26,7 +26,7 @@ Follow the [Getting Started Guide](./docs/getting-started.md).
Beyond the Getting Started Guide, further documentation can be found in the following places:
- [Component Docs](./docs/components.md)
- [Storybook – Interactive Component Sandbox](https://mttallac.azurewebsites.net/)
- [Storybook – Interactive Component Sandbox](https://microsoft.github.io/vscode-webview-toolkit/)
- [Toolkit Extension Samples](https://github.com/microsoft/vscode-webview-toolkit-samples)
- [VS Code Webview Guide](https://code.visualstudio.com/api/extension-guides/webview)
- [VS Code Webview Guidelines](https://code.visualstudio.com/api/references/extension-guidelines#webviews)

2
docs/getting-started.md
Просмотреть файл

@ -201,7 +201,7 @@ Congratulations on getting started with the VS Code Webview Toolkit! 🎊
Now that you're set up, checkout the component docs for further documentation on what components are available and how to use them. Further component documentation and some guides on how to work with webviews is also provided too. Happy hacking!
- [Component Docs](./components.md)
- [Storybook – Interactive Component Sandbox](https://mttallac.azurewebsites.net/)
- [Storybook – Interactive Component Sandbox](https://microsoft.github.io/vscode-webview-toolkit/)
- [Toolkit Extension Samples](https://github.com/microsoft/vscode-webview-toolkit-samples)
- [VS Code Webview Guide](https://code.visualstudio.com/api/extension-guides/webview)
- [VS Code Webview Guidelines](https://code.visualstudio.com/api/references/extension-guidelines#webviews)

684
package-lock.json сгенерированный
Просмотреть файл

@ -1,11 +1,11 @@
{
"name": "vscode-webview-toolkit",
"version": "0.4.0",
"version": "0.5.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"version": "0.4.0",
"version": "0.5.0",
"license": "MIT",
"dependencies": {
"@microsoft/fast-element": "^1.2.0",
@ -34,6 +34,7 @@
"babel-loader": "^8.2.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"eslint-config-prettier": "^8.1.0",
"gh-pages": "^3.1.0",
"jest": "^26.6.3",
"prettier": "^2.2.1",
"rollup": "^2.40.0",
@ -6227,6 +6228,16 @@
"node": ">=4"
}
},
"node_modules/async": {
"version": "2.6.3",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/async/-/async-2.6.3.tgz",
"integrity": "sha1-1yYl4jRKNlbjo61Pp0n6gymdgv8=",
"dev": true,
"license": "MIT",
"dependencies": {
"lodash": "^4.17.14"
}
},
"node_modules/async-each": {
"version": "1.0.3",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/async-each/-/async-each-1.0.3.tgz",
@ -9383,6 +9394,13 @@
"integrity": "sha1-d1s/J477uXGO7HNh9IP7Nvu/6og=",
"dev": true
},
"node_modules/email-addresses": {
"version": "3.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/email-addresses/-/email-addresses-3.1.0.tgz",
"integrity": "sha1-yr9+CFy9tjAIpwMZp05hNhiIEvs=",
"dev": true,
"license": "MIT"
},
"node_modules/emittery": {
"version": "0.7.2",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/emittery/-/emittery-0.7.2.tgz",
@ -10560,6 +10578,45 @@
"dev": true,
"optional": true
},
"node_modules/filename-reserved-regex": {
"version": "1.0.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz",
"integrity": "sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q=",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/filenamify": {
"version": "1.2.1",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/filenamify/-/filenamify-1.2.1.tgz",
"integrity": "sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=",
"dev": true,
"license": "MIT",
"dependencies": {
"filename-reserved-regex": "^1.0.0",
"strip-outer": "^1.0.0",
"trim-repeated": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/filenamify-url": {
"version": "1.0.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/filenamify-url/-/filenamify-url-1.0.0.tgz",
"integrity": "sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=",
"dev": true,
"license": "MIT",
"dependencies": {
"filenamify": "^1.0.0",
"humanize-url": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/filesize": {
"version": "6.1.0",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/filesize/-/filesize-6.1.0.tgz",
@ -11220,6 +11277,207 @@
"assert-plus": "^1.0.0"
}
},
"node_modules/gh-pages": {
"version": "3.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/gh-pages/-/gh-pages-3.1.0.tgz",
"integrity": "sha1-7D7Q9qbj/D2Ih1j6AY8IGRyWvVU=",
"dev": true,
"license": "MIT",
"dependencies": {
"async": "^2.6.1",
"commander": "^2.18.0",
"email-addresses": "^3.0.1",
"filenamify-url": "^1.0.0",
"find-cache-dir": "^3.3.1",
"fs-extra": "^8.1.0",
"globby": "^6.1.0"
},
"bin": {
"gh-pages": "bin/gh-pages.js",
"gh-pages-clean": "bin/gh-pages-clean.js"
},
"engines": {
"node": ">=10"
}
},
"node_modules/gh-pages/node_modules/array-union": {
"version": "1.0.2",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/array-union/-/array-union-1.0.2.tgz",
"integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
"dev": true,
"license": "MIT",
"dependencies": {
"array-uniq": "^1.0.1"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/gh-pages/node_modules/find-cache-dir": {
"version": "3.3.1",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
"integrity": "sha1-ibM/rUpGcNqpT4Vff74x1thP6IA=",
"dev": true,
"license": "MIT",
"dependencies": {
"commondir": "^1.0.1",
"make-dir": "^3.0.2",
"pkg-dir": "^4.1.0"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/avajs/find-cache-dir?sponsor=1"
}
},
"node_modules/gh-pages/node_modules/find-up": {
"version": "4.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/find-up/-/find-up-4.1.0.tgz",
"integrity": "sha1-l6/n1s3AvFkoWEt8jXsW6KmqXRk=",
"dev": true,
"license": "MIT",
"dependencies": {
"locate-path": "^5.0.0",
"path-exists": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/gh-pages/node_modules/fs-extra": {
"version": "8.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/fs-extra/-/fs-extra-8.1.0.tgz",
"integrity": "sha1-SdQ8RaiM2Wd2aMt74bRu/bjS4cA=",
"dev": true,
"license": "MIT",
"dependencies": {
"graceful-fs": "^4.2.0",
"jsonfile": "^4.0.0",
"universalify": "^0.1.0"
},
"engines": {
"node": ">=6 <7 || >=8"
}
},
"node_modules/gh-pages/node_modules/globby": {
"version": "6.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/globby/-/globby-6.1.0.tgz",
"integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
"dev": true,
"license": "MIT",
"dependencies": {
"array-union": "^1.0.1",
"glob": "^7.0.3",
"object-assign": "^4.0.1",
"pify": "^2.0.0",
"pinkie-promise": "^2.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/gh-pages/node_modules/locate-path": {
"version": "5.0.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/locate-path/-/locate-path-5.0.0.tgz",
"integrity": "sha1-Gvujlq/WdqbUJQTQpno6frn2KqA=",
"dev": true,
"license": "MIT",
"dependencies": {
"p-locate": "^4.1.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/gh-pages/node_modules/make-dir": {
"version": "3.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/make-dir/-/make-dir-3.1.0.tgz",
"integrity": "sha1-QV6WcEazp/HRhSd9hKpYIDcmoT8=",
"dev": true,
"license": "MIT",
"dependencies": {
"semver": "^6.0.0"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/gh-pages/node_modules/p-limit": {
"version": "2.3.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/p-limit/-/p-limit-2.3.0.tgz",
"integrity": "sha1-PdM8ZHohT9//2DWTPrCG2g3CHbE=",
"dev": true,
"license": "MIT",
"dependencies": {
"p-try": "^2.0.0"
},
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/gh-pages/node_modules/p-locate": {
"version": "4.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/p-locate/-/p-locate-4.1.0.tgz",
"integrity": "sha1-o0KLtwiLOmApL2aRkni3wpetTwc=",
"dev": true,
"license": "MIT",
"dependencies": {
"p-limit": "^2.2.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/gh-pages/node_modules/p-try": {
"version": "2.2.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/p-try/-/p-try-2.2.0.tgz",
"integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY=",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/gh-pages/node_modules/path-exists": {
"version": "4.0.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/path-exists/-/path-exists-4.0.0.tgz",
"integrity": "sha1-UTvb4tO5XXdi6METfvoZXGxhtbM=",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
}
},
"node_modules/gh-pages/node_modules/pkg-dir": {
"version": "4.2.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/pkg-dir/-/pkg-dir-4.2.0.tgz",
"integrity": "sha1-8JkTPfft5CLoHR2ESCcO6z5CYfM=",
"dev": true,
"license": "MIT",
"dependencies": {
"find-up": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/gh-pages/node_modules/semver": {
"version": "6.3.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/semver/-/semver-6.3.0.tgz",
"integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
"dev": true,
"license": "ISC",
"bin": {
"semver": "bin/semver.js"
}
},
"node_modules/github-slugger": {
"version": "1.3.0",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/github-slugger/-/github-slugger-1.3.0.tgz",
@ -12147,6 +12405,20 @@
"ms": "^2.0.0"
}
},
"node_modules/humanize-url": {
"version": "1.0.1",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/humanize-url/-/humanize-url-1.0.1.tgz",
"integrity": "sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=",
"dev": true,
"license": "MIT",
"dependencies": {
"normalize-url": "^1.0.0",
"strip-url-auth": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/iconv-lite": {
"version": "0.4.24",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -16205,6 +16477,22 @@
"node": ">=0.10.0"
}
},
"node_modules/normalize-url": {
"version": "1.9.1",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/normalize-url/-/normalize-url-1.9.1.tgz",
"integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=",
"dev": true,
"license": "MIT",
"dependencies": {
"object-assign": "^4.0.1",
"prepend-http": "^1.0.0",
"query-string": "^4.1.0",
"sort-keys": "^1.0.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/npm-bundled": {
"version": "1.1.2",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/npm-bundled/-/npm-bundled-1.1.2.tgz",
@ -17092,6 +17380,29 @@
"node": ">=0.10.0"
}
},
"node_modules/pinkie": {
"version": "2.0.4",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/pinkie/-/pinkie-2.0.4.tgz",
"integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/pinkie-promise": {
"version": "2.0.1",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
"integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
"dev": true,
"license": "MIT",
"dependencies": {
"pinkie": "^2.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/pirates": {
"version": "4.0.1",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/pirates/-/pirates-4.0.1.tgz",
@ -17402,6 +17713,16 @@
"node": ">= 0.8.0"
}
},
"node_modules/prepend-http": {
"version": "1.0.4",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/prepend-http/-/prepend-http-1.0.4.tgz",
"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/prettier": {
"version": "2.2.1",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/prettier/-/prettier-2.2.1.tgz",
@ -17696,6 +18017,20 @@
"node": ">=0.6"
}
},
"node_modules/query-string": {
"version": "4.3.4",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/query-string/-/query-string-4.3.4.tgz",
"integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
"dev": true,
"license": "MIT",
"dependencies": {
"object-assign": "^4.1.0",
"strict-uri-encode": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/querystring": {
"version": "0.2.0",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/querystring/-/querystring-0.2.0.tgz",
@ -19878,6 +20213,29 @@
"node": ">= 6"
}
},
"node_modules/sort-keys": {
"version": "1.1.2",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/sort-keys/-/sort-keys-1.1.2.tgz",
"integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
"dev": true,
"license": "MIT",
"dependencies": {
"is-plain-obj": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/sort-keys/node_modules/is-plain-obj": {
"version": "1.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
"integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/source-list-map": {
"version": "2.0.1",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/source-list-map/-/source-list-map-2.0.1.tgz",
@ -20134,6 +20492,16 @@
"integrity": "sha1-1wiCgVWasneEJCebCHfaPDktWj0=",
"dev": true
},
"node_modules/strict-uri-encode": {
"version": "1.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/string_decoder": {
"version": "1.1.1",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/string_decoder/-/string_decoder-1.1.1.tgz",
@ -20323,6 +20691,29 @@
"node": ">=8"
}
},
"node_modules/strip-outer": {
"version": "1.0.1",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/strip-outer/-/strip-outer-1.0.1.tgz",
"integrity": "sha1-sv0qv2YEudHmATBXGV34Nrip1jE=",
"dev": true,
"license": "MIT",
"dependencies": {
"escape-string-regexp": "^1.0.2"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/strip-url-auth": {
"version": "1.0.1",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/strip-url-auth/-/strip-url-auth-1.0.1.tgz",
"integrity": "sha1-IrD6OkE4WzO+PzMVUbu4N/oM164=",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/style-loader": {
"version": "1.3.0",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/style-loader/-/style-loader-1.3.0.tgz",
@ -20990,6 +21381,19 @@
"integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=",
"dev": true
},
"node_modules/trim-repeated": {
"version": "1.0.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/trim-repeated/-/trim-repeated-1.0.0.tgz",
"integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
"dev": true,
"license": "MIT",
"dependencies": {
"escape-string-regexp": "^1.0.2"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/trim-trailing-lines": {
"version": "1.1.4",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz",
@ -28303,6 +28707,15 @@
"integrity": "sha1-bIw/uCfdQ+45GPJ7gngqt2WKb9k=",
"dev": true
},
"async": {
"version": "2.6.3",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/async/-/async-2.6.3.tgz",
"integrity": "sha1-1yYl4jRKNlbjo61Pp0n6gymdgv8=",
"dev": true,
"requires": {
"lodash": "^4.17.14"
}
},
"async-each": {
"version": "1.0.3",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/async-each/-/async-each-1.0.3.tgz",
@ -31023,6 +31436,12 @@
}
}
},
"email-addresses": {
"version": "3.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/email-addresses/-/email-addresses-3.1.0.tgz",
"integrity": "sha1-yr9+CFy9tjAIpwMZp05hNhiIEvs=",
"dev": true
},
"emittery": {
"version": "0.7.2",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/emittery/-/emittery-0.7.2.tgz",
@ -32035,6 +32454,33 @@
"dev": true,
"optional": true
},
"filename-reserved-regex": {
"version": "1.0.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz",
"integrity": "sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q=",
"dev": true
},
"filenamify": {
"version": "1.2.1",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/filenamify/-/filenamify-1.2.1.tgz",
"integrity": "sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=",
"dev": true,
"requires": {
"filename-reserved-regex": "^1.0.0",
"strip-outer": "^1.0.0",
"trim-repeated": "^1.0.0"
}
},
"filenamify-url": {
"version": "1.0.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/filenamify-url/-/filenamify-url-1.0.0.tgz",
"integrity": "sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=",
"dev": true,
"requires": {
"filenamify": "^1.0.0",
"humanize-url": "^1.0.0"
}
},
"filesize": {
"version": "6.1.0",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/filesize/-/filesize-6.1.0.tgz",
@ -32573,6 +33019,140 @@
"assert-plus": "^1.0.0"
}
},
"gh-pages": {
"version": "3.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/gh-pages/-/gh-pages-3.1.0.tgz",
"integrity": "sha1-7D7Q9qbj/D2Ih1j6AY8IGRyWvVU=",
"dev": true,
"requires": {
"async": "^2.6.1",
"commander": "^2.18.0",
"email-addresses": "^3.0.1",
"filenamify-url": "^1.0.0",
"find-cache-dir": "^3.3.1",
"fs-extra": "^8.1.0",
"globby": "^6.1.0"
},
"dependencies": {
"array-union": {
"version": "1.0.2",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/array-union/-/array-union-1.0.2.tgz",
"integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
"dev": true,
"requires": {
"array-uniq": "^1.0.1"
}
},
"find-cache-dir": {
"version": "3.3.1",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
"integrity": "sha1-ibM/rUpGcNqpT4Vff74x1thP6IA=",
"dev": true,
"requires": {
"commondir": "^1.0.1",
"make-dir": "^3.0.2",
"pkg-dir": "^4.1.0"
}
},
"find-up": {
"version": "4.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/find-up/-/find-up-4.1.0.tgz",
"integrity": "sha1-l6/n1s3AvFkoWEt8jXsW6KmqXRk=",
"dev": true,
"requires": {
"locate-path": "^5.0.0",
"path-exists": "^4.0.0"
}
},
"fs-extra": {
"version": "8.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/fs-extra/-/fs-extra-8.1.0.tgz",
"integrity": "sha1-SdQ8RaiM2Wd2aMt74bRu/bjS4cA=",
"dev": true,
"requires": {
"graceful-fs": "^4.2.0",
"jsonfile": "^4.0.0",
"universalify": "^0.1.0"
}
},
"globby": {
"version": "6.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/globby/-/globby-6.1.0.tgz",
"integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
"dev": true,
"requires": {
"array-union": "^1.0.1",
"glob": "^7.0.3",
"object-assign": "^4.0.1",
"pify": "^2.0.0",
"pinkie-promise": "^2.0.0"
}
},
"locate-path": {
"version": "5.0.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/locate-path/-/locate-path-5.0.0.tgz",
"integrity": "sha1-Gvujlq/WdqbUJQTQpno6frn2KqA=",
"dev": true,
"requires": {
"p-locate": "^4.1.0"
}
},
"make-dir": {
"version": "3.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/make-dir/-/make-dir-3.1.0.tgz",
"integrity": "sha1-QV6WcEazp/HRhSd9hKpYIDcmoT8=",
"dev": true,
"requires": {
"semver": "^6.0.0"
}
},
"p-limit": {
"version": "2.3.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/p-limit/-/p-limit-2.3.0.tgz",
"integrity": "sha1-PdM8ZHohT9//2DWTPrCG2g3CHbE=",
"dev": true,
"requires": {
"p-try": "^2.0.0"
}
},
"p-locate": {
"version": "4.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/p-locate/-/p-locate-4.1.0.tgz",
"integrity": "sha1-o0KLtwiLOmApL2aRkni3wpetTwc=",
"dev": true,
"requires": {
"p-limit": "^2.2.0"
}
},
"p-try": {
"version": "2.2.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/p-try/-/p-try-2.2.0.tgz",
"integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY=",
"dev": true
},
"path-exists": {
"version": "4.0.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/path-exists/-/path-exists-4.0.0.tgz",
"integrity": "sha1-UTvb4tO5XXdi6METfvoZXGxhtbM=",
"dev": true
},
"pkg-dir": {
"version": "4.2.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/pkg-dir/-/pkg-dir-4.2.0.tgz",
"integrity": "sha1-8JkTPfft5CLoHR2ESCcO6z5CYfM=",
"dev": true,
"requires": {
"find-up": "^4.0.0"
}
},
"semver": {
"version": "6.3.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/semver/-/semver-6.3.0.tgz",
"integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
"dev": true
}
}
},
"github-slugger": {
"version": "1.3.0",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/github-slugger/-/github-slugger-1.3.0.tgz",
@ -33378,6 +33958,16 @@
"ms": "^2.0.0"
}
},
"humanize-url": {
"version": "1.0.1",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/humanize-url/-/humanize-url-1.0.1.tgz",
"integrity": "sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=",
"dev": true,
"requires": {
"normalize-url": "^1.0.0",
"strip-url-auth": "^1.0.0"
}
},
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -36669,6 +37259,18 @@
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
"dev": true
},
"normalize-url": {
"version": "1.9.1",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/normalize-url/-/normalize-url-1.9.1.tgz",
"integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=",
"dev": true,
"requires": {
"object-assign": "^4.0.1",
"prepend-http": "^1.0.0",
"query-string": "^4.1.0",
"sort-keys": "^1.0.0"
}
},
"npm-bundled": {
"version": "1.1.2",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/npm-bundled/-/npm-bundled-1.1.2.tgz",
@ -37392,6 +37994,21 @@
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
},
"pinkie": {
"version": "2.0.4",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/pinkie/-/pinkie-2.0.4.tgz",
"integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
"dev": true
},
"pinkie-promise": {
"version": "2.0.1",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
"integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
"dev": true,
"requires": {
"pinkie": "^2.0.0"
}
},
"pirates": {
"version": "4.0.1",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/pirates/-/pirates-4.0.1.tgz",
@ -37639,6 +38256,12 @@
"integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
"dev": true
},
"prepend-http": {
"version": "1.0.4",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/prepend-http/-/prepend-http-1.0.4.tgz",
"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
"dev": true
},
"prettier": {
"version": "2.2.1",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/prettier/-/prettier-2.2.1.tgz",
@ -37894,6 +38517,16 @@
"side-channel": "^1.0.4"
}
},
"query-string": {
"version": "4.3.4",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/query-string/-/query-string-4.3.4.tgz",
"integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
"dev": true,
"requires": {
"object-assign": "^4.1.0",
"strict-uri-encode": "^1.0.0"
}
},
"querystring": {
"version": "0.2.0",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/querystring/-/querystring-0.2.0.tgz",
@ -39725,6 +40358,23 @@
"socks": "^2.3.3"
}
},
"sort-keys": {
"version": "1.1.2",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/sort-keys/-/sort-keys-1.1.2.tgz",
"integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
"dev": true,
"requires": {
"is-plain-obj": "^1.0.0"
},
"dependencies": {
"is-plain-obj": {
"version": "1.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
"integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
"dev": true
}
}
},
"source-list-map": {
"version": "2.0.1",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/source-list-map/-/source-list-map-2.0.1.tgz",
@ -39958,6 +40608,12 @@
"integrity": "sha1-1wiCgVWasneEJCebCHfaPDktWj0=",
"dev": true
},
"strict-uri-encode": {
"version": "1.1.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true
},
"string_decoder": {
"version": "1.1.1",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/string_decoder/-/string_decoder-1.1.1.tgz",
@ -40114,6 +40770,21 @@
"integrity": "sha1-MfEoGzgyYwQ0gxwxDAHMzajL4AY=",
"dev": true
},
"strip-outer": {
"version": "1.0.1",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/strip-outer/-/strip-outer-1.0.1.tgz",
"integrity": "sha1-sv0qv2YEudHmATBXGV34Nrip1jE=",
"dev": true,
"requires": {
"escape-string-regexp": "^1.0.2"
}
},
"strip-url-auth": {
"version": "1.0.1",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/strip-url-auth/-/strip-url-auth-1.0.1.tgz",
"integrity": "sha1-IrD6OkE4WzO+PzMVUbu4N/oM164=",
"dev": true
},
"style-loader": {
"version": "1.3.0",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/style-loader/-/style-loader-1.3.0.tgz",
@ -40648,6 +41319,15 @@
"integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=",
"dev": true
},
"trim-repeated": {
"version": "1.0.0",
"resolved": "https://pkgs.dev.azure.com/devdiv/OnlineServices/_packaging/vscode-webview-toolkit/npm/registry/trim-repeated/-/trim-repeated-1.0.0.tgz",
"integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
"dev": true,
"requires": {
"escape-string-regexp": "^1.0.2"
}
},
"trim-trailing-lines": {
"version": "1.1.4",
"resolved": "https://mscomdev.pkgs.visualstudio.com/_packaging/vscode-webview-toolkit/npm/registry/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz",

4
package.json
Просмотреть файл

@ -1,6 +1,6 @@
{
"name": "vscode-webview-toolkit",
"version": "0.4.0",
"version": "0.5.0",
"description": "A component library for building webview-based extensions in Visual Studio Code.",
"homepage": "https://github.com/microsoft/vscode-webview-toolkit#readme",
"license": "MIT",
@ -20,6 +20,7 @@
"start": "start-storybook -p 6006",
"build": "rollup -c && tsc -p ./tsconfig.json && npm run doc",
"build:storybook": "build-storybook",
"deploy:storybook": "npm run build:storybook && gh-pages -d storybook-static",
"doc": "api-extractor run --local",
"fmt": "prettier --config ./.prettierrc --write \"**/*.{ts,js,md}\"",
"lint": "eslint . --ext .ts",
@ -55,6 +56,7 @@
"babel-loader": "^8.2.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"eslint-config-prettier": "^8.1.0",
"gh-pages": "^3.1.0",
"jest": "^26.6.3",
"prettier": "^2.2.1",
"rollup": "^2.40.0",

6
src/badge/README.md
Просмотреть файл

@ -14,7 +14,7 @@ The `vscode-badge` component is used to highlight an item, attract attention, an
### Basic Usage
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-badge--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-badge--default)
```html
<vscode-badge>Badge Text</vscode-badge>
@ -22,7 +22,7 @@ The `vscode-badge` component is used to highlight an item, attract attention, an
### Circular Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-badge--circular)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-badge--circular)
```html
<vscode-badge circular="true">1</vscode-badge>
@ -42,7 +42,7 @@ From there, the `fill` and `color` attributes are set using the `{name-of-your-c
- `fill="{fill-name-of-your-choice}"`
- `color="{color-name-of-your-choice}"`
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-badge--with-fill)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-badge--with-fill)
```css live
vscode-badge {

12
src/breadcrumb-item/README.md
Просмотреть файл

@ -12,7 +12,7 @@ The `vscode-breadcrumb-item` is a component meant to be used with `vscode-breadc
### Basic Usage
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-breadcrumb-item--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-breadcrumb-item--default)
```html
<vscode-breadcrumb-item>Breadcrumb Item Label</vscode-breadcrumb-item>
@ -20,7 +20,7 @@ The `vscode-breadcrumb-item` is a component meant to be used with `vscode-breadc
### Href Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-breadcrumb-item--with-link)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-breadcrumb-item--with-link)
```html
<vscode-breadcrumb-item href="#">Breadcrumb Item Label</vscode-breadcrumb-item>
@ -30,7 +30,7 @@ The `vscode-breadcrumb-item` is a component meant to be used with `vscode-breadc
The Breadcrumb Item usually contains text, but can also contain any valid HTML, such as a `<vscode-button>`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-breadcrumb-item--with-custom-element)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-breadcrumb-item--with-custom-element)
```html
<vscode-breadcrumb-item href="#">
@ -42,7 +42,7 @@ The Breadcrumb Item usually contains text, but can also contain any valid HTML,
The default separator is a `/` but it can customized by adding an element with the attribute `slot="separator"`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-breadcrumb-item--with-custom-separator)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-breadcrumb-item--with-custom-separator)
```html
<!-- Note: Using VS Code Codicon Library -->
@ -57,7 +57,7 @@ The default separator is a `/` but it can customized by adding an element with t
An icon can be added to the left of Breadcrumb Item text by adding an element with the attribute `slot="start"`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-breadcrumb-item--with-start-icon)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-breadcrumb-item--with-start-icon)
```html
<!-- Note: Using VS Code Codicon Library -->
@ -72,7 +72,7 @@ An icon can be added to the left of Breadcrumb Item text by adding an element wi
An icon can be added to the right of Breadcrumb Item text by adding an element with the attribute `slot="end"`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-breadcrumb-item--with-end-icon)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-breadcrumb-item--with-end-icon)
```html
<!-- Note: Using VS Code Codicon Library -->

10
src/breadcrumb/README.md
Просмотреть файл

@ -12,7 +12,7 @@ The `vscode-breadcrumb` component must be used with the `vscode-breadcrumb-item`
### Basic Usage
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-breadcrumb--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-breadcrumb--default)
```html
<vscode-breadcrumb>
@ -26,7 +26,7 @@ The `vscode-breadcrumb` component must be used with the `vscode-breadcrumb-item`
The Breadcrumb Item usually contains text, but can also contain any valid HTML, such as a `<vscode-button>`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-breadcrumb--with-custom-elements)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-breadcrumb--with-custom-elements)
```html
<vscode-breadcrumb>
@ -46,7 +46,7 @@ The Breadcrumb Item usually contains text, but can also contain any valid HTML,
The default separator is a `/` but it can customized by adding an element with the attribute `slot="separator"`, such as an span icon.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-breadcrumb--with-custom-separators)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-breadcrumb--with-custom-separators)
```html
<!-- Note: Using VS Code Codicon Library -->
@ -71,7 +71,7 @@ The default separator is a `/` but it can customized by adding an element with t
An icon can be added to the left of Breadcrumb Item text by adding an element with the attribute `slot="start"`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-breadcrumb--with-start-icons)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-breadcrumb--with-start-icons)
```html
<!-- Note: Using VS Code Codicon Library -->
@ -96,7 +96,7 @@ An icon can be added to the left of Breadcrumb Item text by adding an element wi
An icon can be added to the right of Breadcrumb Item text by adding an element with the attribute `slot="end"`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-breadcrumb--with-end-icons)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-breadcrumb--with-end-icons)
```html
<!-- Note: Using VS Code Codicon Library -->

14
src/button/README.md
Просмотреть файл

@ -23,7 +23,7 @@ The `vscode-button` is a web component implementation of an [HTML Button Element
### Basic Usage
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-button--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-button--default)
```html
<vscode-button>Button Text</vscode-button>
@ -33,7 +33,7 @@ The `vscode-button` is a web component implementation of an [HTML Button Element
There are a number of visual appearances that the `vscode-button` can have. The default appearance is `primary`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-button--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-button--default)
```html
<vscode-button appearance="primary">Button Text</vscode-button>
@ -45,7 +45,7 @@ There are a number of visual appearances that the `vscode-button` can have. The
### Autofocus Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-button--with-autofocus)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-button--with-autofocus)
```html
<vscode-button autofocus>Button Text</vscode-button>
@ -53,7 +53,7 @@ There are a number of visual appearances that the `vscode-button` can have. The
### Disabled Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-button--with-disabled)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-button--with-disabled)
```html
<vscode-button disabled>Button Text</vscode-button>
@ -63,7 +63,7 @@ There are a number of visual appearances that the `vscode-button` can have. The
An icon can be added to the left of Button text by adding an element with the attribute `slot="start"`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-button--with-start-icon)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-button--with-start-icon)
```html
<!-- Note: Using VS Code Codicon Library -->
@ -78,7 +78,7 @@ An icon can be added to the left of Button text by adding an element with the at
An icon can be added to the right of the Button text by adding an element with the attribute `slot="end"`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-button--with-end-icon)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-button--with-end-icon)
```html
<!-- Note: Using VS Code Codicon Library -->
@ -93,7 +93,7 @@ An icon can be added to the right of the Button text by adding an element with t
An icon can also fill the default slot of the Button component (instead of text) to create an Icon Button.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-button--with-icon-only)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-button--with-icon-only)
```html
<!-- Note: Using VS Code Codicon Library -->

14
src/checkbox/README.md
Просмотреть файл

@ -17,7 +17,7 @@ The `vscode-checkbox` is a web component implementation of an [HTML Input Checkb
### Basic Usage
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-checkbox--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-checkbox--default)
```html
<vscode-checkbox>Label</vscode-checkbox>
@ -25,7 +25,7 @@ The `vscode-checkbox` is a web component implementation of an [HTML Input Checkb
### Autofocus Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-checkbox--with-autofocus)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-checkbox--with-autofocus)
```html
<vscode-checkbox autofocus>Label</vscode-checkbox>
@ -33,7 +33,7 @@ The `vscode-checkbox` is a web component implementation of an [HTML Input Checkb
### Checked Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-checkbox--with-checked)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-checkbox--with-checked)
```html
<vscode-checkbox checked>Label</vscode-checkbox>
@ -41,7 +41,7 @@ The `vscode-checkbox` is a web component implementation of an [HTML Input Checkb
### Disabled Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-checkbox--with-disabled)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-checkbox--with-disabled)
```html
<vscode-checkbox disabled>Label</vscode-checkbox>
@ -49,7 +49,7 @@ The `vscode-checkbox` is a web component implementation of an [HTML Input Checkb
### Readonly Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-checkbox--with-read-only)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-checkbox--with-read-only)
```html
<vscode-checkbox readonly>Label</vscode-checkbox>
@ -57,7 +57,7 @@ The `vscode-checkbox` is a web component implementation of an [HTML Input Checkb
### Required Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-checkbox--with-required)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-checkbox--with-required)
```html
<vscode-checkbox required>Label</vscode-checkbox>
@ -65,7 +65,7 @@ The `vscode-checkbox` is a web component implementation of an [HTML Input Checkb
### Value Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-checkbox--with-value)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-checkbox--with-value)
```html
<vscode-checkbox value="foo">Label</vscode-checkbox>

10
src/data-grid/README.md
Просмотреть файл

@ -35,7 +35,7 @@ The recommended basic usage of the `vscode-data-grid` is to use JavaScript (or T
With that said, a data grid can still be created with HTML only (also shown below).
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-data-grid--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-data-grid--default)
_Using HTML & JavaScript_
@ -102,7 +102,7 @@ There are three values that can be passed to the attribute:
As shown above in the Basic Usage example, if the `vscode-data-grid` is defined using only HTML this attribute should be set to `none` otherwise an attempt at generating a default header row will occur and result in an undefined header row being added to the DOM.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-data-grid--with-no-header)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-data-grid--with-no-header)
```html
<vscode-data-grid id="basic-grid" generate-header="none"></vscode-data-grid>
@ -134,7 +134,7 @@ When defined on a `<vscode-data-grid>` component, the value of the attribute is
When defined on a `<vscode-data-grid-row>` component, the value of the attribute is applied to only that row.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-data-grid--with-custom-column-widths)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-data-grid--with-custom-column-widths)
```html
<vscode-data-grid id="basic-grid" grid-template-columns="100px 10vw 3fr 30%"></vscode-data-grid>
@ -238,7 +238,7 @@ document.getElementById('basic-grid').columnDefinitions = [
While a `vscode-data-grid-cell` usually contains text, it can also contain any valid HTML, such as a `<vscode-button>`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-breadcrumb-item--with-custom-element)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-breadcrumb-item--with-custom-element)
The custom cell element can be defined using only HTML by simply inserting the element(s) as a child of the `vscode-data-grid-cell`. The major pitfall of this approach is that this will have to be manually done for every cell in the data grid.
@ -329,7 +329,7 @@ function getFocusTarget(cell: DataGridCell): HTMLElement {
A header cell can also contain and render abitrary HTML.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-breadcrumb-item--with-custom-element)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-breadcrumb-item--with-custom-element)
Just like the custom cell element, a custom header cell can be defined using only HTML by simply inserting the element(s) as a child of the `vscode-data-grid-cell` that defines the `cell-type="columnheader"` attribute. Again, the major pitfall of this approach is that this will have to be manually done for every header cell in the data grid.

4
src/divider/README.md
Просмотреть файл

@ -12,7 +12,7 @@ The `vscode-divider` is a web component implementation of an [HTML Horiztonal Ru
### Basic Usage
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-divider--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-divider--default)
```html
<vscode-divider></vscode-divider>
@ -26,7 +26,7 @@ The `separator` option is the default value and indicates that the divider seman
The `presentation` option indicates that the divider has no semantic value and is for visual presentation only.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-divider--with-role)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-divider--with-role)
```html
<!-- Indicates that the divider semantically separates content -->

12
src/dropdown/README.md
Просмотреть файл

@ -16,7 +16,7 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
### Basic Usage
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-dropdown--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-dropdown--default)
```html
<vscode-dropdown>
@ -28,7 +28,7 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
### Disabled Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-dropdown--with-disabled)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-dropdown--with-disabled)
```html
<vscode-dropdown disabled>
@ -40,7 +40,7 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
### Open Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-dropdown--with-open)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-dropdown--with-open)
```html
<vscode-dropdown open>
@ -52,7 +52,7 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
### Position Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-dropdown--with-position-above)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-dropdown--with-position-above)
```html
<vscode-dropdown position="above">
@ -62,7 +62,7 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
</vscode-dropdown>
```
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-dropdown--with-position-below)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-dropdown--with-position-below)
```html
<vscode-dropdown position="below">
@ -76,7 +76,7 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
The default indicator is a downward facing chevron, but it can customized by adding an element with the attribute `slot="indicator"`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-dropdown--with-custom-indicator)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-dropdown--with-custom-indicator)
```html
<!-- Note: Using VS Code Codicon Library -->

10
src/link/README.md
Просмотреть файл

@ -20,7 +20,7 @@ The `vscode-link` is a web component implementation of an [HTML Anchor Element](
### Basic Usage (With Href Attribute)
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-link--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-link--default)
```html
<vscode-link href="#">Link Text</vscode-link>
@ -28,7 +28,7 @@ The `vscode-link` is a web component implementation of an [HTML Anchor Element](
### Disabled Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-link--with-disabled)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-link--with-disabled)
```html
<vscode-link href="#" disabled>Link Text</vscode-link>
@ -38,7 +38,7 @@ The `vscode-link` is a web component implementation of an [HTML Anchor Element](
An icon can be added to the left of Link text by adding an element with the attribute `slot="start"`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-link--with-start-icon)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-link--with-start-icon)
```html
<!-- Note: Using VS Code Codicon Library -->
@ -53,7 +53,7 @@ An icon can be added to the left of Link text by adding an element with the attr
An icon can be added to the right of the Link text by adding an element with the attribute `slot="end"`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-link--with-end-icon)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-link--with-end-icon)
```html
<!-- Note: Using VS Code Codicon Library -->
@ -68,7 +68,7 @@ An icon can be added to the right of the Link text by adding an element with the
An icon can also fill the default slot of the Button component (instead of text) to create an Icon Button.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-link--with-icon-only)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-link--with-icon-only)
```html
<!-- Note: Using VS Code Codicon Library -->

10
src/option/README.md
Просмотреть файл

@ -16,7 +16,7 @@ The `vscode-option` component will only provide internals related to form associ
### Basic Usage
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-option--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-option--default)
```html
<vscode-option>Option Label</vscode-option>
@ -24,7 +24,7 @@ The `vscode-option` component will only provide internals related to form associ
### Disabled Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-option--with-disabled)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-option--with-disabled)
```html
<vscode-option disabled>Option Label</vscode-option>
@ -32,7 +32,7 @@ The `vscode-option` component will only provide internals related to form associ
### Selected Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-option--with-selected)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-option--with-selected)
```html
<vscode-option selected>Option Label</vscode-option>
@ -48,7 +48,7 @@ The `vscode-option` component will only provide internals related to form associ
An icon can be added to the left of the Option text by adding an element with the attribute `slot="start"`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-option--with-start-icon)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-option--with-start-icon)
```html
<!-- Note: Using VS Code Codicon Library -->
@ -63,7 +63,7 @@ An icon can be added to the left of the Option text by adding an element with th
An icon can be added to the right of the Option text by adding an element with the attribute `slot="end"`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-option--with-end-icon)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-option--with-end-icon)
```html
<!-- Note: Using VS Code Codicon Library -->

12
src/panels/README.md
Просмотреть файл

@ -27,7 +27,7 @@ None
### Basic Usage
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-panels--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-panels--default)
```html
<vscode-panels>
@ -44,7 +44,7 @@ None
### Active ID Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-panels--with-active-tab)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-panels--with-active-tab)
```html
<vscode-panels activeid="tab-4">
@ -61,7 +61,7 @@ None
### Active Indicator Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-panels--with-no-active-indicator)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-panels--with-no-active-indicator)
```html
<vscode-panels activeindicator="false">
@ -78,7 +78,7 @@ None
### Disabled Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-panels--with-disabled)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-panels--with-disabled)
```html
<vscode-panels>
@ -97,7 +97,7 @@ None
Instead of text, an icon can be used as the tab title.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-panels--with-custom-tab-icons)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-panels--with-custom-tab-icons)
```html
<!-- Note: Using VS Code Codicon Library -->
@ -126,7 +126,7 @@ Instead of text, an icon can be used as the tab title.
A `vscode-tab-panel` can also contain any valid HTML.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-panels--with-complex-panel-view-content)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-panels--with-complex-panel-view-content)
```html
<vscode-panels>

10
src/progress-bar/README.md
Просмотреть файл

@ -21,7 +21,7 @@ The `vscode-progress-bar` renders a linear visual appearance for progress state.
The basic usage will display a looping animation to indicate an indeterminate state where the wait time is unspecified.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-progress-bar--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-progress-bar--default)
```html
<vscode-progress-bar></vscode-progress-bar>
@ -29,7 +29,7 @@ The basic usage will display a looping animation to indicate an indeterminate st
### Value Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-progress-bar--with-value)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-progress-bar--with-value)
```html
<vscode-progress-bar value="75"></vscode-progress-bar>
@ -37,7 +37,7 @@ The basic usage will display a looping animation to indicate an indeterminate st
### Min Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-progress-bar--with-value)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-progress-bar--with-value)
```html
<vscode-progress-bar min="0"></vscode-progress-bar>
@ -45,7 +45,7 @@ The basic usage will display a looping animation to indicate an indeterminate st
### Max Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-progress-bar--with-value)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-progress-bar--with-value)
```html
<vscode-progress-bar max="100"></vscode-progress-bar>
@ -53,7 +53,7 @@ The basic usage will display a looping animation to indicate an indeterminate st
### Paused Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-progress-bar--with-paused)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-progress-bar--with-paused)
```html
<vscode-progress-bar paused></vscode-progress-bar>

10
src/progress-ring/README.md
Просмотреть файл

@ -21,7 +21,7 @@ The `vscode-progress-ring` renders a circular visual appearance for progress sta
The basic usage will display a looping animation to indicate an indeterminate state where the wait time is unspecified.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-progress-ring--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-progress-ring--default)
```html
<vscode-progress-ring></vscode-progress-ring>
@ -29,7 +29,7 @@ The basic usage will display a looping animation to indicate an indeterminate st
### Value Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-progress-ring--with-value)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-progress-ring--with-value)
```html
<vscode-progress-ring value="75"></vscode-progress-ring>
@ -37,7 +37,7 @@ The basic usage will display a looping animation to indicate an indeterminate st
### Min Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-progress-ring--with-value)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-progress-ring--with-value)
```html
<vscode-progress-ring min="0"></vscode-progress-ring>
@ -45,7 +45,7 @@ The basic usage will display a looping animation to indicate an indeterminate st
### Max Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-progress-ring--with-value)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-progress-ring--with-value)
```html
<vscode-progress-ring max="100"></vscode-progress-ring>
@ -53,7 +53,7 @@ The basic usage will display a looping animation to indicate an indeterminate st
### Paused Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-progress-ring--with-paused)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-progress-ring--with-paused)
```html
<vscode-progress-ring paused></vscode-progress-ring>

8
src/radio-group/README.md
Просмотреть файл

@ -16,7 +16,7 @@ The `vscode-radio-group` is a web component implementation of a [Radio Group](ht
### Basic Usage
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-radio-group--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-radio-group--default)
```html
<vscode-radio-group>
@ -29,7 +29,7 @@ The `vscode-radio-group` is a web component implementation of a [Radio Group](ht
### Disabled Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-radio-group--with-disabled)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-radio-group--with-disabled)
```html
<vscode-radio-group disabled>
@ -55,7 +55,7 @@ The `vscode-radio-group` is a web component implementation of a [Radio Group](ht
If the orientation attribute is not set, the default orientation is `horizontal`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-radio-group--with-vertical-orientation)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-radio-group--with-vertical-orientation)
```html
<vscode-radio-group orientation="vertical">
@ -75,7 +75,7 @@ If the orientation attribute is not set, the default orientation is `horizontal`
### Read Only Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-radio-group--with-read-only)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-radio-group--with-read-only)
```html
<vscode-radio-group readonly>

8
src/radio/README.md
Просмотреть файл

@ -14,7 +14,7 @@ The `vscode-radio` is a web component implementation of an [HTML Radio Input Ele
### Basic Usage
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-radio--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-radio--default)
```html
<vscode-radio>Radio Label</vscode-radio>
@ -22,7 +22,7 @@ The `vscode-radio` is a web component implementation of an [HTML Radio Input Ele
### Checked Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-radio--with-checked)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-radio--with-checked)
```html
<vscode-radio checked>Radio Label</vscode-radio>
@ -30,7 +30,7 @@ The `vscode-radio` is a web component implementation of an [HTML Radio Input Ele
### Read Only Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-radio--with-read-only)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-radio--with-read-only)
```html
<vscode-radio readonly>Radio Label</vscode-radio>
@ -38,7 +38,7 @@ The `vscode-radio` is a web component implementation of an [HTML Radio Input Ele
### Disabled Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-radio--with-disabled)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-radio--with-disabled)
```html
<vscode-radio disabled>Radio Label</vscode-radio>

26
src/text-area/README.md
Просмотреть файл

@ -23,7 +23,7 @@ The `vscode-text-area` is a web component implementation of an [HTML Text Area E
### Basic Usage
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-area--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-area--default)
```html
<vscode-text-area></vscode-text-area>
@ -31,7 +31,7 @@ The `vscode-text-area` is a web component implementation of an [HTML Text Area E
### Autofocus Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-area--with-autofocus)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-area--with-autofocus)
```html
<vscode-text-area autofocus></vscode-text-area>
@ -39,7 +39,7 @@ The `vscode-text-area` is a web component implementation of an [HTML Text Area E
### Cols Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-area--with-custom-cols)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-area--with-custom-cols)
```html
<vscode-text-area cols="50"></vscode-text-area>
@ -47,7 +47,7 @@ The `vscode-text-area` is a web component implementation of an [HTML Text Area E
### Disabled Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-area--with-disabled)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-area--with-disabled)
```html
<vscode-text-area disabled></vscode-text-area>
@ -71,7 +71,7 @@ If this attribute is not specified, the `vscode-text-area` should be a child of
### Max Length Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-area--with-max-length)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-area--with-max-length)
```html
<vscode-text-area maxlength="10"></vscode-text-area>
@ -79,7 +79,7 @@ If this attribute is not specified, the `vscode-text-area` should be a child of
### Min Length Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-area--with-min-length)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-area--with-min-length)
```html
<vscode-text-area minlength="10"></vscode-text-area>
@ -93,7 +93,7 @@ If this attribute is not specified, the `vscode-text-area` should be a child of
### Placeholder Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-area--with-placeholder)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-area--with-placeholder)
```html
<vscode-text-area placeholder="Placeholder Text"></vscode-text-area>
@ -101,7 +101,7 @@ If this attribute is not specified, the `vscode-text-area` should be a child of
### Read Only Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-area--with-readonly)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-area--with-readonly)
```html
<vscode-text-area readonly>Read Only Text</vscode-text-area>
@ -109,25 +109,25 @@ If this attribute is not specified, the `vscode-text-area` should be a child of
### Resize Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-area--with-resize-none)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-area--with-resize-none)
```html
<vscode-text-area resize="none"></vscode-text-area>
```
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-area--with-resize-both)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-area--with-resize-both)
```html
<vscode-text-area resize="both"></vscode-text-area>
```
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-area--with-resize-vertical)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-area--with-resize-vertical)
```html
<vscode-text-area resize="vertical"></vscode-text-area>
```
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-area--with-resize-horizontal)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-area--with-resize-horizontal)
```html
<vscode-text-area resize="horizontal"></vscode-text-area>
@ -135,7 +135,7 @@ If this attribute is not specified, the `vscode-text-area` should be a child of
### Rows Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-area--with-custom-rows)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-area--with-custom-rows)
```html
<vscode-text-area rows="20"></vscode-text-area>

22
src/text-field/README.md
Просмотреть файл

@ -21,7 +21,7 @@ The `vscode-text-field` is a web component implementation of an [HTML Text Field
### Basic Usage
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-field--default)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-field--default)
```html
<vscode-text-field></vscode-text-field>
@ -29,7 +29,7 @@ The `vscode-text-field` is a web component implementation of an [HTML Text Field
### Autofocus Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-field--with-autofocus)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-field--with-autofocus)
```html
<vscode-text-field autofocus></vscode-text-field>
@ -37,7 +37,7 @@ The `vscode-text-field` is a web component implementation of an [HTML Text Field
### Disabled Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-field--with-disabled)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-field--with-disabled)
```html
<vscode-text-field disabled></vscode-text-field>
@ -45,7 +45,7 @@ The `vscode-text-field` is a web component implementation of an [HTML Text Field
### Max Length Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-field--with-max-length)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-field--with-max-length)
```html
<vscode-text-field maxlength="10"></vscode-text-field>
@ -53,7 +53,7 @@ The `vscode-text-field` is a web component implementation of an [HTML Text Field
### Min Length Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-field--with-min-length)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-field--with-min-length)
```html
<vscode-text-field minlength="10"></vscode-text-field>
@ -67,7 +67,7 @@ The `vscode-text-field` is a web component implementation of an [HTML Text Field
### Pattern Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-field--with-pattern)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-field--with-pattern)
```html
<vscode-text-field pattern="[a-z]{4,8}"></vscode-text-field>
@ -75,7 +75,7 @@ The `vscode-text-field` is a web component implementation of an [HTML Text Field
### Placeholder Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-field--with-placeholder)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-field--with-placeholder)
```html
<vscode-text-field placeholder="Placeholder Text"></vscode-text-field>
@ -83,7 +83,7 @@ The `vscode-text-field` is a web component implementation of an [HTML Text Field
### Read Only Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-field--with-readonly)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-field--with-readonly)
```html
<vscode-text-field readonly>Read Only Text</vscode-text-field>
@ -91,7 +91,7 @@ The `vscode-text-field` is a web component implementation of an [HTML Text Field
### Size Attribute
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-field--with-custom-size)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-field--with-custom-size)
```html
<vscode-text-field size="50"></vscode-text-field>
@ -113,7 +113,7 @@ Specifies whether the `vscode-text-field` is subject to spell checking by the un
An icon can be added to the left of the text field by adding an element with the attribute `slot="start"`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-field--with-start-icon)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-field--with-start-icon)
```html
<!-- Note: Using VS Code Codicon Library -->
@ -127,7 +127,7 @@ An icon can be added to the left of the text field by adding an element with the
An icon can be added to the right of the text field by adding an element with the attribute `slot="end"`.
[Interactive Storybook Example](https://mttallac.azurewebsites.net/?path=/story/library-text-field--with-end-icon)
[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-text-field--with-end-icon)
```html
<!-- Note: Using VS Code Codicon Library -->