New to Kendo UI for Vue? Start a free 30-day trial
Splitter
Represents the Kendo UI for Vue Native Splitter component.
js
<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>
props Readonly<SplitterProps
The props of the Splitter component.