sp-divider

NPM

0.44.0

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API Changelog

Attributes and Properties #

Property Attribute Type Default Description vertical vertical boolean false

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)

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>