ExSplitter

v1.0.0Layout

ExSDK splitter control for SAP UI5/Fiori applications.

Namespace
ux7.control.ExSplitter
Extends
sap.ui.core.Control
XML tag
<ExSplitter />
Quick Start
<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>