Skip to content

Commit 5d21f8b

Browse files
benderabendera
authored
Merge pull request #15 from vscode-elements/toolbar-button
Add ToolbarButton examples
2 parents 4fc5e3c + 5e5e407 commit 5d21f8b

File tree

9 files changed

+166
-0
lines changed

9 files changed

+166
-0
lines changed

‎.editorconfig‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# EditorConfig is awesome: https://EditorConfig.org
2+
3+
# top-most EditorConfig file
4+
root = true
5+
6+
[*]
7+
indent_style = space
8+
indent_size = 2
9+
end_of_line = crlf
10+
charset = utf-8
11+
trim_trailing_whitespace = false
12+
insert_final_newline = false

‎astro.config.mjs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,8 @@ export default defineConfig({
107107
{ label: "Tabs", link: "components/tabs" },
108108
{ label: "Textarea", link: "components/textarea" },
109109
{ label: "Textfield", link: "components/textfield" },
110+
{ label: "ToolbarButton", link: "components/toolbar-button" },
111+
{ label: "ToolbarContainer", link: "components/toolbar-container" },
110112
{ label: "Tree", link: "components/tree" },
111113
],
112114
collapsed: true,
@@ -152,6 +154,8 @@ export default defineConfig({
152154
{ label: "Tabs", link: "components/tabs/api" },
153155
{ label: "Textarea", link: "components/textarea/api" },
154156
{ label: "Textfield", link: "components/textfield/api" },
157+
{ label: "ToolbarButton", link: "components/toolbar-button/api" },
158+
{ label: "ToolbarContainer", link: "components/toolbar-container/api" },
155159
{ label: "Tree", link: "components/tree/api" },
156160
],
157161
collapsed: true,

‎src/components/examples/toolbar-button/Imports.astro‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<link rel="stylesheet" href="/codicon.css" id="vscode-codicon-stylesheet" />
2+
3+
<script>
4+
import "@vscode-elements/elements/dist/vscode-toolbar-button/vscode-toolbar-button.js";
5+
</script>

‎src/components/examples/toolbar-button/ToggleableExample.astro‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<vscode-toolbar-button
2+
icon="account"
3+
label="Account"
4+
toggleable
5+
id="toggle-example"></vscode-toolbar-button>
6+
7+
<script>
8+
import type { VscodeToolbarButton } from "@vscode-elements/elements";
9+
10+
const el = document.querySelector<VscodeToolbarButton>("#toggle-example");
11+
12+
el?.addEventListener("change", () => {
13+
console.log("Checked:", el.checked);
14+
});
15+
</script>

‎src/components/examples/toolbar-container/Imports.astro‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<link rel="stylesheet" href="/codicon.css" id="vscode-codicon-stylesheet" />
2+
3+
<script>
4+
import "@vscode-elements/elements/dist/vscode-toolbar-button/vscode-toolbar-button.js";
5+
import "@vscode-elements/elements/dist/vscode-toolbar-container/vscode-toolbar-container.js";
6+
</script>

‎src/components/experimental-component.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:::caution
2+
This component is in the experimental phase, and its API is subject to change at any time.
3+
Any changes will be announced in the [changelog](https://github.com/vscode-elements/elements/blob/main/CHANGELOG.md). Please review it carefully with each library upgrade.
4+
:::

‎src/content/docs/components/toolbar-button.mdx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: Toolbar Button
3+
---
4+
5+
import Demo from "@components/Demo.astro";
6+
import PageSwitcher from "@components/PageSwitcher.astro";
7+
import ExperimentalComponent from "@components/experimental-component.md";
8+
import IconsInfo from "@components/icons-info.md";
9+
10+
import Imports from "@components/examples/toolbar-button/Imports.astro";
11+
import ToggleableExample from "@components/examples/toolbar-button/ToggleableExample.astro";
12+
13+
<Imports />
14+
<PageSwitcher />
15+
<ExperimentalComponent />
16+
<IconsInfo />
17+
18+
## Basic example
19+
20+
In icon-only mode, a label for screen readers can be defined using the `label` attribute.
21+
22+
<Demo>
23+
<vscode-toolbar-button icon="account" label="Account"></vscode-toolbar-button>
24+
<Fragment slot="html">
25+
```html 'label="Account"'
26+
<vscode-toolbar-button
27+
icon="account"
28+
label="Account"
29+
></vscode-toolbar-button>
30+
```
31+
</Fragment>
32+
</Demo>
33+
34+
## With caption
35+
36+
<Demo>
37+
<vscode-toolbar-button icon="account">Account</vscode-toolbar-button>
38+
<Fragment slot="html">
39+
```html
40+
<vscode-toolbar-button icon="account">Account</vscode-toolbar-button>
41+
```
42+
</Fragment>
43+
</Demo>
44+
45+
## Text-only
46+
47+
<Demo>
48+
<vscode-toolbar-button>Account</vscode-toolbar-button>
49+
<Fragment slot="html">
50+
```html
51+
<vscode-toolbar-button>Account</vscode-toolbar-button>
52+
```
53+
</Fragment>
54+
</Demo>
55+
56+
## Toggleable
57+
58+
<Demo>
59+
<ToggleableExample />
60+
<Fragment slot="html">
61+
```html
62+
<vscode-toolbar-button
63+
icon="account"
64+
label="Account"
65+
toggleable
66+
id="toggle-example"
67+
></vscode-toolbar-button>
68+
```
69+
</Fragment>
70+
<Fragment slot="js">
71+
```javascript
72+
const el = document.querySelector("#toggle-example");
73+
74+
el.addEventListener("change", () => {
75+
console.log("Checked:", el.checked);
76+
});
77+
```
78+
</Fragment>
79+
</Demo>

‎src/content/docs/components/toolbar-container.mdx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: Toolbar Button
3+
---
4+
5+
import Demo from "@components/Demo.astro";
6+
import PageSwitcher from "@components/PageSwitcher.astro";
7+
import ExperimentalComponent from "@components/experimental-component.md";
8+
import IconsInfo from "@components/icons-info.md";
9+
10+
import Imports from "@components/examples/toolbar-container/Imports.astro";
11+
12+
<Imports />
13+
<PageSwitcher />
14+
<ExperimentalComponent />
15+
<IconsInfo />
16+
17+
## Basic example
18+
19+
Toolbar Container is a simple container to arrange the toolar buttons.
20+
21+
<Demo>
22+
<vscode-toolbar-container>
23+
<vscode-toolbar-button icon="files" label="Files"></vscode-toolbar-button>
24+
<vscode-toolbar-button icon="search" label="Search"></vscode-toolbar-button>
25+
<vscode-toolbar-button icon="source-control" label="Source Control"></vscode-toolbar-button>
26+
<vscode-toolbar-button icon="debug-alt" label="Debug"></vscode-toolbar-button>
27+
<vscode-toolbar-button icon="extensions" label="Extensions"></vscode-toolbar-button>
28+
</vscode-toolbar-container>
29+
<Fragment slot="html">
30+
```html
31+
<vscode-toolbar-container>
32+
<vscode-toolbar-button icon="files" label="Files"></vscode-toolbar-button>
33+
<vscode-toolbar-button icon="search" label="Search"></vscode-toolbar-button>
34+
<vscode-toolbar-button icon="source-control" label="Source Control"></vscode-toolbar-button>
35+
<vscode-toolbar-button icon="debug-alt" label="Debug"></vscode-toolbar-button>
36+
<vscode-toolbar-button icon="extensions" label="Extensions"></vscode-toolbar-button>
37+
</vscode-toolbar-container>
38+
```
39+
</Fragment>
40+
</Demo>

‎src/pages/components/[component]/api.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export function getStaticPaths() {
3535
{ params: { component: "tabs" } },
3636
{ params: { component: "textarea" } },
3737
{ params: { component: "textfield" } },
38+
{ params: { component: "toolbar-button" } },
3839
{ params: { component: "tree" } },
3940
];
4041
}

0 commit comments

Comments
 (0)