sp-divider

NPM 1.5.0

View Storybook

Try it on webcomponents.dev
Overview API Changelog

Description

sp-divider brings clarity to a layout by grouping and dividing content that exists in close proximity. It can also be used to establish rhythm and hierarchy.

Usage

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/divider

Import the side effectful registration of <sp-divider> via:

import '@spectrum-web-components/divider/sp-divider.js';

When looking to leverage the Divider base class as a type and/or for extension purposes, do so via:

import { Divider } from '@spectrum-web-components/divider';

Horizontal

Small 
<h2 class="spectrum-Heading spectrum-Heading--sizeXS">Small</h2>
<sp-divider size="s"></sp-divider>
<p class="spectrum-Body">
    Divide like-elements (tables, tool groups, elements within a panel, etc.)
</p>
 Medium 
<h2 class="spectrum-Heading spectrum-Heading--sizeS">Medium</h2>
<sp-divider size="m"></sp-divider>
<p class="spectrum-Body">
    Divide subsections, or divide different groups of elements (between panels,
    rails, etc.)
</p>
 Large 
<h2 class="spectrum-Heading spectrum-Heading--sizeM">Large</h2>
<sp-divider size="l"></sp-divider>
<p class="spectrum-Body">Page or Section Titles.</p>

Vertical

When a vertical Divider is used inside of a flex container, use align-self: stretch; height: auto; on the Divider.

Small 
<div style="height: 32px; display: flex;">
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
    <sp-divider
        size="s"
        style="align-self: stretch; height: auto;"
        vertical
    ></sp-divider>
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
</div>
 Medium 
<div style="height: 32px; display: flex;">
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
    <sp-divider
        size="m"
        style="align-self: stretch; height: auto;"
        vertical
    ></sp-divider>
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
</div>
 Large 
<div style="height: 32px; display: flex;">
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
    <sp-divider
        size="l"
        style="align-self: stretch; height: auto;"
        vertical
    ></sp-divider>
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
</div>

Patch Changes

  • #5271 165a904 Thanks @renovate! - Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

  • Updated dependencies []:

    • @spectrum-web-components/base@1.5.0

1.4.0

Patch Changes

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

1.3.0

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/divider

1.1.2 (2025-02-12)

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

1.1.1 (2025-01-29)

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

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/divider

1.0.0 (2024-10-31)

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

0.49.0 (2024-10-15)

Features

  • add static-color to replace static (#4808) (43cf086)

0.48.1 (2024-10-01)

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

0.48.0 (2024-09-17)

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

0.47.2 (2024-09-03)

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

0.47.1 (2024-08-27)

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

0.47.0 (2024-08-20)

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

0.46.0 (2024-08-08)

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

0.45.0 (2024-07-30)

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

0.44.0 (2024-07-15)

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

0.43.0 (2024-06-11)

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

0.42.5 (2024-05-24)

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

0.42.4 (2024-05-14)

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

0.42.3 (2024-05-01)

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

0.42.2 (2024-04-03)

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

0.42.1 (2024-04-02)

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

0.42.0 (2024-03-19)

Features

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

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

0.41.1 (2024-02-22)

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

0.41.0 (2024-02-13)

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

0.40.5 (2024-02-05)

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

0.40.4 (2024-01-29)

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

0.40.3 (2024-01-11)

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

0.40.2 (2023-12-18)

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

0.40.1 (2023-12-05)

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

0.40.0 (2023-11-16)

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

0.39.4 (2023-11-02)

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

0.39.3 (2023-10-18)

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

0.39.2 (2023-10-13)

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

0.39.1 (2023-10-06)

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

0.39.0 (2023-09-25)

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

0.38.0 (2023-09-05)

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

0.37.0 (2023-08-18)

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

0.36.0 (2023-08-18)

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

0.35.0 (2023-07-31)

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

0.34.0 (2023-07-11)

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

0.33.2 (2023-06-14)

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

0.33.0 (2023-06-08)

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

0.32.0 (2023-06-01)

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

0.31.0 (2023-05-17)

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

0.30.0 (2023-05-03)

Bug Fixes

  • divider: update a11y semantics (46e6a12)
  • expand sized functionality to support no default and returning to default values (acf3cfb)
  • update to latest spectrum-css packages (a5ca19f)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • divider: create sp-divider from sp-rule (ec26d81)
  • divider: use core tokens (e30c969)
  • include all Dev Mode files in side effects (f70817c)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • use latest exports specification (a7ecf4b)

0.6.9 (2023-04-24)

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

0.6.8 (2023-04-05)

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

0.6.7 (2023-03-22)

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

0.6.6 (2023-02-08)

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

0.6.5 (2023-01-23)

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

0.6.4 (2023-01-09)

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

0.6.3 (2022-12-08)

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

0.6.2 (2022-11-21)

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

0.6.1 (2022-11-14)

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

0.6.0 (2022-10-28)

Features

  • divider: use core tokens (e30c969)

0.5.1 (2022-08-24)

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

0.5.0 (2022-08-09)

Features

  • include all Dev Mode files in side effects (f70817c)

0.4.12 (2022-08-04)

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

0.4.11 (2022-07-18)

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

0.4.10 (2022-06-29)

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

0.4.9 (2022-06-07)

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

0.4.8 (2022-05-27)

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

0.4.7 (2022-05-12)

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

0.4.6 (2022-04-21)

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

0.4.5 (2022-03-08)

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

0.4.4 (2022-03-04)

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

0.4.3 (2022-02-22)

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

0.4.2 (2022-01-26)

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

0.4.1 (2021-12-13)

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

0.4.0 (2021-11-08)

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

0.3.1 (2021-11-08)

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

0.3.0 (2021-11-02)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.2.8 (2021-09-20)

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

0.2.7 (2021-07-22)

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

0.2.6 (2021-06-16)

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

0.2.5 (2021-05-12)

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

0.2.4 (2021-04-09)

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

0.2.3 (2021-03-29)

Bug Fixes

  • divider: update a11y semantics (46e6a12)

0.2.2 (2021-03-22)

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

0.2.1 (2021-03-05)

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

0.2.0 (2021-03-04)

Features

  • use latest exports specification (a7ecf4b)

0.1.1 (2021-02-11)

Bug Fixes

  • expand sized functionality to support no default and returning to default values (acf3cfb)
  • update to latest spectrum-css packages (a5ca19f)

0.1.0 (2021-02-02)

Features

  • divider: create sp-divider from sp-rule (ec26d81)

Attributes and Properties

Property Attribute Type Default Description vertical vertical boolean false