<template> <div> <Head> <Title>Vue Splitter Component</Title> <Meta name="description" content="Splitter is utilized to separate and resize panels." /> </Head> <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>