sp-split-view
NPM
1.0.0
Storybook
View Storybook
Try it on
webcomponents.dev
1.0.0 (2024-10-31) #
Note: Version bump only for package @spectrum-web-components/split-view
0.49.0 (2024-10-15) #
Note: Version bump only for package @spectrum-web-components/split-view
0.48.1 (2024-10-01) #
Note: Version bump only for package @spectrum-web-components/split-view
0.48.0 (2024-09-17) #
Note: Version bump only for package @spectrum-web-components/split-view
0.47.2 (2024-09-03) #
Note: Version bump only for package @spectrum-web-components/split-view
0.47.1 (2024-08-27) #
Note: Version bump only for package @spectrum-web-components/split-view
0.47.0 (2024-08-20) #
Note: Version bump only for package @spectrum-web-components/split-view
0.46.0 (2024-08-08) #
Note: Version bump only for package @spectrum-web-components/split-view
0.45.0 (2024-07-30) #
Note: Version bump only for package @spectrum-web-components/split-view
0.44.0 (2024-07-15) #
Note: Version bump only for package @spectrum-web-components/split-view
0.43.0 (2024-06-11) #
Note: Version bump only for package @spectrum-web-components/split-view
0.42.5 (2024-05-24) #
Note: Version bump only for package @spectrum-web-components/split-view
0.42.4 (2024-05-14) #
Note: Version bump only for package @spectrum-web-components/split-view
0.42.3 (2024-05-01) #
Note: Version bump only for package @spectrum-web-components/split-view
0.42.2 (2024-04-03) #
Note: Version bump only for package @spectrum-web-components/split-view
0.42.1 (2024-04-02) #
Note: Version bump only for package @spectrum-web-components/split-view
0.42.0 (2024-03-19) #
Bug Fixes #
- allowing split view to have a custom aria label (
#4155 ) (d9abed7 )
Features #
- asset: use core tokens (
99e76f4 )
0.41.2 (2024-03-05) #
Note: Version bump only for package @spectrum-web-components/split-view
0.41.1 (2024-02-22) #
Note: Version bump only for package @spectrum-web-components/split-view
0.41.0 (2024-02-13) #
Bug Fixes #
- support generating random IDs outside of secure contexts (
485a67c )
0.40.5 (2024-02-05) #
Note: Version bump only for package @spectrum-web-components/split-view
0.40.4 (2024-01-29) #
Note: Version bump only for package @spectrum-web-components/split-view
0.40.3 (2024-01-11) #
Note: Version bump only for package @spectrum-web-components/split-view
0.40.2 (2023-12-18) #
Note: Version bump only for package @spectrum-web-components/split-view
0.40.1 (2023-12-05) #
Note: Version bump only for package @spectrum-web-components/split-view
0.40.0 (2023-11-16) #
Bug Fixes #
- split-view: expand accessible attribute usage and HCM delivery (
cb7c71f )
0.39.4 (2023-11-02) #
Note: Version bump only for package @spectrum-web-components/split-view
0.39.3 (2023-10-18) #
Note: Version bump only for package @spectrum-web-components/split-view
0.39.2 (2023-10-13) #
Note: Version bump only for package @spectrum-web-components/split-view
0.39.1 (2023-10-06) #
Note: Version bump only for package @spectrum-web-components/split-view
0.39.0 (2023-09-25) #
Note: Version bump only for package @spectrum-web-components/split-view
0.38.0 (2023-09-05) #
Note: Version bump only for package @spectrum-web-components/split-view
0.37.0 (2023-08-18) #
Note: Version bump only for package @spectrum-web-components/split-view
0.36.0 (2023-08-18) #
Note: Version bump only for package @spectrum-web-components/split-view
0.35.0 (2023-07-31) #
Note: Version bump only for package @spectrum-web-components/split-view
0.34.0 (2023-07-11) #
Note: Version bump only for package @spectrum-web-components/split-view
0.33.2 (2023-06-14) #
Note: Version bump only for package @spectrum-web-components/split-view
0.33.0 (2023-06-08) #
Note: Version bump only for package @spectrum-web-components/split-view
0.32.0 (2023-06-01) #
Bug Fixes #
- base: ensure streaming listener "streams" on the animation frame (
1478db1 )
0.31.0 (2023-05-17) #
Note: Version bump only for package @spectrum-web-components/split-view
0.30.0 (2023-05-03) #
Bug Fixes #
- 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 )
Features #
- 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 )
Reverts #
- version update (
ab58bf9 )
0.5.10 (2023-04-24) #
Note: Version bump only for package @spectrum-web-components/split-view
0.5.9 (2023-04-05) #
Note: Version bump only for package @spectrum-web-components/split-view
0.5.8 (2023-03-22) #
Note: Version bump only for package @spectrum-web-components/split-view
0.5.7 (2023-02-08) #
Note: Version bump only for package @spectrum-web-components/split-view
0.5.6 (2023-01-23) #
Note: Version bump only for package @spectrum-web-components/split-view
0.5.5 (2023-01-09) #
Note: Version bump only for package @spectrum-web-components/split-view
0.5.4 (2022-12-08) #
Note: Version bump only for package @spectrum-web-components/split-view
0.5.3 (2022-11-21) #
Note: Version bump only for package @spectrum-web-components/split-view
0.5.2 (2022-11-14) #
Note: Version bump only for package @spectrum-web-components/split-view
0.5.1 (2022-10-28) #
Bug Fixes #
- split-view: prevent touch-action on handle for delivery in mobile (
b68c497 )
0.5.0 (2022-08-09) #
Features #
- include all Dev Mode files in side effects (
f70817c )
0.4.11 (2022-08-04) #
Note: Version bump only for package @spectrum-web-components/split-view
0.4.10 (2022-07-18) #
Note: Version bump only for package @spectrum-web-components/split-view
0.4.9 (2022-06-29) #
Note: Version bump only for package @spectrum-web-components/split-view
0.4.8 (2022-06-07) #
Note: Version bump only for package @spectrum-web-components/split-view
0.4.7 (2022-05-12) #
Note: Version bump only for package @spectrum-web-components/split-view
0.4.6 (2022-04-21) #
Note: Version bump only for package @spectrum-web-components/split-view
0.4.5 (2022-03-08) #
Note: Version bump only for package @spectrum-web-components/split-view
0.4.4 (2022-03-04) #
Note: Version bump only for package @spectrum-web-components/split-view
0.4.3 (2022-02-22) #
Bug Fixes #
- split-view: end drag on pointerleave (
85e5258 )
0.4.2 (2022-01-26) #
Note: Version bump only for package @spectrum-web-components/split-view
0.4.1 (2021-12-13) #
Note: Version bump only for package @spectrum-web-components/split-view
0.4.0 (2021-11-08) #
Features #
- update lit-* dependencies, wip (
377f3c8 )
0.3.1 (2021-11-08) #
Note: Version bump only for package @spectrum-web-components/split-view
0.3.0 (2021-11-02) #
Features #
- adopt DNA@7 base Spectrum CSS (
e08cafd )
0.2.11 (2021-10-12) #
Note: Version bump only for package @spectrum-web-components/split-view
0.2.10 (2021-09-20) #
Note: Version bump only for package @spectrum-web-components/split-view
0.2.9 (2021-08-24) #
Bug Fixes #
- correct
@element jsDoc listing across library (c97a632 )
0.2.8 (2021-07-22) #
Bug Fixes #
- split-view: redraw when primary-size change (
665d238 )
0.2.7 (2021-06-16) #
Note: Version bump only for package @spectrum-web-components/split-view
0.2.6 (2021-06-07) #
Note: Version bump only for package @spectrum-web-components/split-view
0.2.5 (2021-05-12) #
Note: Version bump only for package @spectrum-web-components/split-view
0.2.4 (2021-04-09) #
Note: Version bump only for package @spectrum-web-components/split-view
0.2.3 (2021-03-29) #
Note: Version bump only for package @spectrum-web-components/split-view
0.2.2 (2021-03-22) #
Note: Version bump only for package @spectrum-web-components/split-view
0.2.1 (2021-03-05) #
Note: Version bump only for package @spectrum-web-components/split-view
0.2.0 (2021-03-04) #
Bug Fixes #
- correct calculation of height when using primary-size='auto' (
0ff67c0 )
Features #
- use latest exports specification (
a7ecf4b )
Reverts #
- version update (
ab58bf9 )
0.1.0 (2021-02-19) #
Bug Fixes #
- 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 )
Features #
- setup SplitView component from rebase main (
32f3272 )
Attributes and Properties #
collapsible
collapsible
boolean
false
label
label
string | undefined
primaryMax
primary-max
DEFAULT_MAX_SIZE
primaryMin
primary-min
number
0
primarySize
primary-size
number | number
primarySize
primarySize
number | number
resizable
resizable
boolean
false
secondaryMax
secondary-max
DEFAULT_MAX_SIZE
secondaryMin
secondary-min
number
0
splitterPos
splitter-pos
number | undefined
vertical
vertical
boolean
false
Slots #
Two
Events #
change
Event
Announces the new position of the splitter
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 #
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" 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>
Horizontal Resizable & Collapsible #
<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>
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" 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>
Vertical Resizable & Collapsible #
<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>
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>
Accessibility #
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.