diff --git a/articles/components/split-layout/index.adoc b/articles/components/split-layout/index.adoc index 7059d20950..30cd70ef25 100644 --- a/articles/components/split-layout/index.adoc +++ b/articles/components/split-layout/index.adoc @@ -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[] @@ -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. diff --git a/articles/components/split-layout/styling.adoc b/articles/components/split-layout/styling.adoc index c7f65093b9..a26dc225d0 100644 --- a/articles/components/split-layout/styling.adoc +++ b/articles/components/split-layout/styling.adoc @@ -7,6 +7,102 @@ order: 50 --- = 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. + +[.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. + +[.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] diff --git a/frontend/demo/component/splitlayout/detail-content.ts b/frontend/demo/component/splitlayout/detail-content.ts index 1fa73c665f..75c879a422 100644 --- a/frontend/demo/component/splitlayout/detail-content.ts +++ b/frontend/demo/component/splitlayout/detail-content.ts @@ -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` -
-
-
-
-
-
-
-
-
-
-
-
- `; + return [...Array(10)].map( + () => html` +
+ + +
+ ` + ); } } diff --git a/frontend/demo/component/splitlayout/master-content.ts b/frontend/demo/component/splitlayout/master-content.ts index 9964ac7e3a..3e693ae370 100644 --- a/frontend/demo/component/splitlayout/master-content.ts +++ b/frontend/demo/component/splitlayout/master-content.ts @@ -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` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- `; + return [...Array(16)].map( + () => + html`
+
+
+
+
+
+
+
` + ); } } diff --git a/frontend/demo/component/splitlayout/react/detail-content.tsx b/frontend/demo/component/splitlayout/react/detail-content.tsx index 8b5747b93d..408cbff1bb 100644 --- a/frontend/demo/component/splitlayout/react/detail-content.tsx +++ b/frontend/demo/component/splitlayout/react/detail-content.tsx @@ -7,48 +7,12 @@ type DetailContentProps = { function DetailContent({ style }: DetailContentProps) { return (
-
+ {[...Array(10)].map(() => (
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
+ ))}
); } diff --git a/frontend/demo/component/splitlayout/react/master-content.tsx b/frontend/demo/component/splitlayout/react/master-content.tsx index 528e3ff510..89fc720f64 100644 --- a/frontend/demo/component/splitlayout/react/master-content.tsx +++ b/frontend/demo/component/splitlayout/react/master-content.tsx @@ -7,148 +7,16 @@ type MasterContentProps = { function MasterContent({ style }: MasterContentProps) { return (
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ {[...Array(16)].map(() => ( +
+
+
+
+
+
+
+
+ ))}
); } diff --git a/frontend/demo/component/splitlayout/react/split-layout-basic.tsx b/frontend/demo/component/splitlayout/react/split-layout-basic.tsx index 4d0366a323..74d339f576 100644 --- a/frontend/demo/component/splitlayout/react/split-layout-basic.tsx +++ b/frontend/demo/component/splitlayout/react/split-layout-basic.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { SplitLayout } from '@vaadin/react-components/SplitLayout'; import DetailContent from './detail-content'; import MasterContent from './master-content'; -import exampleStyles from './split-layout-example-styles'; // hidden-source-line function Example() { return ( @@ -16,4 +15,4 @@ function Example() { ); } -export default reactExample(Example, exampleStyles); // hidden-source-line +export default reactExample(Example); // hidden-source-line diff --git a/frontend/demo/component/splitlayout/react/split-layout-example-styles.ts b/frontend/demo/component/splitlayout/react/split-layout-example-styles.ts deleted file mode 100644 index 65070b3684..0000000000 --- a/frontend/demo/component/splitlayout/react/split-layout-example-styles.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { css } from 'lit'; - -const styles = css` - .master-content { - 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); - } - - th { - background: var(--lumo-contrast-5pct); - } - - .detail-content { - 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); - } - - 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); - } -`; - -export default styles; diff --git a/frontend/demo/component/splitlayout/react/split-layout-initial-splitter-position.tsx b/frontend/demo/component/splitlayout/react/split-layout-initial-splitter-position.tsx index 5569c1f286..784354aacd 100644 --- a/frontend/demo/component/splitlayout/react/split-layout-initial-splitter-position.tsx +++ b/frontend/demo/component/splitlayout/react/split-layout-initial-splitter-position.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { SplitLayout } from '@vaadin/react-components/SplitLayout.js'; import DetailContent from './detail-content'; import MasterContent from './master-content'; -import exampleStyles from './split-layout-example-styles'; // hidden-source-line function Example() { return ( @@ -16,4 +15,4 @@ function Example() { ); } -export default reactExample(Example, exampleStyles); // hidden-source-line +export default reactExample(Example); // hidden-source-line diff --git a/frontend/demo/component/splitlayout/react/split-layout-min-max-size.tsx b/frontend/demo/component/splitlayout/react/split-layout-min-max-size.tsx index b7a2253bf7..a69fe11ad2 100644 --- a/frontend/demo/component/splitlayout/react/split-layout-min-max-size.tsx +++ b/frontend/demo/component/splitlayout/react/split-layout-min-max-size.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { SplitLayout } from '@vaadin/react-components/SplitLayout.js'; import DetailContent from './detail-content'; import MasterContent from './master-content'; -import exampleStyles from './split-layout-example-styles'; // hidden-source-line function Example() { return ( @@ -16,4 +15,4 @@ function Example() { ); } -export default reactExample(Example, exampleStyles); // hidden-source-line +export default reactExample(Example); // hidden-source-line diff --git a/frontend/demo/component/splitlayout/react/split-layout-orientation.tsx b/frontend/demo/component/splitlayout/react/split-layout-orientation.tsx index c705ffbdc0..27e289377c 100644 --- a/frontend/demo/component/splitlayout/react/split-layout-orientation.tsx +++ b/frontend/demo/component/splitlayout/react/split-layout-orientation.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { SplitLayout } from '@vaadin/react-components/SplitLayout.js'; import DetailContent from './detail-content'; import MasterContent from './master-content'; -import exampleStyles from './split-layout-example-styles'; // hidden-source-line function Example() { return ( @@ -16,4 +15,4 @@ function Example() { ); } -export default reactExample(Example, exampleStyles); // hidden-source-line +export default reactExample(Example); // hidden-source-line diff --git a/frontend/demo/component/splitlayout/react/split-layout-theme-minimal.tsx b/frontend/demo/component/splitlayout/react/split-layout-theme-minimal.tsx index 061565ce27..422ebf08b7 100644 --- a/frontend/demo/component/splitlayout/react/split-layout-theme-minimal.tsx +++ b/frontend/demo/component/splitlayout/react/split-layout-theme-minimal.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { SplitLayout } from '@vaadin/react-components/SplitLayout.js'; import DetailContent from './detail-content'; import MasterContent from './master-content'; -import exampleStyles from './split-layout-example-styles'; // hidden-source-line function Example() { return ( @@ -16,4 +15,4 @@ function Example() { ); } -export default reactExample(Example, exampleStyles); // hidden-source-line +export default reactExample(Example); // hidden-source-line diff --git a/frontend/demo/component/splitlayout/react/split-layout-theme-small.tsx b/frontend/demo/component/splitlayout/react/split-layout-theme-small.tsx index 182290b280..78d866c829 100644 --- a/frontend/demo/component/splitlayout/react/split-layout-theme-small.tsx +++ b/frontend/demo/component/splitlayout/react/split-layout-theme-small.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { SplitLayout } from '@vaadin/react-components/SplitLayout.js'; import DetailContent from './detail-content'; import MasterContent from './master-content'; -import exampleStyles from './split-layout-example-styles'; // hidden-source-line function Example() { return ( @@ -16,4 +15,4 @@ function Example() { ); } -export default reactExample(Example, exampleStyles); // hidden-source-line +export default reactExample(Example); // hidden-source-line diff --git a/frontend/demo/component/splitlayout/react/split-layout-toggle.tsx b/frontend/demo/component/splitlayout/react/split-layout-toggle.tsx index 1132bbb803..52282b4465 100644 --- a/frontend/demo/component/splitlayout/react/split-layout-toggle.tsx +++ b/frontend/demo/component/splitlayout/react/split-layout-toggle.tsx @@ -8,7 +8,6 @@ import { Icon } from '@vaadin/react-components/Icon.js'; import { SplitLayout } from '@vaadin/react-components/SplitLayout.js'; import DetailContent from './detail-content'; import MasterContent from './master-content'; -import exampleStyles from './split-layout-example-styles'; // hidden-source-line function Example() { useSignals(); // hidden-source-line @@ -39,7 +38,7 @@ function Example() { > - +
@@ -50,4 +49,4 @@ function Example() { // end::snippet[] } -export default reactExample(Example, exampleStyles); // hidden-source-line +export default reactExample(Example); // hidden-source-line diff --git a/frontend/demo/component/splitlayout/split-layout-toggle.ts b/frontend/demo/component/splitlayout/split-layout-toggle.ts index 5c46720094..b640c50a48 100644 --- a/frontend/demo/component/splitlayout/split-layout-toggle.ts +++ b/frontend/demo/component/splitlayout/split-layout-toggle.ts @@ -37,7 +37,7 @@ export class Example extends LitElement { icon="${this.sidebarCollapsed ? 'vaadin:arrow-right' : 'vaadin:arrow-left'}" > - +
diff --git a/frontend/themes/docs/split-layout-example.css b/frontend/themes/docs/split-layout-example.css new file mode 100644 index 0000000000..7fec55f0d9 --- /dev/null +++ b/frontend/themes/docs/split-layout-example.css @@ -0,0 +1,48 @@ +.master-content { + display: block; + overflow: hidden !important; +} + +.master-content .row { + display: flex; + align-items: center; + border-bottom: 1px solid var(--vaadin-background-container-strong); +} + +.master-content .col { + flex: 0 0 8rem; + height: 1.4rem; + margin: var(--vaadin-gap-m); + background: var(--vaadin-background-container-strong); + border-radius: var(--vaadin-radius-l); +} + +.detail-content { + display: flex; + flex-wrap: wrap; + align-content: flex-start; + overflow: hidden !important; + color: var(--vaadin-background-container-strong); +} + +.detail-content .field { + display: flex; + flex-direction: column; + margin: var(--vaadin-gap-m) var(--vaadin-gap-xl); + pointer-events: none; +} + +.detail-content label { + width: 6rem; + height: 0.6875rem; + background: var(--vaadin-background-container-strong); + border-radius: var(--vaadin-radius-l); +} + +.detail-content input { + margin-top: var(--vaadin-gap-s); + padding: var(--vaadin-gap-s) 0; + background: var(--vaadin-background-container-strong); + border: none; + border-radius: var(--vaadin-radius-s); +} diff --git a/frontend/themes/docs/styles.css b/frontend/themes/docs/styles.css index 7a97adf214..edc200f59f 100644 --- a/frontend/themes/docs/styles.css +++ b/frontend/themes/docs/styles.css @@ -19,3 +19,4 @@ @import './popover-user-menu.css'; @import './screen-reader-only.css'; @import './text-area.css'; +@import './split-layout-example.css'; diff --git a/src/main/java/com/vaadin/demo/component/splitlayout/DetailContent.java b/src/main/java/com/vaadin/demo/component/splitlayout/DetailContent.java index 9f709ebd1f..d435ba478a 100644 --- a/src/main/java/com/vaadin/demo/component/splitlayout/DetailContent.java +++ b/src/main/java/com/vaadin/demo/component/splitlayout/DetailContent.java @@ -4,4 +4,4 @@ @Tag("detail-content") public class DetailContent extends Component implements HasSize { -} \ No newline at end of file +} diff --git a/src/main/java/com/vaadin/demo/component/splitlayout/MasterContent.java b/src/main/java/com/vaadin/demo/component/splitlayout/MasterContent.java index 0f3ba5687c..4ec7aa5c6b 100644 --- a/src/main/java/com/vaadin/demo/component/splitlayout/MasterContent.java +++ b/src/main/java/com/vaadin/demo/component/splitlayout/MasterContent.java @@ -4,4 +4,4 @@ @Tag("master-content") public class MasterContent extends Component implements HasSize { -} \ No newline at end of file +} diff --git a/src/main/java/com/vaadin/demo/component/splitlayout/SplitLayoutToggle.java b/src/main/java/com/vaadin/demo/component/splitlayout/SplitLayoutToggle.java index 95dd1ed893..b3c1aff7c2 100644 --- a/src/main/java/com/vaadin/demo/component/splitlayout/SplitLayoutToggle.java +++ b/src/main/java/com/vaadin/demo/component/splitlayout/SplitLayoutToggle.java @@ -25,6 +25,7 @@ public SplitLayoutToggle() { Div masterContainer = new Div(); DetailContent detailContent = new DetailContent(); MasterContent masterContent = new MasterContent(); + masterContent.getStyle().set("clear", "right"); sidebarCollapsed = false;