|
1 | | ---- |
2 | | -
|
3 | | ---- |
4 | | - |
5 | | -<vscode-collapsible |
6 | | - title="Timeline" |
7 | | - description="vscode-collapsible.ts" |
8 | | - class="collapsible complex-example" |
9 | | - open |
10 | | -> |
11 | | - <vscode-icon name="pin" action-icon slot="actions" id="pin-icon" |
12 | | - ></vscode-icon> |
13 | | - <vscode-icon name="refresh" action-icon slot="actions" id="refresh-icon" |
14 | | - ></vscode-icon> |
15 | | - <vscode-icon name="filter" action-icon slot="actions" id="filter-icon" |
16 | | - ></vscode-icon> |
17 | | - <vscode-scrollable> |
18 | | - <vscode-tree id="tree-example"></vscode-tree> |
19 | | - </vscode-scrollable> |
20 | | -</vscode-collapsible> |
21 | | - |
22 | | -<style> |
23 | | - .collapsible.complex-example vscode-scrollable { |
24 | | - height: 200px; |
25 | | - } |
26 | | -</style> |
27 | | - |
28 | | -<script> |
29 | | - import type { VscodeTree } from "@vscode-elements/elements/dist/vscode-tree"; |
30 | | - |
31 | | - const icons = { |
32 | | - leaf: "circle-outline", |
33 | | - }; |
34 | | - const tree = document.getElementById("tree-example") as VscodeTree; |
35 | | - document.getElementById("pin-icon")!.addEventListener("click", (ev) => { |
36 | | - ev.stopPropagation(); |
37 | | - }); |
38 | | - document.getElementById("refresh-icon")!.addEventListener("click", (ev) => { |
39 | | - ev.stopPropagation(); |
40 | | - }); |
41 | | - document.getElementById("filter-icon")!.addEventListener("click", (ev) => { |
42 | | - ev.stopPropagation(); |
43 | | - }); |
44 | | - |
45 | | - tree.data = [ |
46 | | - { icons, label: "File Saved" }, |
47 | | - { icons, label: "File Saved" }, |
48 | | - { icons, label: "File Saved" }, |
49 | | - { icons, label: "File Saved" }, |
50 | | - { icons, label: "File Saved" }, |
51 | | - { icons, label: "File Saved" }, |
52 | | - { icons, label: "File Saved" }, |
53 | | - { icons, label: "File Saved" }, |
54 | | - { icons, label: "File Saved" }, |
55 | | - { icons, label: "File Saved" }, |
56 | | - { icons, label: "File Saved" }, |
57 | | - { icons, label: "File Saved" }, |
58 | | - { icons, label: "File Saved" }, |
59 | | - { icons, label: "File Saved" }, |
60 | | - { icons, label: "File Saved" }, |
61 | | - { icons, label: "File Saved" }, |
62 | | - ]; |
63 | | -</script> |
| 1 | +--- |
| 2 | +
|
| 3 | +--- |
| 4 | + |
| 5 | +<vscode-collapsible |
| 6 | + title="Timeline" |
| 7 | + description="vscode-collapsible.ts" |
| 8 | + class="collapsible complex-example" |
| 9 | + open |
| 10 | +> |
| 11 | + <vscode-icon name="pin" action-icon slot="actions" id="pin-icon" |
| 12 | + ></vscode-icon> |
| 13 | + <vscode-icon name="refresh" action-icon slot="actions" id="refresh-icon" |
| 14 | + ></vscode-icon> |
| 15 | + <vscode-icon name="filter" action-icon slot="actions" id="filter-icon" |
| 16 | + ></vscode-icon> |
| 17 | + <vscode-scrollable> |
| 18 | + <vscode-tree id="tree-example"></vscode-tree> |
| 19 | + </vscode-scrollable> |
| 20 | +</vscode-collapsible> |
| 21 | + |
| 22 | +<style> |
| 23 | + .collapsible.complex-example vscode-scrollable { |
| 24 | + height: 200px; |
| 25 | + } |
| 26 | +</style> |
| 27 | + |
| 28 | +<script> |
| 29 | + import type { VscodeTree } from "@vscode-elements/elements/dist/vscode-tree"; |
| 30 | + |
| 31 | + const icons = { |
| 32 | + leaf: "circle-outline", |
| 33 | + }; |
| 34 | + const tree = document.getElementById("tree-example") as VscodeTree; |
| 35 | + document.getElementById("pin-icon")!.addEventListener("click", (ev) => { |
| 36 | + ev.stopPropagation(); |
| 37 | + }); |
| 38 | + document.getElementById("refresh-icon")!.addEventListener("click", (ev) => { |
| 39 | + ev.stopPropagation(); |
| 40 | + }); |
| 41 | + document.getElementById("filter-icon")!.addEventListener("click", (ev) => { |
| 42 | + ev.stopPropagation(); |
| 43 | + }); |
| 44 | + |
| 45 | + // tree.data = [ |
| 46 | + // { icons, label: "File Saved" }, |
| 47 | + // { icons, label: "File Saved" }, |
| 48 | + // { icons, label: "File Saved" }, |
| 49 | + // { icons, label: "File Saved" }, |
| 50 | + // { icons, label: "File Saved" }, |
| 51 | + // { icons, label: "File Saved" }, |
| 52 | + // { icons, label: "File Saved" }, |
| 53 | + // { icons, label: "File Saved" }, |
| 54 | + // { icons, label: "File Saved" }, |
| 55 | + // { icons, label: "File Saved" }, |
| 56 | + // { icons, label: "File Saved" }, |
| 57 | + // { icons, label: "File Saved" }, |
| 58 | + // { icons, label: "File Saved" }, |
| 59 | + // { icons, label: "File Saved" }, |
| 60 | + // { icons, label: "File Saved" }, |
| 61 | + // { icons, label: "File Saved" }, |
| 62 | + // ]; |
| 63 | +</script> |
0 commit comments