@spectrum-web-components/split-view v0.42.2
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.
28 days ago
28 days ago
1 month ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
5 months ago
9 months ago
6 months ago
9 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
10 months ago
9 months ago
9 months ago
7 months ago
7 months ago
9 months ago
6 months ago
7 months ago
7 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago