2022-09-09 20:41:18 +00:00
|
|
|
<template>
|
|
|
|
|
<div>
|
2022-12-19 11:57:07 +00:00
|
|
|
<Head>
|
|
|
|
|
<Title>Vue Splitter Component</Title>
|
|
|
|
|
<Meta name="description" content="Splitter is utilized to separate and resize panels." />
|
|
|
|
|
</Head>
|
|
|
|
|
|
2022-09-09 20:41:18 +00:00
|
|
|
<div class="content-section introduction">
|
|
|
|
|
<div class="feature-intro">
|
|
|
|
|
<h1>Splitter</h1>
|
|
|
|
|
<p>Splitter is utilized to separate and resize panels.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<AppDemoActions />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="content-section implementation">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Horizontal</h5>
|
|
|
|
|
<Splitter style="height: 300px" class="mb-5">
|
|
|
|
|
<SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
|
|
|
|
|
<SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
|
|
|
|
|
</Splitter>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Vertical</h5>
|
|
|
|
|
<Splitter style="height: 300px" layout="vertical">
|
|
|
|
|
<SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
|
|
|
|
|
<SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
|
|
|
|
|
</Splitter>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Nested</h5>
|
|
|
|
|
<Splitter style="height: 300px">
|
|
|
|
|
<SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
|
|
|
|
|
<SplitterPanel :size="80">
|
|
|
|
|
<Splitter layout="vertical">
|
|
|
|
|
<SplitterPanel class="flex align-items-center justify-content-center" :size="15"> Panel 2 </SplitterPanel>
|
|
|
|
|
<SplitterPanel :size="85">
|
|
|
|
|
<Splitter>
|
|
|
|
|
<SplitterPanel class="flex align-items-center justify-content-center" :size="20"> Panel 3 </SplitterPanel>
|
|
|
|
|
<SplitterPanel class="flex align-items-center justify-content-center" :size="80"> Panel 4 </SplitterPanel>
|
|
|
|
|
</Splitter>
|
|
|
|
|
</SplitterPanel>
|
|
|
|
|
</Splitter>
|
|
|
|
|
</SplitterPanel>
|
|
|
|
|
</Splitter>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<SplitterDoc />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import SplitterDoc from './SplitterDoc';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
SplitterDoc: SplitterDoc
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
