@vscode-elements/webview-playground
v1.3.0
Published
Handy web components for emulating the VSCode Webview environment.
Downloads
486
Readme
VSCode Webview Playground
Handy web components for emulating the VSCode Webview environment.
Installation
Install as npm package:
npm install -D @vscode-elements/webview-playgroundAlternatively, you can just copy the files from the /dist directory into your project.
They are pure JavaScript files, so no bundler is required. It’s up to you how to exclude them from the production build.
Available components
<vscode-dev-toolbar>
Insert theme variables and default styles into the page. It appears as a button in the lower right corner. When clicked, a simple toolbar is displayed.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webview Playground</title>
<script type="module" src="node_modules/@vscode-elements/webview-playground/dist/index.js"></script>
</head>
<body>
<vscode-dev-toolbar></vscode-dev-toolbar>
</body>
</html>The button can be hidden by the hidden attribute or hidden property:
document.querySelector('vscode-dev-toolbar').hidden = true;<vscode-demo>
An isolated block intended for use in a documentation site, e.g., Storybook. It inserts the theme variables but doesn't modify the host page's styles.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webview Playground</title>
<script type="module" src="node_modules/@vscode-elements/webview-playground/dist/index.js"></script>
</head>
<body>
<vscode-demo>
<span class="badge activity-bar-counter">42</span>
</vscode-demo>
</body>
</html>Internal components
Further "private" components:
- <vscode-theme-selector>
- <vscode-toggle-motion>
- <vscode-toggle-underline>
- <vscode-view-container-selector>