Skip to content

docs: split-layout Aura style variants and props #4886

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vursen merged 7 commits into from
Dec 4, 2025
Merged

docs: split-layout Aura style variants and props #4886

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c849b28
docs: split-layout Aura style variants and props
vursen Dec 3, 2025
118fb0f
add style properties table
vursen Dec 3, 2025
0a8f374
update example styles to support Aura
vursen Dec 4, 2025
bec004f
Merge branch 'main' into docs/split-layout-styling-page
vursen Dec 4, 2025
0caf673
update example styles to support Aura
vursen Dec 4, 2025
42e2108
Merge branch 'main' into docs/split-layout-styling-page
vursen Dec 4, 2025
1f30f4e
Merge branch 'main' into docs/split-layout-styling-page
vursen Dec 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 1 addition & 63 deletions articles/components/split-layout/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ page-links:
Split Layout is a component with two content areas and a draggable split handle between them.
// end::description[]

[.example]
[.example, themes="lumo,aura"]
--

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

== Theme Variants

Split Layout has two theme variants: `small` and `minimal`.

[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/splitlayout/split-layout-theme-small.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/splitlayout/SplitLayoutThemeVariants.java[render,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/splitlayout/react/split-layout-theme-small.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--

The `small` theme variant makes the divider smaller.
The `minimal` theme variant hides the visual divider.
Both variants only show the split handle on hover and aren't ideal for touch devices.

[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/splitlayout/split-layout-theme-minimal.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/splitlayout/SplitLayoutMinimalThemeVariants.java[render,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/splitlayout/react/split-layout-theme-minimal.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--

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.

While these variants reduce visual clutter, they make it less obvious to the user that the content is resizable.

== Best Practices

* Don't use Split Layout when either content area has, or should have, a fixed size.
Expand Down
96 changes: 96 additions & 0 deletions articles/components/split-layout/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,102 @@
---
= Split Layout Styling

== Style Variants

Split Layout supports the following style variants:

[cols="1,3,1"]
|===
| Variant | Description | Supported by

|`small`
|Makes the visual divider smaller
|Aura, Lumo

|`minimal`
|Hides the visual divider completely
|Lumo

|===

=== Small

The `small` theme variant makes the visual divider smaller, giving more space to the content areas.

Please note that this variant shows the split handle only on hover, which isn't ideal for touch devices.

Check warning on line 32 in articles/components/split-layout/styling.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.NoteThat] Avoid using 'note that'.

Raw Output:
{"message": "[Vaadin.NoteThat] Avoid using 'note that'.", "location": {"path": "articles/components/split-layout/styling.adoc", "range": {"start": {"line": 32, "column": 8}}}, "severity": "WARNING"}

[.example]
--

[source,html]
----
include::{root}/frontend/demo/component/splitlayout/split-layout-theme-small.ts[render,tags=snippet,indent=0,group=Lit]
----

[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/splitlayout/SplitLayoutThemeVariants.java[render,tags=snippet,indent=0,group=Flow]
----

[source,tsx]
----
include::{root}/frontend/demo/component/splitlayout/react/split-layout-theme-small.tsx[render,tags=snippet,indent=0,group=React]
----

--

=== Minimal

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.

Please note that this variant shows the split handle only on hover, which isn't ideal for touch devices.

Check warning on line 58 in articles/components/split-layout/styling.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.NoteThat] Avoid using 'note that'.

Raw Output:
{"message": "[Vaadin.NoteThat] Avoid using 'note that'.", "location": {"path": "articles/components/split-layout/styling.adoc", "range": {"start": {"line": 58, "column": 8}}}, "severity": "WARNING"}

[.example]
--

[source,html]
----
include::{root}/frontend/demo/component/splitlayout/split-layout-theme-minimal.ts[render,tags=snippet,indent=0,group=Lit]
----

[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/splitlayout/SplitLayoutMinimalThemeVariants.java[render,tags=snippet,indent=0,group=Flow]
----

[source,tsx]
----
include::{root}/frontend/demo/component/splitlayout/react/split-layout-theme-minimal.tsx[render,tags=snippet,indent=0,group=React]
----

--

include::../_styling-section-theming-props.adoc[tag=style-properties]

[cols="2,1"]
|===
| Property | Supported by

| `--vaadin-split-layout-handle-background`
| Aura, Lumo

| `--vaadin-split-layout-handle-size`
| Aura, Lumo

| `--vaadin-split-layout-handle-target-size`
| Aura, Lumo

| `--vaadin-split-layout-splitter-background`
| Aura, Lumo

| `--vaadin-split-layout-splitter-size`
| Aura, Lumo

| `--vaadin-split-layout-splitter-target-size`
| Aura, Lumo

|===

include::../_styling-section-intros.adoc[tag=selectors]


Expand Down
63 changes: 15 additions & 48 deletions frontend/demo/component/splitlayout/detail-content.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,56 +3,23 @@ import { customElement } from 'lit/decorators.js';

@customElement('detail-content')
export class DetailContent extends LitElement {
static override styles = css`
:host {
overflow: hidden !important;
color: var(--lumo-contrast-20pct);
}

.form {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
box-sizing: border-box;
}

.field {
display: flex;
flex-flow: column nowrap;
margin: var(--lumo-space-wide-l);
pointer-events: none;
}

label {
width: 6rem;
background: currentColor;
border-radius: calc(2.25rem / 2);
height: var(--lumo-font-size-xxs);
}
protected override createRenderRoot() {
return this;
}

input {
background: var(--lumo-contrast-10pct);
border-radius: var(--lumo-border-radius-s);
padding: var(--lumo-space-s) 0;
border: none;
margin-top: var(--lumo-space-s);
}
`;
connectedCallback() {
super.connectedCallback();
this.classList.add('detail-content');
}

protected override render() {
return html`
<div class="form">
<div class="field"><label></label><input type="text" /></div>
<div class="field"><label></label><input type="text" /></div>
<div class="field"><label></label><input type="text" /></div>
<div class="field"><label></label><input type="text" /></div>
<div class="field"><label></label><input type="text" /></div>
<div class="field"><label></label><input type="text" /></div>
<div class="field"><label></label><input type="text" /></div>
<div class="field"><label></label><input type="text" /></div>
<div class="field"><label></label><input type="text" /></div>
<div class="field"><label></label><input type="text" /></div>
</div>
`;
return [...Array(10)].map(
() => html`
<div class="field">
<label></label>
<input type="text" />
</div>
`
);
}
}
80 changes: 18 additions & 62 deletions frontend/demo/component/splitlayout/master-content.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,70 +3,26 @@ import { customElement } from 'lit/decorators.js';

@customElement('master-content')
export class MasterContent extends LitElement {
static override styles = css`
:host {
overflow: hidden !important;
color: var(--lumo-contrast-20pct);
}

table {
border-collapse: collapse;
}

th,
td {
border-bottom: 1px solid currentColor;
padding: var(--lumo-space-wide-m);
}

th::before,
td::before {
content: '\\00a0';
display: inline-block;
width: 8rem;
background: currentColor;
border-radius: calc(2.25rem / 2);
font-size: var(--lumo-font-size-xxs);
}
protected override createRenderRoot() {
return this;
}

th {
background: var(--lumo-contrast-5pct);
}
`;
connectedCallback() {
super.connectedCallback();
this.classList.add('master-content');
}

protected override render() {
return html`
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<!-- prettier-ignore -->
<tbody>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
`;
return [...Array(16)].map(
() =>
html`<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>`
);
}
}
40 changes: 2 additions & 38 deletions frontend/demo/component/splitlayout/react/detail-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,48 +7,12 @@ type DetailContentProps = {
function DetailContent({ style }: DetailContentProps) {
return (
<div className="detail-content" style={style}>
<div className="form">
{[...Array(10)].map(() => (
<div className="field">
<label></label>
<input type="text" />
</div>
<div className="field">
<label></label>
<input type="text" />
</div>
<div className="field">
<label></label>
<input type="text" />
</div>
<div className="field">
<label></label>
<input type="text" />
</div>
<div className="field">
<label></label>
<input type="text" />
</div>
<div className="field">
<label></label>
<input type="text" />
</div>
<div className="field">
<label></label>
<input type="text" />
</div>
<div className="field">
<label></label>
<input type="text" />
</div>
<div className="field">
<label></label>
<input type="text" />
</div>
<div className="field">
<label></label>
<input type="text" />
</div>
</div>
))}
</div>
);
}
Expand Down
Loading