Version:

Install ​

shell
npm i @mate-react/split-layout

Import ​

tsx
import { MateSplitLayout, MateSplitLayoutRight, MateSplitLayoutHeader } from '@mate-react/split-layout';
import { MateButton } from '@mate-react/button';

Variants ​

Default ​

tsx
<MateSplitLayout style={{ width: '100%', height: '600px', display: 'flex' }}>
  <div>
    <h4>Main content</h4>
    <MateButton onClick={() => setOpened(true)}>Open right assist</MateButton>
  </div>
  <MateSplitLayoutRight opened={opened} onOpenedChanged={e => setOpened(e.detail.value)}>
    <MateSplitLayoutHeader titleText="Right panel title" />
    <p>Right panel content</p>
    <div slot="footer">
      <MateButton onClick={() => setOpened(false)}>Abbrechen</MateButton>
      <MateButton theme="primary" onClick={() => setOpened(false)}>Speichern</MateButton>
    </div>
  </MateSplitLayoutRight>
</MateSplitLayout>