<a href="/wiki/display/CPDesign/Responsive+Splitter">Responsive Splitter</a>

Created by Milanov, Kalin, last modified on Nov 15, 2023

Overview

The Responsive Splitter Layout structures complex application content into defined areas. The areas are resizable manually and programmatically by external triggers such as buttons or menu entries. The split panes and their parent containers are parts of the splitter and have properties that can be changed to meet the application’s needs.

FIORITECHP1-27787 - Getting issue details... STATUS

Look and Feel

<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/layouts/layouts/responsive-splitter/media1_110a24f9a2985128c37b86fc2a513300e67f49f56.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_110a24f9a2985128c37b86fc2a513300e67f49f56.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_110a24f9a2985128c37b86fc2a513300e67f49f56.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/layouts/layouts/responsive-splitter/media%5C_110a24f9a2985128c37b86fc2a513300e67f49f56.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/layouts/layouts/responsive-splitter/media_110a24f9a2985128c37b86fc2a513300e67f49f56.png?width=750&format=png&optimize=medium</a>" width="2880" height="1800"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/layouts/layouts/responsive-splitter/media1_1dd69b75f30030990077f28b7b544d2af82dd49b9.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1dd69b75f30030990077f28b7b544d2af82dd49b9.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1dd69b75f30030990077f28b7b544d2af82dd49b9.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/layouts/layouts/responsive-splitter/media%5C_1dd69b75f30030990077f28b7b544d2af82dd49b9.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/layouts/layouts/responsive-splitter/media_1dd69b75f30030990077f28b7b544d2af82dd49b9.png?width=750&format=png&optimize=medium</a>" width="2880" height="1800"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/layouts/layouts/responsive-splitter/media1_1e0e52afb17978d979f916c8d509bc167d4843b4a.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1e0e52afb17978d979f916c8d509bc167d4843b4a.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1e0e52afb17978d979f916c8d509bc167d4843b4a.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/layouts/layouts/responsive-splitter/media%5C_1e0e52afb17978d979f916c8d509bc167d4843b4a.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/layouts/layouts/responsive-splitter/media_1e0e52afb17978d979f916c8d509bc167d4843b4a.png?width=750&format=png&optimize=medium</a>" width="2880" height="1800"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/layouts/layouts/responsive-splitter/media1_1a3e5556ce0e9b5fcf18134f89e0d6ced9d94f177.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1a3e5556ce0e9b5fcf18134f89e0d6ced9d94f177.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1a3e5556ce0e9b5fcf18134f89e0d6ced9d94f177.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/layouts/layouts/responsive-splitter/media%5C_1a3e5556ce0e9b5fcf18134f89e0d6ced9d94f177.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/layouts/layouts/responsive-splitter/media_1a3e5556ce0e9b5fcf18134f89e0d6ced9d94f177.png?width=750&format=png&optimize=medium</a>" width="2880" height="1800"> </picture> </div> </div></p>

Anatomy

<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div><strong><br></strong></div> <div><strong>Responsive Splitter</strong></div> <div>The top-level responsive splitter container. Defines the dimensions of the splitter and the default Split Pane.</div> </div> <div> <div><strong><div class="content-wrapper"></div></strong></div> <div><strong>Pane Container</strong></div> <div>A container that hosts Split Panes and other Pane Containers. Defines the orientation of the splitter.</div> </div> <div> <div><strong><div class="content-wrapper"><p class="auto-cursor-target">A</p></div></strong></div> <div><strong>Split Pane</strong></div> <div>An independent container that may interact with other panes or pane containers. Holds the Pagination Bar when off-canvas panes are available.</div> </div> <div> <div><strong><div class="content-wrapper"><p class="auto-cursor-target">B</p></div></strong></div> <div><strong>Grip</strong></div> <div>The component that allows resizing of panes and pane containers.</div> </div> <div> <div><strong><div class="content-wrapper"><p class="auto-cursor-target">C</p></div></strong></div> <div><strong>Pagination Bar</strong></div> <div>The bar allows reaching off-canvas panes. Appears in the last pane in order of responsiveness. See the <a href="https%3A%2F%2Fbtpx.frontify.com%2Fdocument%2F223122%23%2Flayouts%2Fresponsive-splitter%2Fresponsiveness">Interaction Specification</a> for details.</div> </div>

Desktop Specification

Component Variables

--sapSplitPane_Shadow1

<div> <div><strong><p>Morning Horizon</p></strong></div> <div>box-shadow: 0 0 0.125rem 0 fade(@sapContent_ShadowColor,16), 0 0.5rem 1rem 0 fade(@sapContent_ShadowColor, 16);</div> </div> <div> <div><strong>Evening Horizon</strong></div> <div>box-shadow: 0 0 0.125rem 0 fade(@sapContent_ShadowColor,16), 0 0.5rem 1rem 0 fade(@sapContent_ShadowColor, 32);</div> </div> <div> <div><strong>Horizon HCB</strong></div> <div>box-shadow: 0 0 0 0.0625rem @sapContent_ShadowColor, 0 0.5rem 1rem 0 fade(@sapContent_ShadowColor, 16);</div> </div> <div> <div><strong>Horizon HCW</strong></div> <div>box-shadow: 0 0 0 0.0625rem @sapContent_ShadowColor, 0 0.5rem 1rem 0 fade(@sapContent_ShadowColor, 16);</div> </div>

Split Pane

