Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
- allowing split view to have a custom aria label (#4155) (d9abed7)
- asset: use core tokens (99e76f4)
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
- support generating random IDs outside of secure contexts (485a67c)
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
- split-view: expand accessible attribute usage and HCM delivery (cb7c71f)
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
- base: ensure streaming listener "streams" on the animation frame (1478db1)
Note: Version bump only for package @spectrum-web-components/split-view
- adapt and improve css (649eeed)
- adapt tests (88a2ff7)
- add @slot description (03019d6)
- cleaning up spectrum-config (0fde625)
- correct @element jsDoc listing across library (c97a632)
- correct calculation of height when using primary-size='auto' (0ff67c0)
- correct viewSize calc and test (2befdd5)
- improve css class handling, %-test and increase base dependency (2f2c28d)
- improve css, simplify attributes & properties (6ddd47c)
- polishing (d112875)
- split-view: end drag on pointerleave (85e5258)
- split-view: prevent touch-action on handle for delivery in mobile (b68c497)
- split-view: redraw when primary-size change (665d238)
- adopt DNA@7 base Spectrum CSS (e08cafd)
- include all Dev Mode files in side effects (f70817c)
- setup SplitView component from rebase main (32f3272)
- shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
- update lit-* dependencies, wip (377f3c8)
- use latest exports specification (a7ecf4b)
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
- split-view: prevent touch-action on handle for delivery in mobile (b68c497)
- include all Dev Mode files in side effects (f70817c)
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
- split-view: end drag on pointerleave (85e5258)
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
- update lit-* dependencies, wip (377f3c8)
Note: Version bump only for package @spectrum-web-components/split-view
- adopt DNA@7 base Spectrum CSS (e08cafd)
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
- correct @element jsDoc listing across library (c97a632)
- split-view: redraw when primary-size change (665d238)
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
Note: Version bump only for package @spectrum-web-components/split-view
- correct calculation of height when using primary-size='auto' (0ff67c0)
- use latest exports specification (a7ecf4b)
- adapt and improve css (649eeed)
- adapt tests (88a2ff7)
- add @slot description (03019d6)
- cleaning up spectrum-config (0fde625)
- correct viewSize calc and test (2befdd5)
- improve css class handling, %-test and increase base dependency (2f2c28d)
- improve css, simplify attributes & properties (6ddd47c)
- polishing (d112875)
- setup SplitView component from rebase main (32f3272)
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.
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';
<sp-split-view>
<div>Left panel</div>
<div>Right panel</div>
</sp-split-view>
<sp-split-view
resizable
primary-min="50"
secondary-min="50"
primary-size="100"
label="Resize the horizontal panels"
>
<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>
<sp-split-view resizable label="Resize the horizontal collapsible panels">
<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>
<sp-split-view vertical>
<div>Top panel</div>
<div>Bottom panel</div>
</sp-split-view>
<sp-split-view
vertical
resizable
primary-min="50"
primary-max="150"
secondary-min="50"
label="Resize the vertical panels"
>
<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>
<sp-split-view
vertical
resizable
style="height: 300px;"
label="Resize the vertical collapsible panels"
>
<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>
<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>
By default, the "separator" element within an <sp-split-view>
is given the label "Resize the panels". A label is required to surface the interaction correctly to screen readers. You can customize or internationalize this with the label
attribute.