Version:

Install ​

shell
npm i @mate-vue/split-layout

Import ​

vue
<script setup>
import { MateSplitLayout, MateSplitLayoutHeader } from '@mate-vue/split-layout';
</script>

Variants ​

Single ​

vue
<template>
  <div style="display: flex; width: 800px; height: 400px;">
    <div class="mate-scrollable-content">
      <h4>Main content</h4>
      <MateButton @click="openSplitPanel">Open right assist</MateButton>
    </div>
    <MateSplitLayout ref="split">
      <MateSplitLayoutHeader title-text="Details"></MateSplitLayoutHeader>
      <div class="mate-scrollable-content">
        Detail content goes here.
      </div>
    </MateSplitLayout>
  </div>
</template>