0.5.1 • Published 3 years ago
@spectrum-web-components/rule v0.5.1
Description
sp-rule
bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.
Usage
yarn add @spectrum-web-components/rule
Import the side effectful registration of <sp-rule>
via:
import '@spectrum-web-components/rule/sp-rule.js';
When looking to leverage the Rule
base class as a type and/or for extension purposes, do so via:
import { Rule } from '@spectrum-web-components/rule';
Horizontal
Sizes
<h2 class="spectrum-Heading spectrum-Heading--sizeXS">Large</h2>
<sp-rule size="s"></sp-rule>
<p class="spectrum-Body">
Divide like-elements (tables, tool groups, elements within a panel, etc.)
</p>
<h2 class="spectrum-Heading spectrum-Heading--sizeS">Large</h2>
<sp-rule size="m"></sp-rule>
<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-rule size="l"></sp-rule>
<p class="spectrum-Body">Page or Section Titles.</p>
Vertical
When a vertical Rule is used inside of a flex container, use align-self: stretch; height: auto;
on the Rule.
Sizes
<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-rule size="s" vertical></sp-rule>
<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-rule size="m" vertical></sp-rule>
<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-rule size="l" vertical></sp-rule>
<sp-action-button quiet label="Zoom in">
<sp-icon-magnify slot="icon"></sp-icon-magnify>
</sp-action-button>
</div>
0.5.1
3 years ago
0.5.0
3 years ago
0.3.4-alpha.178
3 years ago
0.4.0-alpha.40
3 years ago
0.4.0
3 years ago
0.3.4-alpha.169
3 years ago
0.3.4-alpha.84
3 years ago
0.3.4-alpha.85
3 years ago
0.3.4-alpha.60
3 years ago
0.3.3-alpha.0
4 years ago
0.3.3
4 years ago
0.3.2
4 years ago
0.3.2-beta.17
4 years ago
0.3.2-alpha.17
4 years ago
0.3.1
4 years ago
0.3.0
4 years ago
0.2.1-alpha.95
4 years ago
0.2.1
4 years ago
0.2.0
4 years ago
0.1.2-alpha.38
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago