Install

npm i @vaadin/split-layout
npm i @mate/split-layout-addons

Import

import '@vaadin/split-layout';
import '@mate/split-layout-addons';

Variants

Single

 <vaadin-split-layout style="width: 800px; height: 800px; display: flex">
    <vaadin-scroller style="display: flex; flex-direction: column; overflow: hidden auto;">
        <p>Scrollable content</p>
    </vaadin-scroller>
    <mate-split-layout-right>
        <mate-split-layout-header title-text="This is the only right assisting content"></mate-split-layout-header>
        <vaadin-scroller style="display: flex; flex-direction: column;">
            <p>Scrollable content</p>
        </vaadin-scroller>
        <vaadin-horizontal-layout theme="split-layout-footer">
            <vaadin-button>Abbrechen</vaadin-button>
            <vaadin-button theme="danger">Löschen</vaadin-button>
            <vaadin-button theme="primary" @click="closeClick">Speichern</vaadin-button>
        </vaadin-horizontal-layout>
    </mate-split-layout-right>
</vaadin-split-layout>

Tabbed

 <vaadin-split-layout style="width: 800px; height: 800px; display: flex">
    <vaadin-scroller style="display: flex; flex-direction: column; overflow: hidden auto;">
        <p>Scrollable content</p>
    </vaadin-scroller>
    <mate-split-layout-right>
    </mate-split-layout-right>
</vaadin-split-layout>

const tabs = [
    { name: 'Test 1', icon: 'mail' },
    { name: 'Test 2', icon: 'note' },
];
document.querySelector('mate-split-layout-right').tabs = tabs;
document.querySelector('mate-split-layout-right').hintTabs = [ tabs[1] ];
document.querySelector('mate-split-layout-right').iconRenderer = (root, split, model) => {
    render(html`<span theme="icon">${model.item.icon}</span>`, root);
}
this.$refs.tabs.renderer = (root, split, model) => root.innerHtml = `
    <mate-split-layout-header title-text="${model.item.name}"></mate-split-layout-header>
    <vaadin-scroller>
      <p>Scrollable content</p>
    </vaadin-scroller>
    <vaadin-horizontal-layout theme="split-layout-footer">
      <vaadin-button>Abbrechen</vaadin-button>
      <vaadin-button theme="danger">Löschen</vaadin-button>
      <vaadin-button theme="primary">Speichern</vaadin-button>
    </mate-split-layout-footer>
`;