Skip to content

Commit 7651320

Browse files
benderabendera
committed
Use Playground
1 parent 38a8b4e commit 7651320

1 file changed

Lines changed: 164 additions & 91 deletions

File tree

‎dev/vscode-list.html‎

Lines changed: 164 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,209 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>&lt;vscode-list&gt; Demo</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/vscode-icon/index.js"></script>
17+
<script type="module" src="../dist/vscode-badge/index.js"></script>
18+
<script type="module" src="../dist/vscode-list/index.js"></script>
19+
<script type="module" src="../dist/vscode-list-item/index.js"></script>
20+
</head>
321

4-
<head>
5-
<meta charset="utf-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>&lt;vscode-list&gt; Demo</title>
8-
<link rel="stylesheet" href="../node_modules/@vscode/codicons/dist/codicon.css" id="vscode-codicon-stylesheet" />
9-
<script type="module" src="../dev-assets/component-preview.js"></script>
10-
<script type="module" src="../dist/vscode-icon/index.js"></script>
11-
<script type="module" src="../dist/vscode-badge/index.js"></script>
12-
<script type="module" src="../dist/vscode-list/index.js"></script>
13-
<script type="module" src="../dist/vscode-list-item/index.js"></script>
14-
<style>
15-
</style>
16-
</head>
17-
18-
<body class="vscode-light">
19-
<main>
20-
21-
<div class="story">
22-
<h2 class="story-title">Basic example</h2>
23-
<div class="story-content">
24-
<component-preview>
25-
<div style="background-color: var(--vscode-sideBar-background);">
26-
<input type="text">
27-
<vscode-list arrows indent="16" id="basic-example" multi-select>
28-
<vscode-list-item>
29-
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
30-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
31-
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
32-
lorem
33-
</vscode-list-item>
34-
<vscode-list-item open>
35-
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
36-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
37-
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
38-
ipsum
22+
<body>
23+
<main>
24+
<div class="story">
25+
<h2 class="story-title">Basic example</h2>
26+
<div class="story-content">
27+
<vscode-demo>
28+
<div style="background-color: var(--vscode-sideBar-background)">
29+
<input type="text" />
30+
<vscode-list arrows indent="16" id="basic-example" multi-select>
3931
<vscode-list-item>
4032
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
41-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
33+
<vscode-icon
34+
name="folder-opened"
35+
slot="icon-branch-opened"
36+
></vscode-icon>
4237
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
4338
lorem
4439
</vscode-list-item>
45-
<vscode-list-item>
40+
<vscode-list-item open>
4641
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
47-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
42+
<vscode-icon
43+
name="folder-opened"
44+
slot="icon-branch-opened"
45+
></vscode-icon>
4846
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
4947
ipsum
50-
</vscode-list-item>
51-
<vscode-list-item>
52-
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
53-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
54-
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
55-
dolor
5648
<vscode-list-item>
5749
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
58-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
50+
<vscode-icon
51+
name="folder-opened"
52+
slot="icon-branch-opened"
53+
></vscode-icon>
5954
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
6055
lorem
6156
</vscode-list-item>
6257
<vscode-list-item>
6358
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
64-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
59+
<vscode-icon
60+
name="folder-opened"
61+
slot="icon-branch-opened"
62+
></vscode-icon>
6563
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
6664
ipsum
65+
</vscode-list-item>
66+
<vscode-list-item>
67+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
68+
<vscode-icon
69+
name="folder-opened"
70+
slot="icon-branch-opened"
71+
></vscode-icon>
72+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
73+
dolor
6774
<vscode-list-item>
68-
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
69-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
75+
<vscode-icon
76+
name="folder"
77+
slot="icon-branch"
78+
></vscode-icon>
79+
<vscode-icon
80+
name="folder-opened"
81+
slot="icon-branch-opened"
82+
></vscode-icon>
7083
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
7184
lorem
7285
</vscode-list-item>
7386
<vscode-list-item>
74-
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
75-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
87+
<vscode-icon
88+
name="folder"
89+
slot="icon-branch"
90+
></vscode-icon>
91+
<vscode-icon
92+
name="folder-opened"
93+
slot="icon-branch-opened"
94+
></vscode-icon>
7695
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
77-
lorem
96+
ipsum
97+
<vscode-list-item>
98+
<vscode-icon
99+
name="folder"
100+
slot="icon-branch"
101+
></vscode-icon>
102+
<vscode-icon
103+
name="folder-opened"
104+
slot="icon-branch-opened"
105+
></vscode-icon>
106+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
107+
lorem
108+
</vscode-list-item>
109+
<vscode-list-item>
110+
<vscode-icon
111+
name="folder"
112+
slot="icon-branch"
113+
></vscode-icon>
114+
<vscode-icon
115+
name="folder-opened"
116+
slot="icon-branch-opened"
117+
></vscode-icon>
118+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
119+
lorem
120+
</vscode-list-item>
78121
</vscode-list-item>
79122
</vscode-list-item>
80-
</vscode-list-item>
81-
<vscode-list-item>
82-
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
83-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
84-
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
85-
dolor
86123
<vscode-list-item>
87124
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
88-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
125+
<vscode-icon
126+
name="folder-opened"
127+
slot="icon-branch-opened"
128+
></vscode-icon>
89129
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
90-
lorem
91-
</vscode-list-item>
92-
<vscode-list-item>
93-
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
94-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
95-
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
96-
ipsum
130+
dolor
97131
<vscode-list-item>
98-
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
99-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
132+
<vscode-icon
133+
name="folder"
134+
slot="icon-branch"
135+
></vscode-icon>
136+
<vscode-icon
137+
name="folder-opened"
138+
slot="icon-branch-opened"
139+
></vscode-icon>
100140
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
101141
lorem
102142
</vscode-list-item>
103143
<vscode-list-item>
104-
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
105-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
144+
<vscode-icon
145+
name="folder"
146+
slot="icon-branch"
147+
></vscode-icon>
148+
<vscode-icon
149+
name="folder-opened"
150+
slot="icon-branch-opened"
151+
></vscode-icon>
106152
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
107-
lorem
153+
ipsum
154+
<vscode-list-item>
155+
<vscode-icon
156+
name="folder"
157+
slot="icon-branch"
158+
></vscode-icon>
159+
<vscode-icon
160+
name="folder-opened"
161+
slot="icon-branch-opened"
162+
></vscode-icon>
163+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
164+
lorem
165+
</vscode-list-item>
166+
<vscode-list-item>
167+
<vscode-icon
168+
name="folder"
169+
slot="icon-branch"
170+
></vscode-icon>
171+
<vscode-icon
172+
name="folder-opened"
173+
slot="icon-branch-opened"
174+
></vscode-icon>
175+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
176+
lorem
177+
</vscode-list-item>
108178
</vscode-list-item>
109179
</vscode-list-item>
180+
<vscode-list-item>
181+
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
182+
<vscode-icon
183+
name="folder-opened"
184+
slot="icon-branch-opened"
185+
></vscode-icon>
186+
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
187+
lorem
188+
</vscode-list-item>
110189
</vscode-list-item>
111190
<vscode-list-item>
112191
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
113-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
192+
<vscode-icon
193+
name="folder-opened"
194+
slot="icon-branch-opened"
195+
></vscode-icon>
114196
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
115-
lorem
197+
dolor
116198
</vscode-list-item>
117-
</vscode-list-item>
118-
<vscode-list-item>
119-
<vscode-icon name="folder" slot="icon-branch"></vscode-icon>
120-
<vscode-icon name="folder-opened" slot="icon-branch-opened"></vscode-icon>
121-
<vscode-icon name="file" slot="icon-leaf"></vscode-icon>
122-
dolor
123-
</vscode-list-item>
124-
</vscode-list>
125-
<input type="text">
126-
</div>
127-
</component-preview>
199+
</vscode-list>
200+
<input type="text" />
201+
</div>
202+
</vscode-demo>
203+
</div>
128204
</div>
129-
</div>
130205

131-
<!-- <div class="story">
206+
<!-- <div class="story">
132207
<h2 class="story-title">Description example</h2>
133208
<div class="story-content">
134209
<component-preview>
@@ -144,7 +219,7 @@ <h2 class="story-title">Description example</h2>
144219
</div>
145220
</div> -->
146221

147-
<!-- <div class="story">
222+
<!-- <div class="story">
148223
<h2 class="story-title">Decorations, actions</h2>
149224
<div class="story-content">
150225
<component-preview>
@@ -167,8 +242,6 @@ <h2 class="story-title">Decorations, actions</h2>
167242
</component-preview>
168243
</div>
169244
</div> -->
170-
171-
</main>
172-
</body>
173-
245+
</main>
246+
</body>
174247
</html>

0 commit comments

Comments
 (0)