Skip to content

Commit e1c76bd

Browse files
benderabendera
committed
Update SplitLayout examples
1 parent a916690 commit e1c76bd

File tree

6 files changed

+160
-127
lines changed

6 files changed

+160
-127
lines changed

‎src/components/examples/split-layout/BasicExample.astro

Lines changed: 10 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,19 @@
1-
<vscode-split-layout class="split-layout-example">
2-
<div slot="start" class="split-layout-content">
3-
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
4-
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
5-
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
6-
Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
7-
ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
8-
nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
9-
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
10-
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
11-
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
12-
ultricies sapien porttitor nec.
13-
</div>
14-
<div slot="end" class="split-layout-content">
15-
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
16-
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
17-
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
18-
Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
19-
ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
20-
nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
21-
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
22-
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
23-
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
24-
ultricies sapien porttitor nec.
25-
</div>
1+
<vscode-split-layout>
2+
<div slot="start">Left</div>
3+
<div slot="end">Right</div>
264
</vscode-split-layout>
275

286
<style>
29-
.split-layout-example {
7+
vscode-split-layout {
308
height: 200px;
319
width: 500px;
3210
}
3311

34-
.split-layout-content {
35-
overflow-y: auto;
12+
[slot="start"],
13+
[slot="end"] {
14+
align-items: center;
15+
display: flex;
16+
justify-content: center;
17+
overflow: hidden;
3618
}
3719
</style>

‎src/components/examples/split-layout/FixedPaneExample.astro

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<vscode-split-layout class="split-layout" initial-handle-position="75%">
2+
<div slot="start">
3+
<vscode-split-layout fixed-pane="start" class="example">
4+
<div slot="start">Left</div>
5+
<div slot="end">Right</div>
6+
</vscode-split-layout>
7+
</div>
8+
<div slot="end">
9+
<div style="align-items: center; display: flex; margin-left: 20px;">
10+
<vscode-icon name="arrow-left"></vscode-icon> Resize it
11+
</div>
12+
</div>
13+
</vscode-split-layout>
14+
15+
<style>
16+
.split-layout {
17+
border: 0;
18+
height: 250px;
19+
width: 100%;
20+
}
21+
22+
.split-layout > [slot="start"] {
23+
padding-right: 20px;
24+
}
25+
26+
.split-layout vscode-split-layout {
27+
height: 100%;
28+
}
29+
30+
.example {
31+
height: 250px;
32+
width: 100%;
33+
}
34+
35+
.example [slot="start"],
36+
.example [slot="end"] {
37+
align-items: center;
38+
display: flex;
39+
justify-content: center;
40+
overflow: hidden;
41+
}
42+
</style>

‎src/components/examples/split-layout/HorizontalExample.astro

Lines changed: 10 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,19 @@
1-
<vscode-split-layout class="split-layout-example" split="horizontal">
2-
<div slot="start">
3-
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
4-
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
5-
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
6-
Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
7-
ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
8-
nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
9-
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
10-
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
11-
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
12-
ultricies sapien porttitor nec.
13-
</div>
14-
<div slot="end">
15-
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
16-
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
17-
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
18-
Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
19-
ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
20-
nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
21-
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
22-
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
23-
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
24-
ultricies sapien porttitor nec.
25-
</div>
1+
<vscode-split-layout split="horizontal">
2+
<div slot="start">Top</div>
3+
<div slot="end">Bottom</div>
264
</vscode-split-layout>
275

286
<style>
29-
.split-layout-example {
7+
vscode-split-layout {
308
height: 500px;
319
width: 250px;
3210
}
3311

34-
.split-layout-example > div {
35-
overflow-y: hidden;
12+
[slot="start"],
13+
[slot="end"] {
14+
align-items: center;
15+
display: flex;
16+
justify-content: center;
17+
overflow: hidden;
3618
}
3719
</style>

‎src/components/examples/split-layout/Imports.astro

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
<link rel="stylesheet" href="/codicon.css" id="vscode-codicon-stylesheet" />
2+
13
<script>
4+
import "@vscode-elements/elements/dist/vscode-icon/index.js";
25
import "@vscode-elements/elements/dist/vscode-split-layout/index.js";
36
</script>

‎src/components/examples/split-layout/NestedExample.astro

Lines changed: 16 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,27 @@
1-
<vscode-split-layout class="split-layout-example">
2-
<div slot="start">
3-
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
4-
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
5-
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
6-
Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
7-
ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
8-
nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
9-
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
10-
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
11-
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
12-
ultricies sapien porttitor nec.
13-
</div>
1+
<vscode-split-layout>
2+
<div slot="start">Left</div>
143
<vscode-split-layout split="horizontal" slot="end">
15-
<div slot="start">
16-
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
17-
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
18-
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie
19-
maximus. Vestibulum arcu leo, tempor nec pretium id, vehicula id odio.
20-
Etiam ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur
21-
tincidunt nulla in magna pharetra commodo. Donec vestibulum mollis quam,
22-
ut consequat dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam
23-
eros ante, suscipit hendrerit molestie a, tempor nec turpis. Morbi eget
24-
erat suscipit, blandit nibh nec, molestie augue. Aenean consectetur
25-
dapibus mauris, eget ultricies sapien porttitor nec.
26-
</div>
27-
<div slot="end">
28-
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
29-
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
30-
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie
31-
maximus. Vestibulum arcu leo, tempor nec pretium id, vehicula id odio.
32-
Etiam ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur
33-
tincidunt nulla in magna pharetra commodo. Donec vestibulum mollis quam,
34-
ut consequat dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam
35-
eros ante, suscipit hendrerit molestie a, tempor nec turpis. Morbi eget
36-
erat suscipit, blandit nibh nec, molestie augue. Aenean consectetur
37-
dapibus mauris, eget ultricies sapien porttitor nec.
38-
</div>
4+
<div slot="start">Right Top</div>
5+
<div slot="end">Right Bottom</div>
396
</vscode-split-layout>
407
</vscode-split-layout>
418

429
<style>
43-
.split-layout-example {
44-
border: 1px solid var(--vscode-editorWidget-border);
10+
vscode-split-layout {
4511
height: 500px;
4612
width: 500px;
4713
}
4814

49-
vscode-split-layout > div {
50-
overflow-y: hidden;
15+
vscode-split-layout > vscode-split-layout {
16+
height: 100%;
17+
width: 100%;
18+
}
19+
20+
[slot="start"],
21+
[slot="end"] {
22+
align-items: center;
23+
display: flex;
24+
justify-content: center;
25+
overflow: hidden;
5126
}
5227
</style>

‎src/content/docs/components/split-layout.mdx

Lines changed: 79 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,35 +9,37 @@ import Imports from "@components/examples/split-layout/Imports.astro";
99
import BasicExample from "@components/examples/split-layout/BasicExample.astro";
1010
import HorizontalExample from "@components/examples/split-layout/HorizontalExample.astro";
1111
import NestedExample from "@components/examples/split-layout/NestedExample.astro";
12+
import FixedPaneExample from "@components/examples/split-layout/FixedPaneExample.astro";
1213

1314
<Imports />
1415
<PageSwitcher />
1516

16-
## Basic example
17+
## Split vertically
1718

1819
<Demo>
1920
<BasicExample />
2021
<Fragment slot="html">
2122
```html
22-
<div slot="start" class="split-layout-content">
23-
Praesent ultrices mauris lectus, eu molestie...
24-
</div>
25-
<div slot="end" class="split-layout-content">
26-
Praesent ultrices mauris lectus, eu molestie...
27-
</div>
23+
<vscode-split-layout>
24+
<div slot="start">Left</div>
25+
<div slot="end">Right</div>
26+
</vscode-split-layout>
2827
```
2928
</Fragment>
3029
<Fragment slot="css">
3130
```css
32-
.split-layout-example {
33-
border: 1px solid var(--vscode-editorWidget-border);
34-
height: 200px;
35-
width: 500px;
36-
}
31+
vscode-split-layout {
32+
height: 200px;
33+
width: 500px;
34+
}
3735

38-
.split-layout-content {
39-
overflow-y: auto;
40-
}
36+
[slot="start"],
37+
[slot="end"] {
38+
align-items: center;
39+
display: flex;
40+
justify-content: center;
41+
overflow: hidden;
42+
}
4143
```
4244

4345
</Fragment>
@@ -48,22 +50,26 @@ import NestedExample from "@components/examples/split-layout/NestedExample.astro
4850
<Demo>
4951
<HorizontalExample />
5052
<Fragment slot="html">
51-
```html
52-
<vscode-split-layout class="split-layout-example" split="vertical">
53-
<div slot="start" class="split-layout-content start">
54-
Praesent ultrices mauris lectus...
55-
</div>
56-
<div slot="end" class="split-layout-content">
57-
Praesent ultrices mauris lectus...
58-
</div>
53+
```html 'split="horizontal"'
54+
<vscode-split-layout split="horizontal">
55+
<div slot="start">Top</div>
56+
<div slot="end">Bottom</div>
5957
</vscode-split-layout>
6058
```
6159
</Fragment>
6260
<Fragment slot="css">
6361
```css
64-
vscode-scrollable {
62+
vscode-split-layout {
6563
height: 500px;
66-
width: 200px;
64+
width: 250px;
65+
}
66+
67+
[slot="start"],
68+
[slot="end"] {
69+
align-items: center;
70+
display: flex;
71+
justify-content: center;
72+
overflow: hidden;
6773
}
6874
```
6975
</Fragment>
@@ -75,27 +81,70 @@ import NestedExample from "@components/examples/split-layout/NestedExample.astro
7581
<NestedExample />
7682
<Fragment slot="html">
7783
```html
78-
<vscode-split-layout class="split-layout-example">
84+
<vscode-split-layout>
7985
<div slot="start">
80-
Praesent ultrices mauris lectus...
86+
Left
8187
</div>
8288
<vscode-split-layout split="horizontal" slot="end">
8389
<div slot="start">
84-
Praesent ultrices mauris lectus...
90+
Right Top
8591
</div>
8692
<div slot="end">
87-
Praesent ultrices mauris lectus...
93+
Right Bottom
8894
</div>
8995
</vscode-split-layout>
9096
</vscode-split-layout>
9197
```
9298
</Fragment>
9399
<Fragment slot="css">
94100
```css
95-
.split-layout-example {
101+
vscode-split-layout {
96102
height: 500px;
97103
width: 500px;
98104
}
105+
106+
vscode-split-layout > vscode-split-layout {
107+
height: 100%;
108+
width: 100%;
109+
}
110+
111+
[slot="start"],
112+
[slot="end"] {
113+
align-items: center;
114+
display: flex;
115+
justify-content: center;
116+
overflow: hidden;
117+
}
118+
```
119+
</Fragment>
120+
</Demo>
121+
122+
## Fixed pane
123+
124+
<Demo>
125+
<FixedPaneExample />
126+
<Fragment slot="html">
127+
```html 'fixed-pane="start"'
128+
<vscode-split-layout fixed-pane="start">
129+
<div slot="start">Left</div>
130+
<div slot="end">Right</div>
131+
</vscode-split-layout>
132+
```
133+
</Fragment>
134+
<Fragment slot="css">
135+
```css
136+
vscode-split-layout {
137+
height: 250px;
138+
width: 100%;
139+
}
140+
141+
vscode-split-layout [slot="start"],
142+
vscode-split-layout [slot="end"] {
143+
align-items: center;
144+
display: flex;
145+
justify-content: center;
146+
overflow: hidden;
147+
}
99148
```
100149
</Fragment>
101150
</Demo>

0 commit comments

Comments
 (0)