@spectrum-web-components/color-area v0.42.2
Description
An <sp-color-area>
allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel.
Usage
yarn add @spectrum-web-components/color-area
Import the side effectful registration of <sp-color-area>
via:
import '@spectrum-web-components/color-area/sp-color-area.js';
When looking to leverage the ColorArea
base class as a type and/or for extension purposes, do so via:
import { ColorArea } from '@spectrum-web-components/color-area';
Color Formatting
When using the color elements, use el.color
to access the color
property, which should manage itself in the colour format supplied. For example, If you supply a color in rgb()
format, el.color
should return the color in rgb()
format, as well. In ColorArea, colours are formatted as hex values.
The current color formats supported are as follows:
- Hex3, Hex4, Hex6, Hex8
- HSV, HSVA
- HSL, HSLA
- RGB, RGBA
- Strings (eg "red", "blue")
Standard
<sp-color-area></sp-color-area>
Variants
Disabled
An <sp-color-area>
in a disabled state shows that an input exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that the area may become available later.
<sp-color-area disabled></sp-color-area>
Sized
An <sp-color-area>
’s height and width can be customized appropriately for its context.
<sp-color-area
style="
width: 72px;
height: 72px"
></sp-color-area>
Labels
An <sp-color-area>
renders accessible labels for each axis: "saturation" and "luminosity".
Specify label-x
and label-y
attributes to override these defaults.
The label
attribute is deprecated in favor of separately labeling each axis.
<sp-color-area
label-x="Color intensity"
label-y="Color brightness"
></sp-color-area>
27 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
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
6 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
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
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago