Skip to content

Commit 1a6bc2e

Browse files
vursenvursen
authored
docs: split-layout Aura style variants and props (#4886)
1 parent ed63102 commit 1a6bc2e

20 files changed

+203
-439
lines changed

‎articles/components/split-layout/index.adoc‎

Lines changed: 1 addition & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ page-links:
1515
Split Layout is a component with two content areas and a draggable split handle between them.
1616
// end::description[]
1717

18-
[.example]
18+
[.example, themes="lumo,aura"]
1919
--
2020

2121
ifdef::lit[]
@@ -167,68 +167,6 @@ include::{root}/frontend/demo/component/splitlayout/react/split-layout-toggle.ts
167167
endif::[]
168168
--
169169

170-
== Theme Variants
171-
172-
Split Layout has two theme variants: `small` and `minimal`.
173-
174-
[.example]
175-
--
176-
177-
ifdef::lit[]
178-
[source,html]
179-
----
180-
include::{root}/frontend/demo/component/splitlayout/split-layout-theme-small.ts[render,tags=snippet,indent=0,group=Lit]
181-
----
182-
endif::[]
183-
184-
ifdef::flow[]
185-
[source,java]
186-
----
187-
include::{root}/src/main/java/com/vaadin/demo/component/splitlayout/SplitLayoutThemeVariants.java[render,tags=snippet,indent=0,group=Flow]
188-
----
189-
endif::[]
190-
191-
ifdef::react[]
192-
[source,tsx]
193-
----
194-
include::{root}/frontend/demo/component/splitlayout/react/split-layout-theme-small.tsx[render,tags=snippet,indent=0,group=React]
195-
----
196-
endif::[]
197-
--
198-
199-
The `small` theme variant makes the divider smaller.
200-
The `minimal` theme variant hides the visual divider.
201-
Both variants only show the split handle on hover and aren't ideal for touch devices.
202-
203-
[.example]
204-
--
205-
206-
ifdef::lit[]
207-
[source,html]
208-
----
209-
include::{root}/frontend/demo/component/splitlayout/split-layout-theme-minimal.ts[render,tags=snippet,indent=0,group=Lit]
210-
----
211-
endif::[]
212-
213-
ifdef::flow[]
214-
[source,java]
215-
----
216-
include::{root}/src/main/java/com/vaadin/demo/component/splitlayout/SplitLayoutMinimalThemeVariants.java[render,tags=snippet,indent=0,group=Flow]
217-
----
218-
endif::[]
219-
220-
ifdef::react[]
221-
[source,tsx]
222-
----
223-
include::{root}/frontend/demo/component/splitlayout/react/split-layout-theme-minimal.tsx[render,tags=snippet,indent=0,group=React]
224-
----
225-
endif::[]
226-
--
227-
228-
When using the `minimal` theme variant, it's recommended to somehow suggest the split between the two sides, for example by styling one side as a layer on top of the other.
229-
230-
While these variants reduce visual clutter, they make it less obvious to the user that the content is resizable.
231-
232170
== Best Practices
233171

234172
* Don't use Split Layout when either content area has, or should have, a fixed size.

‎articles/components/split-layout/styling.adoc‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,102 @@ order: 50
77
---
88
= Split Layout Styling
99

10+
== Style Variants
11+
12+
Split Layout supports the following style variants:
13+
14+
[cols="1,3,1"]
15+
|===
16+
| Variant | Description | Supported by
17+
18+
|`small`
19+
|Makes the visual divider smaller
20+
|Aura, Lumo
21+
22+
|`minimal`
23+
|Hides the visual divider completely
24+
|Lumo
25+
26+
|===
27+
28+
=== Small
29+
30+
The `small` theme variant makes the visual divider smaller, giving more space to the content areas.
31+
32+
Please note that this variant shows the split handle only on hover, which isn't ideal for touch devices.
33+
34+
[.example]
35+
--
36+
37+
[source,html]
38+
----
39+
include::{root}/frontend/demo/component/splitlayout/split-layout-theme-small.ts[render,tags=snippet,indent=0,group=Lit]
40+
----
41+
42+
[source,java]
43+
----
44+
include::{root}/src/main/java/com/vaadin/demo/component/splitlayout/SplitLayoutThemeVariants.java[render,tags=snippet,indent=0,group=Flow]
45+
----
46+
47+
[source,tsx]
48+
----
49+
include::{root}/frontend/demo/component/splitlayout/react/split-layout-theme-small.tsx[render,tags=snippet,indent=0,group=React]
50+
----
51+
52+
--
53+
54+
=== Minimal
55+
56+
The `minimal` style variant hides the visual divider completely. When using this variant, it's still recommended to somehow indicate the split between the two sides, for example by styling one side as a layer on top of the other.
57+
58+
Please note that this variant shows the split handle only on hover, which isn't ideal for touch devices.
59+
60+
[.example]
61+
--
62+
63+
[source,html]
64+
----
65+
include::{root}/frontend/demo/component/splitlayout/split-layout-theme-minimal.ts[render,tags=snippet,indent=0,group=Lit]
66+
----
67+
68+
[source,java]
69+
----
70+
include::{root}/src/main/java/com/vaadin/demo/component/splitlayout/SplitLayoutMinimalThemeVariants.java[render,tags=snippet,indent=0,group=Flow]
71+
----
72+
73+
[source,tsx]
74+
----
75+
include::{root}/frontend/demo/component/splitlayout/react/split-layout-theme-minimal.tsx[render,tags=snippet,indent=0,group=React]
76+
----
77+
78+
--
79+
80+
include::../_styling-section-theming-props.adoc[tag=style-properties]
81+
82+
[cols="2,1"]
83+
|===
84+
| Property | Supported by
85+
86+
| `--vaadin-split-layout-handle-background`
87+
| Aura, Lumo
88+
89+
| `--vaadin-split-layout-handle-size`
90+
| Aura, Lumo
91+
92+
| `--vaadin-split-layout-handle-target-size`
93+
| Aura, Lumo
94+
95+
| `--vaadin-split-layout-splitter-background`
96+
| Aura, Lumo
97+
98+
| `--vaadin-split-layout-splitter-size`
99+
| Aura, Lumo
100+
101+
| `--vaadin-split-layout-splitter-target-size`
102+
| Aura, Lumo
103+
104+
|===
105+
10106
include::../_styling-section-intros.adoc[tag=selectors]
11107

12108

‎frontend/demo/component/splitlayout/detail-content.ts‎

Lines changed: 15 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,56 +3,23 @@ import { customElement } from 'lit/decorators.js';
33

44
@customElement('detail-content')
55
export class DetailContent extends LitElement {
6-
static override styles = css`
7-
:host {
8-
overflow: hidden !important;
9-
color: var(--lumo-contrast-20pct);
10-
}
11-
12-
.form {
13-
display: flex;
14-
flex-flow: row wrap;
15-
align-content: flex-start;
16-
box-sizing: border-box;
17-
}
18-
19-
.field {
20-
display: flex;
21-
flex-flow: column nowrap;
22-
margin: var(--lumo-space-wide-l);
23-
pointer-events: none;
24-
}
25-
26-
label {
27-
width: 6rem;
28-
background: currentColor;
29-
border-radius: calc(2.25rem / 2);
30-
height: var(--lumo-font-size-xxs);
31-
}
6+
protected override createRenderRoot() {
7+
return this;
8+
}
329

33-
input {
34-
background: var(--lumo-contrast-10pct);
35-
border-radius: var(--lumo-border-radius-s);
36-
padding: var(--lumo-space-s) 0;
37-
border: none;
38-
margin-top: var(--lumo-space-s);
39-
}
40-
`;
10+
connectedCallback() {
11+
super.connectedCallback();
12+
this.classList.add('detail-content');
13+
}
4114

4215
protected override render() {
43-
return html`
44-
<div class="form">
45-
<div class="field"><label></label><input type="text" /></div>
46-
<div class="field"><label></label><input type="text" /></div>
47-
<div class="field"><label></label><input type="text" /></div>
48-
<div class="field"><label></label><input type="text" /></div>
49-
<div class="field"><label></label><input type="text" /></div>
50-
<div class="field"><label></label><input type="text" /></div>
51-
<div class="field"><label></label><input type="text" /></div>
52-
<div class="field"><label></label><input type="text" /></div>
53-
<div class="field"><label></label><input type="text" /></div>
54-
<div class="field"><label></label><input type="text" /></div>
55-
</div>
56-
`;
16+
return [...Array(10)].map(
17+
() => html`
18+
<div class="field">
19+
<label></label>
20+
<input type="text" />
21+
</div>
22+
`
23+
);
5724
}
5825
}

‎frontend/demo/component/splitlayout/master-content.ts‎

Lines changed: 18 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,70 +3,26 @@ import { customElement } from 'lit/decorators.js';
33

44
@customElement('master-content')
55
export class MasterContent extends LitElement {
6-
static override styles = css`
7-
:host {
8-
overflow: hidden !important;
9-
color: var(--lumo-contrast-20pct);
10-
}
11-
12-
table {
13-
border-collapse: collapse;
14-
}
15-
16-
th,
17-
td {
18-
border-bottom: 1px solid currentColor;
19-
padding: var(--lumo-space-wide-m);
20-
}
21-
22-
th::before,
23-
td::before {
24-
content: '\\00a0';
25-
display: inline-block;
26-
width: 8rem;
27-
background: currentColor;
28-
border-radius: calc(2.25rem / 2);
29-
font-size: var(--lumo-font-size-xxs);
30-
}
6+
protected override createRenderRoot() {
7+
return this;
8+
}
319

32-
th {
33-
background: var(--lumo-contrast-5pct);
34-
}
35-
`;
10+
connectedCallback() {
11+
super.connectedCallback();
12+
this.classList.add('master-content');
13+
}
3614

3715
protected override render() {
38-
return html`
39-
<table>
40-
<thead>
41-
<tr>
42-
<th></th>
43-
<th></th>
44-
<th></th>
45-
<th></th>
46-
<th></th>
47-
<th></th>
48-
</tr>
49-
</thead>
50-
<!-- prettier-ignore -->
51-
<tbody>
52-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
53-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
54-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
55-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
56-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
57-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
58-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
59-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
60-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
61-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
62-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
63-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
64-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
65-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
66-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
67-
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
68-
</tbody>
69-
</table>
70-
`;
16+
return [...Array(16)].map(
17+
() =>
18+
html`<div class="row">
19+
<div class="col"></div>
20+
<div class="col"></div>
21+
<div class="col"></div>
22+
<div class="col"></div>
23+
<div class="col"></div>
24+
<div class="col"></div>
25+
</div>`
26+
);
7127
}
7228
}

‎frontend/demo/component/splitlayout/react/detail-content.tsx‎

Lines changed: 2 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -7,48 +7,12 @@ type DetailContentProps = {
77
function DetailContent({ style }: DetailContentProps) {
88
return (
99
<div className="detail-content" style={style}>
10-
<div className="form">
10+
{[...Array(10)].map(() => (
1111
<div className="field">
1212
<label></label>
1313
<input type="text" />
1414
</div>
15-
<div className="field">
16-
<label></label>
17-
<input type="text" />
18-
</div>
19-
<div className="field">
20-
<label></label>
21-
<input type="text" />
22-
</div>
23-
<div className="field">
24-
<label></label>
25-
<input type="text" />
26-
</div>
27-
<div className="field">
28-
<label></label>
29-
<input type="text" />
30-
</div>
31-
<div className="field">
32-
<label></label>
33-
<input type="text" />
34-
</div>
35-
<div className="field">
36-
<label></label>
37-
<input type="text" />
38-
</div>
39-
<div className="field">
40-
<label></label>
41-
<input type="text" />
42-
</div>
43-
<div className="field">
44-
<label></label>
45-
<input type="text" />
46-
</div>
47-
<div className="field">
48-
<label></label>
49-
<input type="text" />
50-
</div>
51-
</div>
15+
))}
5216
</div>
5317
);
5418
}

0 commit comments

Comments
 (0)