Skip to content

Commit fa98d68

Browse files
benderabendera
committed
Add ToolbarButton examples
1 parent 4fc5e3c commit fa98d68

File tree

7 files changed

+124
-0
lines changed

7 files changed

+124
-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: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ 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" },
110111
{ label: "Tree", link: "components/tree" },
111112
],
112113
collapsed: true,
@@ -152,6 +153,7 @@ export default defineConfig({
152153
{ label: "Tabs", link: "components/tabs/api" },
153154
{ label: "Textarea", link: "components/textarea/api" },
154155
{ label: "Textfield", link: "components/textfield/api" },
156+
{ label: "ToolbarButton", link: "components/toolbar-button/api" },
155157
{ label: "Tree", link: "components/tree/api" },
156158
],
157159
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/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: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
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+
17+
## Basic example
18+
19+
<IconsInfo />
20+
21+
In icon-only mode, a label for screen readers can be defined using the `label` attribute.
22+
23+
<Demo>
24+
<vscode-toolbar-button icon="account" label="Account"></vscode-toolbar-button>
25+
<Fragment slot="html">
26+
```html 'label="Account"'
27+
<vscode-toolbar-button
28+
icon="account"
29+
label="Account"
30+
></vscode-toolbar-button>
31+
```
32+
</Fragment>
33+
</Demo>
34+
35+
## With caption
36+
37+
<Demo>
38+
<vscode-toolbar-button icon="account">Account</vscode-toolbar-button>
39+
<Fragment slot="html">
40+
```html
41+
<vscode-toolbar-button icon="account">Account</vscode-toolbar-button>
42+
```
43+
</Fragment>
44+
</Demo>
45+
46+
## Text-only
47+
48+
<Demo>
49+
<vscode-toolbar-button>Account</vscode-toolbar-button>
50+
<Fragment slot="html">
51+
```html
52+
<vscode-toolbar-button>Account</vscode-toolbar-button>
53+
```
54+
</Fragment>
55+
</Demo>
56+
57+
## Toggleable
58+
59+
<Demo>
60+
<ToggleableExample />
61+
<Fragment slot="html">
62+
```html
63+
<vscode-toolbar-button
64+
icon="account"
65+
label="Account"
66+
toggleable
67+
id="toggle-example"
68+
></vscode-toolbar-button>
69+
```
70+
</Fragment>
71+
<Fragment slot="js">
72+
```javascript
73+
const el = document.querySelector("#toggle-example");
74+
75+
el.addEventListener("change", () => {
76+
console.log("Checked:", el.checked);
77+
});
78+
```
79+
</Fragment>
80+
</Demo>
81+
82+
<vscode-toolbar-button><b>B</b></vscode-toolbar-button>
83+
<vscode-toolbar-button><em>I</em></vscode-toolbar-button>
84+
<vscode-toolbar-button><ins>U</ins></vscode-toolbar-button>
85+
<vscode-toolbar-button><del>S</del></vscode-toolbar-button>

‎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)