ExSDK splitter control for SAP UI5/Fiori applications.
ux7.control.ExSplittersap.ui.core.Control<ExSplitter /><VBox class="sapUiMediumMargin" width="100%">
<!-- 01 · Horizontal -->
<ux7:ExTitle text="01 · Horizontal split (default)" level="h3" variant="section" />
<ux7:ExSplitter orientation="horizontal" initialSize="50%" height="300px">
<ux7:firstPanel>
<ux7:ExCard title="Left Panel">
<ux7:ExText text="Drag the divider to resize panels." />
</ux7:ExCard>
</ux7:firstPanel>
<ux7:secondPanel>
<ux7:ExCard title="Right Panel">
<ux7:ExText text="Content on the right side." />
</ux7:ExCard>
</ux7:secondPanel>
</ux7:ExSplitter>
<!-- 02 · Vertical -->
<ux7:ExTitle text="02 · Vertical split" level="h3" variant="section" />
<ux7:ExSplitter orientation="vertical" initialSize="40%" height="350px">
<ux7:firstPanel>
<ux7:ExCard title="Top Panel">
<ux7:ExProgress value="72" variant="bar" label="Server load" />
</ux7:ExCard>
</ux7:firstPanel>
<ux7:secondPanel>
<ux7:ExCard title="Bottom Panel">
<ux7:ExText text="Logs or details area." />
</ux7:ExCard>
</ux7:secondPanel>
</ux7:ExSplitter>
<!-- 03 · initialSize + minSize -->
<ux7:ExTitle text="03 · initialSize 30% · minSize 150px" level="h3" variant="section" />
<ux7:ExSplitter orientation="horizontal" initialSize="30%" minSize="150px" height="250px">
<ux7:firstPanel>
<ux7:ExCard title="Sidebar">
<ux7:ExText text="Nav items here." />
</ux7:ExCard>
</ux7:firstPanel>
<ux7:secondPanel>
<ux7:ExCard title="Main Content">
<ux7:ExText text="Main content area." />
</ux7:ExCard>
</ux7:secondPanel>
</ux7:ExSplitter>
<!-- 04 · No divider -->
<ux7:ExTitle text="04 · showDivider false" level="h3" variant="section" />
<ux7:ExSplitter orientation="horizontal" showDivider="false" height="200px">
<ux7:firstPanel>
<ux7:ExCard title="Panel A">
<ux7:ExText text="No visible divider." />
</ux7:ExCard>
</ux7:firstPanel>
<ux7:secondPanel>
<ux7:ExCard title="Panel B">
<ux7:ExText text="No visible divider." />
</ux7:ExCard>
</ux7:secondPanel>
</ux7:ExSplitter>
</VBox>