You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Styling · Vaadin
Vaadin Elements - Split Layout - Styling

Styling

The vaadin-split-layout element is composed of four elements: the splitter, the handle, and two content elements.

The vaadin-split-layout exposes the vertical attribute and the --vaadin-split-layout-splitter mixin, which can be used for customizing styles.

Content Customization

The content elements are direct children of the split layout element. Therefore, you can style them by using normal CSS selectors in your application.

<custom-style>
  <style is="custom-style">
    .my-split-layout > div {
      background: var(--paper-grey-100);
    }
  </style>
</custom-style>
<vaadin-split-layout class="my-split-layout">
  <div>First content element</div>
  <div>Second content element</div>
</vaadin-split-layout>
vaadin split layout
Figure 1. vaadin-split-layout with light grey background on the content elements

Splitter Customization

In order to configure the splitter, use the --vaadin-split-layout-splitter custom CSS mixin.

<custom-style>
  <style is="custom-style">
    .my-split-layout {
      --vaadin-split-layout-splitter: {
        min-width: 6px;
        min-height: 4px;
        background: var(--paper-indigo-500);
      };
    }
  </style>
</custom-style>
<vaadin-split-layout class="my-split-layout">
  <div>First content element</div>
  <div>Second content element</div>
</vaadin-split-layout>
vaadin split layout custom splitter
Figure 2. vaadin-split-layout with custom splitter styles

The splitter size is set using min-width and min-height CSS properties. This allows to specify the thickness of the splitter for both vertical and horizontal layouts using a single mixin.

The above example sets horizontal layouts splitter to be 6px, and the vertical to 4px.

If you need to configure vertical and horizontal layouts separatly for the same component, you need to add the vertical attribute to your selectors.

<custom-style>
  <style is="custom-style">
    .my-split-layout:not([vertical]) {
      --vaadin-split-layout-splitter: {
        background: var(--paper-indigo-500);
        margin: 10px 0;
      };
    }
    .my-split-layout[vertical] {
      --vaadin-split-layout-splitter: {
        background: var(--paper-indigo-100);
        margin: 0 20px;
      };
    }
  </style>
</custom-style>
<vaadin-split-layout vertical class="my-split-layout">
  <div>First content element</div>
  <div>Second content element</div>
</vaadin-split-layout>
If you are dynamicaly changing the direction of one vaadin-split-layout element, and you have different styles for each, you might have to call the element.updateStyles() method.

Handle Customization

Changing the Color

By default, vaadin-split-layout includes an SVG image for the splitter handle.

You can change some of its properties via the --vaadin-split-layout-splitter mixin, for instance for changing the color use the SVG fill property:

<custom-style>
  <style is="custom-style">
    .my-split-layout {
      --vaadin-split-layout-splitter: {
        fill: black;
      };
    }
  </style>
</custom-style>
<vaadin-split-layout vertical class="my-split-layout">
  <div>First content element</div>
  <div>Second content element</div>
</vaadin-split-layout>
vaadin split layout custom handle color
Figure 3. vaadin-split-layout with custom handle color

Hiding the Handle

In order to hide the handle, use fill: none; in the splitter mixin:

<custom-style>
  <style is="custom-style">
    .no-handle {
      --vaadin-split-layout-splitter: {
        fill: none;
      };
    }
  </style>
</custom-style>
<vaadin-split-layout class="no-handle">
  <div>First content element</div>
  <div>Second content element</div>
</vaadin-split-layout>
vaadin split layout custom handle hidden
Figure 4. vaadin-split-layout with hidden splitter handle

Replacing the Handle

You can customize the handle by replacing the default one with your own element. Add your handle element to the children of the <vaadin-split-layout> and mark it with the splitter-handle classname:

<vaadin-split-layout vertical class="my-split-layout">
  <iron-icon class="splitter-handle" icon="more-vert"></iron-icon>
  <div>First content element</div>
  <div>Second content element</div>
</vaadin-split-layout>
vaadin split layout custom handle icon
Figure 5. vaadin-split-layout with a custom icon handle

In order to have different icons for vertical and horizontal layouts, add two icons to your split layout children, and use CSS to show or hide them depending on the vertical attribute of the vaadin-split-layout:

<custom-style>
  <style is="custom-style">
    .my-split-layout[vertical] iron-icon[icon="more-vert"],
    .my-split-layout:not([vertical]) iron-icon[icon="more-horiz"] {
      display: none;
    }
  </style>
</custom-style>
<vaadin-split-layout vertical class="my-split-layout">
  <iron-icon class="splitter-handle" icon="more-vert"></iron-icon>
  <iron-icon class="splitter-handle" icon="more-horiz"></iron-icon>
  <div>First content element</div>
  <div>Second conten element</div>
</vaadin-split-layout>