<div> <div></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div><strong>A1</strong></div> <div><strong>Split Pane</strong></div> <div> <p>box-shadow: var(–sapSplitPane_Shadow1);<br>border-radius: 0.5rem 0.5rem 0 0; <strong>(except on all horizontal anes but the last one)</strong></p> <p><strong>Background Design</strong><br>transparent: transparent; box-shadow: none; <strong>← Default</strong><br>translucent: var(--sapBackgroundColor);<br>solid: var(--sapGroup_ContentBackground);</p> </div> </div> <div> <div><strong>A2</strong></div> <div><strong>Pagination Bar Container</strong></div> <div>width: 100%;<br>height: 1.625rem;<br>position: bottom;<br>content alignment: center;</div> </div>

Grip

<div> <div></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div><strong><br></strong></div> <div><strong>Grip</strong></div> <div> <p>border-radius: 0.5rem;</p> <p><strong>Horizontal Grip</strong><br>width: 100% (of pane container)<br>height: 0.5rem;<br>cursor: row-resize;</p> <p><strong>Vertical Grip</strong><br>height: 100% (of pane container)<br>width: 0.5rem;<br>cursor: col-resize;</p> <p><strong>Background Design</strong><br>transparent: transparent; <strong>← Default</strong><br>translucent: var(--sapGroup_ContentBackground);<br>solid: var(--sapContent_ForegroundColor);</p> </div> <div>border: solid 0.0625rem var(--sapGroup_ContentBorderColor);</div> </div> <div> <div><strong>B1</strong></div> <div><strong>Grip Handle</strong></div> <div> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNested%2BButton">Nested Button</a> for full specifications.</p> <p><strong>Icons</strong><br>sap-icon://horizontal-grip<br>sap-icon://vertical-grip</p> </div> </div> <div> <div><strong>B2</strong></div> <div><strong>Grip Decoration</strong></div> <div> <p><strong>Horizontal Decoration</strong><br>height: 0.0625 rem;<br>width: 4 rem;<br>border-radius: 0.125rem;<br>background-image: linear-gradient (to left, var(--sapGroup_TitleBorderColor), transparent); <strong>← Left</strong> background-image: linear-gradient (to right, var(–sapGroup_TitleBorderColor), transparent) <strong>← Right</strong></p> <p><strong>Active State (all decorations)</strong> background: var(–sapGroup_TitleBorderColor);<br>width: 100%;</p> <p><strong>Focused State</strong> background-image: linear-gradient (to left, var(--sapContent_FocusColor), transparent); <strong>← Left</strong> background-image: linear-gradient (to right, var(–sapContent_FocusColor), transparent) <strong>← Right</strong></p> </div> </div> <div> <div> <p><strong>Vertical Decoration</strong><br>width: 0.0625 rem;<br>height: 4 rem;<br>border-radius: 0.125rem;<br>background-image: linear-gradient (to top, var(--sapGroup_TitleBorderColor), transparent); <strong>← Top</strong><br>background-image: linear-gradient (to bottom, var(--sapGroup_TitleBorderColor), transparent); <strong>← Bottom</strong></p> <p><strong>Active State (all decorations)</strong> background: var(–sapGroup_TitleBorderColor);<br>height: 100%;</p> <p><strong>Focused State</strong> background-image: linear-gradient (to top, var(--sapContent_FocusColor), transparent); <strong>← Left</strong> background-image: linear-gradient (to bottom, var(–sapContent_FocusColor), transparent) <strong>← Right</strong></p> </div> </div>

Pagination Bar

<div> <div></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div><strong><br></strong></div> <div><strong>Pagination Bar</strong></div> <div>width: auto;<br>height: auto;<br>spacing: 0;</div> </div> <div> <div><strong>C1</strong></div> <div><strong>Current Page Button</strong></div> <div> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNested%2BButton">Nested Button</a> for full specifications.</p> <p>icon: sap-icon://SAP-icons-TNT/indicator-active</p> </div> </div> <div> <div><strong>C2</strong></div> <div><strong>Page Button</strong></div> <div> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNested%2BButton">Nested Button</a> for full specifications.</p> <p>icon: sap-icon://SAP-icons-TNT/indicator</p> </div> </div>

Tablet Specification

Tablet specification depicts only deltas from the desktop specification.

<div> <div></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div><strong><br></strong></div> <div><strong><span style="color: rgb(34,53,72);text-decoration: none;">Responsive Splitter</span></strong></div> <div>No deltas.</div> </div> <div> <div><strong><br></strong></div> <div><strong>Split Container</strong></div> <div>No deltas.</div> </div> <div> <div><strong>A</strong></div> <div><strong><span style="color: rgb(34,53,72);text-decoration: none;">Split Pane</span></strong></div> <div>border-radius: 0.5rem; // Valid for all panes.</div> </div> <div> <div><strong>B</strong></div> <div><strong><span style="color: rgb(34,53,72);text-decoration: none;">Grip</span></strong></div> <div>No deltas. // Grip Handle moves to tablet size.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Pagination Bar</strong></div> <div>No deltas. // Page Button moves to tablet size.</div> </div>

Phone Specification

Phone specification depicts only deltas from the tablet specification.

<div> <div></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div><strong><br></strong></div> <div><strong><span style="color: rgb(34,53,72);text-decoration: none;">Responsive Splitter</span></strong></div> <div>No deltas.</div> </div> <div> <div><strong><br></strong></div> <div><strong>Split Container</strong></div> <div>No deltas.</div> </div> <div> <div><strong>A</strong></div> <div><strong><span style="color: rgb(34,53,72);text-decoration: none;">Split Pane</span></strong></div> <div>border-radius: 0.25rem; // Valid for all panes.</div> </div> <div> <div><strong>B</strong></div> <div><strong><span style="color: rgb(34,53,72);text-decoration: none;">Grip</span></strong></div> <div>No deltas. // Grip Handle moves to tablet size.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Pagination Bar</strong></div> <div>No deltas. // Page Button moves to tablet size.</div> </div>