Skip to content

Commit a47c13b

Browse files
benderabendera
committed
Tree doc changes
1 parent f9ada1d commit a47c13b

2 files changed

Lines changed: 86 additions & 69 deletions

File tree

‎src/components/examples/tree/BasicExample.astro‎

Lines changed: 74 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,74 @@
1-
---
2-
import BooleanField from "@components/Controls/BooleanField.astro";
3-
import Controls from "@components/Controls/Controls.astro";
4-
import EnumField from "@components/Controls/EnumField.astro";
5-
import NumberField from "@components/Controls/NumberField.astro";
6-
---
7-
8-
<vscode-tree id="tree-basic-example">
9-
<vscode-tree-item>
10-
Fruits
11-
<vscode-tree-item>
12-
Citrus Fruits
13-
<vscode-tree-item>Orange</vscode-tree-item>
14-
<vscode-tree-item>Lemon</vscode-tree-item>
15-
<vscode-tree-item>Grapefruit</vscode-tree-item>
16-
</vscode-tree-item>
17-
<vscode-tree-item>
18-
Berries
19-
<vscode-tree-item>Strawberry</vscode-tree-item>
20-
<vscode-tree-item>Blueberry</vscode-tree-item>
21-
<vscode-tree-item>Raspberry</vscode-tree-item>
22-
</vscode-tree-item>
23-
<vscode-tree-item>
24-
Tropical Fruits
25-
<vscode-tree-item>Mango</vscode-tree-item>
26-
<vscode-tree-item>Pineapple</vscode-tree-item>
27-
<vscode-tree-item>Papaya</vscode-tree-item>
28-
</vscode-tree-item>
29-
</vscode-tree-item>
30-
<vscode-tree-item>
31-
Vegetables
32-
<vscode-tree-item>
33-
Leafy Greens
34-
<vscode-tree-item>Spinach</vscode-tree-item>
35-
<vscode-tree-item>Lettuce</vscode-tree-item>
36-
<vscode-tree-item>Kale</vscode-tree-item>
37-
</vscode-tree-item>
38-
<vscode-tree-item>
39-
Root Vegetables
40-
<vscode-tree-item>Carrot</vscode-tree-item>
41-
<vscode-tree-item>Beetroot</vscode-tree-item>
42-
<vscode-tree-item>Radish</vscode-tree-item>
43-
</vscode-tree-item>
44-
<vscode-tree-item>
45-
Nightshades
46-
<vscode-tree-item>Tomato</vscode-tree-item>
47-
<vscode-tree-item>Eggplant</vscode-tree-item>
48-
<vscode-tree-item>Bell Pepper</vscode-tree-item>
49-
</vscode-tree-item>
50-
</vscode-tree-item>
51-
</vscode-tree>
52-
53-
<Controls target="#tree-basic-example" slot="after-demo">
54-
<EnumField
55-
name="expandMode"
56-
options={["singleClick", "doubleClick"]}
57-
defaultValue="singleClick"
58-
/>
59-
<BooleanField name="hideArrows" defaultValue={false} />
60-
<NumberField name="indent" defaultValue={8} />
61-
<EnumField
62-
name="indentGuides"
63-
options={["onHover", "always", "none"]}
64-
defaultValue="onHover"
65-
/>
66-
<BooleanField name="multiSelect" defaultValue={false} />
67-
</Controls>
1+
---
2+
import BooleanField from "@components/Controls/BooleanField.astro";
3+
import Controls from "@components/Controls/Controls.astro";
4+
import EnumField from "@components/Controls/EnumField.astro";
5+
import NumberField from "@components/Controls/NumberField.astro";
6+
---
7+
8+
<vscode-tree id="tree-basic-example">
9+
<vscode-tree-item>
10+
Fruits
11+
<vscode-tree-item>
12+
Citrus Fruits
13+
<vscode-tree-item>Orange</vscode-tree-item>
14+
<vscode-tree-item>Lemon</vscode-tree-item>
15+
<vscode-tree-item>Grapefruit</vscode-tree-item>
16+
</vscode-tree-item>
17+
<vscode-tree-item>
18+
Berries
19+
<vscode-tree-item>Strawberry</vscode-tree-item>
20+
<vscode-tree-item>Blueberry</vscode-tree-item>
21+
<vscode-tree-item>Raspberry</vscode-tree-item>
22+
</vscode-tree-item>
23+
<vscode-tree-item>
24+
Tropical Fruits
25+
<vscode-tree-item>Mango</vscode-tree-item>
26+
<vscode-tree-item>Pineapple</vscode-tree-item>
27+
<vscode-tree-item>Papaya</vscode-tree-item>
28+
</vscode-tree-item>
29+
</vscode-tree-item>
30+
<vscode-tree-item>
31+
Vegetables
32+
<vscode-tree-item>
33+
Leafy Greens
34+
<vscode-tree-item>Spinach</vscode-tree-item>
35+
<vscode-tree-item>Lettuce</vscode-tree-item>
36+
<vscode-tree-item>Kale</vscode-tree-item>
37+
</vscode-tree-item>
38+
<vscode-tree-item>
39+
Root Vegetables
40+
<vscode-tree-item>Carrot</vscode-tree-item>
41+
<vscode-tree-item>Beetroot</vscode-tree-item>
42+
<vscode-tree-item>Radish</vscode-tree-item>
43+
</vscode-tree-item>
44+
<vscode-tree-item>
45+
Nightshades
46+
<vscode-tree-item>Tomato</vscode-tree-item>
47+
<vscode-tree-item>Eggplant</vscode-tree-item>
48+
<vscode-tree-item>Bell Pepper</vscode-tree-item>
49+
</vscode-tree-item>
50+
</vscode-tree-item>
51+
</vscode-tree>
52+
53+
<script>
54+
const tree = document.querySelector("#tree-basic-example")!;
55+
tree.addEventListener("vsc-tree-select", (event) => {
56+
console.log(event);
57+
});
58+
</script>
59+
60+
<Controls target="#tree-basic-example" slot="after-demo">
61+
<EnumField
62+
name="expandMode"
63+
options={["singleClick", "doubleClick"]}
64+
defaultValue="singleClick"
65+
/>
66+
<BooleanField name="hideArrows" defaultValue={false} />
67+
<NumberField name="indent" defaultValue={8} />
68+
<EnumField
69+
name="indentGuides"
70+
options={["onHover", "always", "none"]}
71+
defaultValue="onHover"
72+
/>
73+
<BooleanField name="multiSelect" defaultValue={false} />
74+
</Controls>

