sp-split-view

Examples API

Attributes and Properties #

Property Attribute Type Default Description
collapsible collapsible boolean false
dir dir 'ltr' | 'rtl' 'ltr'
label label string | undefined
primaryMax primary-max DEFAULT_MAX_SIZE The maximum size of the primary pane
primaryMin primary-min number 0 The minimum size of the primary pane
primarySize primary-size number | number + "px" | number + "%" | "auto"}
primarySize primarySize number | number + "px" | number + "%" | "auto"}
resizable resizable boolean false
secondaryMax secondary-max DEFAULT_MAX_SIZE The maximum size of the secondary pane
secondaryMin secondary-min number 0 The minimum size of the secondary pane
splitterPos splitter-pos number | undefined The current splitter position of split-view
vertical vertical boolean false
viewSize viewSize number 0

Slots #

Name Description
Two sibling elements to be sized by the element attritubes

CSS Custom Properties #

Name Default
--spectrum-alias-focus-color var(--spectrum-global-color-blue-400)
--spectrum-dragbar-gripper-border-radius var(--spectrum-alias-border-radius-small)
--spectrum-dragbar-gripper-border-width-horizontal 3px
--spectrum-dragbar-gripper-border-width-vertical 4px
--spectrum-dragbar-gripper-height var(--spectrum-global-dimension-static-size-200)
--spectrum-dragbar-gripper-width var(--spectrum-global-dimension-static-size-50)
--spectrum-dragbar-handle-background-color var(--spectrum-global-color-gray-300)
--spectrum-dragbar-handle-background-color-down var(--spectrum-global-color-gray-800)
--spectrum-dragbar-handle-background-color-hover var(--spectrum-global-color-gray-400)
--spectrum-dragbar-handle-width var(--spectrum-global-dimension-static-size-25)
--spectrum-panel-s-background-color var(--spectrum-alias-toolbar-background-color)

Description #

An sp-split-view element delivers its first two direct child elements in a horizontal or vertical (<sp-split-view vertical>) orientation that distributes the available page real estate as per the supplied attribute API. When leveraging the resizable attribute a pointer and keyboard accessible affordance is provided for the user to customize the distribution of that area between the available children.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/split-view

Import the side effectful registration of <sp-split-view> via:

import '@spectrum-web-components/split-view/sp-split-view.js';

When looking to leverage the SplitView base class as a type and/or for extension purposes, do so via:

import { SplitView } from '@spectrum-web-components/split-view';

Variants #

Horizontal #

<sp-split-view>
<div>Left panel</div>
<div>Right panel</div>
</sp-split-view>

Horizontal Resizable #

<sp-split-view resizable primary-min="50" secondary-min="50" primary-size="100">
<div>
<h1>Left panel</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
<div>
<h2>Right panel</h2>
<p>
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout.
</p>
</div>
</sp-split-view>

Horizontal Resizable & Collapsible #

<sp-split-view resizable>
<div>
<h1>Left panel</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
<div>
<h2>Right panel</h2>
<p>
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout.
</p>
</div>
</sp-split-view>

Vertical #

<sp-split-view vertical>
<div>Top panel</div>
<div>Bottom panel</div>
</sp-split-view>

Vertical Resizable #

<sp-split-view
vertical
resizable
primary-min="50"
primary-max="150"
secondary-min="50"
>

<div>
<h1>Top panel</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
<div>
<h2>Bottom panel</h2>
<p>
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout.
</p>
</div>
</sp-split-view>

Vertical Resizable & Collapsible #

<sp-split-view vertical resizable style="height: 300px;">
<div>
<h1>Top panel</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
<div>
<h2>Bottom panel</h2>
<p>
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout.
</p>
</div>
</sp-split-view>

Multiple Levels #

<sp-split-view
resizable
primary-min="50"
primary-max="200"
secondary-min="50"
style="height: 400px; width: 600px;"
>

<div>
<h1>First panel - Level 1</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book.
</p>
</div>
<div>
<h2>Second panel - Level 1</h2>
<sp-split-view
vertical
resizable
primary-min="50"
primary-size="100"
secondary-min="50"
style="height: 300px;"
>

<div>
<h3>First panel - Level 2</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</p>
</div>
<div>
<h4>Second panel - Level 2</h4>
<p>
It is a long established fact that a reader will be
distracted by the readable content of a page when looking at
its layout.
</p>
</div>
</sp-split-view>
</div>
</sp-split-view>