Skip to content

Commit 253516f

Browse files
benderabendera
committed
Update dev page
1 parent 46411fe commit 253516f

2 files changed

Lines changed: 183 additions & 174 deletions

File tree

‎dev/vscode-list.html‎

Lines changed: 0 additions & 174 deletions
This file was deleted.

‎dev/vscode-list/basic-example.html‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>VSCode Elements</title>
7+
<link
8+
rel="stylesheet"
9+
href="/node_modules/@vscode/codicons/dist/codicon.css"
10+
id="vscode-codicon-stylesheet"
11+
/>
12+
<script
13+
type="module"
14+
src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
15+
></script>
16+
<script type="module" src="/dist/main.js"></script>
17+
<script>
18+
const logEvents = (selector, eventType) => {
19+
document.querySelector(selector).addEventListener(eventType, (ev) => {
20+
console.log(ev);
21+
});
22+
};
23+
</script>
24+
</head>
25+
26+
<body>
27+
<h1>Basic example</h1>
28+
<main>
29+
<vscode-demo>
30+
<div style="background-color: var(--vscode-sideBar-background)">
31+
<input type="text" />
32+
<vscode-list arrows indent="16" id="basic-example" multi-select>
33+
<vscode-list-item>
34+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
35+
<vscode-icon
36+
name="folder-opened"
37+
slot="icon-branch-opened"
38+
></vscode-icon>
39+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
40+
lorem
41+
</vscode-list-item>
42+
<vscode-list-item open>
43+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
44+
<vscode-icon
45+
name="folder-opened"
46+
slot="icon-branch-opened"
47+
></vscode-icon>
48+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
49+
ipsum
50+
<vscode-list-item>
51+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
52+
<vscode-icon
53+
name="folder-opened"
54+
slot="icon-branch-opened"
55+
></vscode-icon>
56+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
57+
lorem
58+
</vscode-list-item>
59+
<vscode-list-item>
60+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
61+
<vscode-icon
62+
name="folder-opened"
63+
slot="icon-branch-opened"
64+
></vscode-icon>
65+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
66+
ipsum
67+
</vscode-list-item>
68+
<vscode-list-item>
69+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
70+
<vscode-icon
71+
name="folder-opened"
72+
slot="icon-branch-opened"
73+
></vscode-icon>
74+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
75+
dolor
76+
<vscode-list-item>
77+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
78+
<vscode-icon
79+
name="folder-opened"
80+
slot="icon-branch-opened"
81+
></vscode-icon>
82+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
83+
lorem
84+
</vscode-list-item>
85+
<vscode-list-item>
86+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
87+
<vscode-icon
88+
name="folder-opened"
89+
slot="icon-branch-opened"
90+
></vscode-icon>
91+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
92+
ipsum
93+
<vscode-list-item>
94+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
95+
<vscode-icon
96+
name="folder-opened"
97+
slot="icon-branch-opened"
98+
></vscode-icon>
99+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
100+
lorem
101+
</vscode-list-item>
102+
<vscode-list-item>
103+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
104+
<vscode-icon
105+
name="folder-opened"
106+
slot="icon-branch-opened"
107+
></vscode-icon>
108+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
109+
lorem
110+
</vscode-list-item>
111+
</vscode-list-item>
112+
</vscode-list-item>
113+
<vscode-list-item>
114+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
115+
<vscode-icon
116+
name="folder-opened"
117+
slot="icon-branch-opened"
118+
></vscode-icon>
119+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
120+
dolor
121+
<vscode-list-item>
122+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
123+
<vscode-icon
124+
name="folder-opened"
125+
slot="icon-branch-opened"
126+
></vscode-icon>
127+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
128+
lorem
129+
</vscode-list-item>
130+
<vscode-list-item>
131+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
132+
<vscode-icon
133+
name="folder-opened"
134+
slot="icon-branch-opened"
135+
></vscode-icon>
136+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
137+
ipsum
138+
<vscode-list-item>
139+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
140+
<vscode-icon
141+
name="folder-opened"
142+
slot="icon-branch-opened"
143+
></vscode-icon>
144+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
145+
lorem
146+
</vscode-list-item>
147+
<vscode-list-item>
148+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
149+
<vscode-icon
150+
name="folder-opened"
151+
slot="icon-branch-opened"
152+
></vscode-icon>
153+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
154+
lorem
155+
</vscode-list-item>
156+
</vscode-list-item>
157+
</vscode-list-item>
158+
<vscode-list-item>
159+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
160+
<vscode-icon
161+
name="folder-opened"
162+
slot="icon-branch-opened"
163+
></vscode-icon>
164+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
165+
lorem
166+
</vscode-list-item>
167+
</vscode-list-item>
168+
<vscode-list-item>
169+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
170+
<vscode-icon
171+
name="folder-opened"
172+
slot="icon-branch-opened"
173+
></vscode-icon>
174+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
175+
dolor
176+
</vscode-list-item>
177+
</vscode-list>
178+
<input type="text" />
179+
</div>
180+
</vscode-demo>
181+
</main>
182+
</body>
183+
</html>

0 commit comments

Comments
 (0)