‎src/content/docs/components/tree.mdx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@ import RichContentExample from "@components/examples/tree/RichContentExample.ast
2222

2323
## Basic example
2424

25-
Tree component with the default settings.
25+
Tree component with the default settings. Check the console log for the triggered events.
2626

2727
<Demo>
2828
<BasicExample />
2929
<Fragment slot="html">
3030
```html
31-
<vscode-tree>
31+
<vscode-tree id="tree-basic-example">
3232
<vscode-tree-item>
3333
Fruits
3434
<vscode-tree-item>
@@ -74,6 +74,14 @@ Tree component with the default settings.
7474
</vscode-tree>
7575
```
7676
</Fragment>
77+
<Fragment slot="js">
78+
```javascript
79+
const tree = document.querySelector("#tree-basic-example");
80+
tree.addEventListener("vsc-tree-select", (event) => {
81+
console.log(event);
82+
});
83+
```
84+
</Fragment>
7785
</Demo>
7886

7987
## Icons
@@ -401,6 +409,7 @@ You can place any HTML content inside a `<vscode-tree-item>` component.
401409
transform: rotate(180deg);
402410
}
403411
```
412+
404413
</Fragment>
405414
<Fragment slot="js">
406415
```javascript
@@ -416,5 +425,6 @@ You can place any HTML content inside a `<vscode-tree-item>` component.
416425
});
417426
});
418427
```
428+
419429
</Fragment>
420430
</Demo>

0 commit comments

Comments
 (0)