sp-split-view

NPM

1.0.0

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API Changelog

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

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)

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.