Splitter

Copy Code<template>
  <Splitter
    :style="{ height: '340px' }"
    :panes="panes"
    :orientation="'vertical'"
    @change="onChange"
  >
    <template v-slot:first>
      <div class="pane-content">
        <h3>Top Pane</h3>
      </div>
    </template>
    <template v-slot:second>
      <div class="pane-content">
        <h3>Bottom Pane</h3>
      </div>
    </template>
  </Splitter>
</template>

<script>
import { Splitter } from '@progress/kendo-vue-layout';
import './styles.css';

export default {
  components: {
    Splitter,
  },
  data() {
    return {
      panes: [
        { size: '40%', containsSplitter: true, content: 'first' },
        { content: 'second' },
      ],
    };
  },
  methods: {
    onChange(event) {
      this.panes = event.newState;
    },
  },
};
</script>