@spectrum-web-components/divider v0.42.2
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
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
<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>
<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>
<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.
<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>
<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>
<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>
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
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
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