Skip to content

Commit 70c3a51

Browse files
benderabendera
committed
Add examples
1 parent eb64dca commit 70c3a51

File tree

7 files changed

+481
-90
lines changed

7 files changed

+481
-90
lines changed

‎public/icons/html.svg‎

Lines changed: 17 additions & 0 deletions
Loading

‎src/components/examples/button-group/DropdownMenuExample.astro‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<div class="button-with-menu">
2+
<vscode-button-group>
3+
<vscode-button>Send</vscode-button>
4+
<vscode-button
5+
icon="chevron-down"
6+
title="More actions..."
7+
id="toggle-menu-button"></vscode-button>
8+
</vscode-button-group>
9+
<vscode-context-menu id="dropdown-menu" class="dropdown-menu"
10+
></vscode-context-menu>
11+
</div>
12+
13+
<style>
14+
.button-with-menu {
15+
display: inline-block;
16+
position: relative;
17+
}
18+
19+
.dropdown-menu {
20+
left: 100%;
21+
margin-left: -26px;
22+
position: absolute;
23+
width: auto;
24+
z-index: 10;
25+
}
26+
</style>
27+
28+
<script>
29+
import type {
30+
VscodeButton,
31+
VscodeContextMenu,
32+
} from "@vscode-elements/elements";
33+
34+
const menu = document.querySelector<VscodeContextMenu>("#dropdown-menu")!;
35+
const button = document.querySelector<VscodeButton>("#toggle-menu-button")!;
36+
37+
menu.data = [
38+
{
39+
label: "Schedule for later",
40+
value: "schedule",
41+
},
42+
{
43+
label: "Delete",
44+
value: "delete",
45+
},
46+
{
47+
label: "Save draft",
48+
value: "save",
49+
},
50+
];
51+
52+
button.addEventListener("click", () => {
53+
menu.show = !menu.show;
54+
});
55+
56+
menu.addEventListener("vsc-select", (event) => {
57+
console.log(event);
58+
});
59+
</script>

‎src/components/examples/button-group/GroupExample.astro‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<div class="wysiwyg-toolbar">
2+
<vscode-button-group>
3+
<vscode-button secondary title="Align left" icon-only
4+
><svg
5+
width="16"
6+
height="16"
7+
viewBox="0 0 16 16"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<path
12+
d="M1 3.5C1 3.22386 1.22386 3 1.5 3H10.5C10.7761 3 11 3.22386 11 3.5C11 3.77614 10.7761 4 10.5 4H1.5C1.22386 4 1 3.77614 1 3.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H6.5C6.77614 11 7 11.2239 7 11.5C7 11.7761 6.77614 12 6.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
13+
fill="#212121"></path></svg
14+
></vscode-button
15+
>
16+
<vscode-button secondary title="Align center" icon-only
17+
><svg
18+
width="16"
19+
height="16"
20+
viewBox="0 0 16 16"
21+
fill="none"
22+
xmlns="http://www.w3.org/2000/svg"
23+
>
24+
<path
25+
d="M3 3.5C3 3.22386 3.22386 3 3.5 3H12.5C12.7761 3 13 3.22386 13 3.5C13 3.77614 12.7761 4 12.5 4H3.5C3.22386 4 3 3.77614 3 3.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM5 11.5C5 11.2239 5.22386 11 5.5 11H10.5C10.7761 11 11 11.2239 11 11.5C11 11.7761 10.7761 12 10.5 12H5.5C5.22386 12 5 11.7761 5 11.5Z"
26+
fill="#212121"></path></svg
27+
></vscode-button
28+
>
29+
<vscode-button secondary title="Align right" icon-only
30+
><svg
31+
width="16"
32+
height="16"
33+
viewBox="0 0 16 16"
34+
fill="none"
35+
xmlns="http://www.w3.org/2000/svg"
36+
>
37+
<path
38+
d="M5 3.5C5 3.22386 5.22386 3 5.5 3H14.5C14.7761 3 15 3.22386 15 3.5C15 3.77614 14.7761 4 14.5 4H5.5C5.22386 4 5 3.77614 5 3.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM9 11.5C9 11.2239 9.22386 11 9.5 11H14.5C14.7761 11 15 11.2239 15 11.5C15 11.7761 14.7761 12 14.5 12H9.5C9.22386 12 9 11.7761 9 11.5Z"
39+
fill="#212121"></path></svg
40+
></vscode-button
41+
>
42+
<vscode-button secondary title="Justified" icon-only
43+
><svg
44+
xmlns="http://www.w3.org/2000/svg"
45+
width="16"
46+
height="16"
47+
fill="none"
48+
>
49+
<path
50+
fill="#212121"
51+
d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 4a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 4a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Z"
52+
></path>
53+
</svg>
54+
</vscode-button>
55+
</vscode-button-group>
56+
<vscode-button-group>
57+
<vscode-button secondary icon-only title="Bold"
58+
><span class="icon-letter b">B</span></vscode-button
59+
>
60+
<vscode-button secondary icon-only title="Italic"
61+
><span class="icon-letter i">I</span></vscode-button
62+
>
63+
<vscode-button secondary icon-only title="Underline"
64+
><span class="icon-letter u">U</span></vscode-button
65+
>
66+
</vscode-button-group>
67+
</div>
68+
69+
<style>
70+
.wysiwyg-toolbar {
71+
display: flex;
72+
gap: 6px;
73+
}
74+
75+
.wysiwyg-toolbar path {
76+
fill: currentColor;
77+
}
78+
79+
.icon-letter {
80+
flex: 1;
81+
font-family: sans-serif;
82+
font-size: 15px;
83+
height: 16px;
84+
line-height: 15px;
85+
vertical-align: middle;
86+
text-align: center;
87+
width: 16px;
88+
}
89+
90+
.icon-letter.b {
91+
font-weight: bold;
92+
}
93+
94+
.icon-letter.i {
95+
font-style: italic;
96+
}
97+
98+
.icon-letter.u {
99+
text-decoration: underline;
100+
}
101+
</style>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script>
22
import "@vscode-elements/elements/dist/vscode-button/index.js";
33
import "@vscode-elements/elements/dist/vscode-button-group/index.js";
4+
import "@vscode-elements/elements/dist/vscode-context-menu/index.js";
5+
import "@vscode-elements/elements/dist/vscode-context-menu-item/index.js";
46
</script>
57

68
<link rel="stylesheet" href="/codicon.css" id="vscode-codicon-stylesheet" />

‎src/components/examples/button/CustomIcon.astro‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<vscode-button icon-only secondary
2+
><img
3+
src="/icons/html.svg"
4+
width="16"
5+
height="16"
6+
alt="HTML 5 icon"
7+
/></vscode-button
8+
>

0 commit comments

Comments
 (0)