sp-split-view

NPM 1.3.0

View Storybook

Try it on webcomponents.dev
Overview API Changelog

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"
    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.

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.2.0 (2025-02-27)

Note: Version bump only for package @spectrum-web-components/split-view

1.1.2 (2025-02-12)

Note: Version bump only for package @spectrum-web-components/split-view

1.1.1 (2025-01-29)

Note: Version bump only for package @spectrum-web-components/split-view

1.1.0 (2025-01-29)

Bug Fixes

  • lock prerelease versions for Spectrum CSS (#5014) (8aa7734)

1.0.1 (2024-11-11)

Note: Version bump only for package @spectrum-web-components/split-view

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

Property Attribute Type Default Description collapsible collapsible boolean false 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

Slots

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

Events

Name Type Description change Event Announces the new position of the splitter