@spectrum-web-components/color-field v1.7.0
Description
<sp-color-field>
elements are textfields that allow users to input custom color values.
Color formats supported are HEX, RGB, HSL, HSV, and shorthand HEX
Usage
yarn add @spectrum-web-components/color-field
Import the side effectful registration of <sp-color-field>
via:
import '@spectrum-web-components/color-field/sp-color-field.js';
When looking to leverage the ColorField
base class as a type and/or for extension purposes, do so via:
import { ColorField } from '@spectrum-web-components/color-field';
Sizes
<sp-color-field size="s" value="#ffff00"></sp-color-field>
<sp-color-field size="m" value="#ffff00"></sp-color-field>
<sp-color-field size="l" value="#ffff00"></sp-color-field>
<sp-color-field size="xl" value="#ffff00"></sp-color-field>
View Color
When view-color
is true, the color handle will be rendered. This is useful for development and debugging purposes.
<sp-color-field view-color value="#f00"></sp-color-field>
Read Only
A readonly color field
<sp-color-field readonly value="#ffff00"></sp-color-field>
Quiet
A Quiet color field
<sp-color-field quiet value="#e6e600"></sp-color-field>
Invalid Input
If the input value is not a valid color, <sp-color-field>
will not accept it.
<sp-color-field value="not a color"></sp-color-field>
Valid Input
If the input value is a valid color, the <sp-color-field>
will accept it and the color handle will be updated to reflect the new color.
<sp-color-field>
component accepts color values in various formats: HEX, RGB, HSL, HSV, and shorthand HEX
- HEX: A hexadecimal color is specified with:
#RRGGBB
.RR
(red),GG
(green) andBB
(blue) are hexadecimal integers between00
andFF
specifying the intensity of the color.
<sp-color-field value="#ff0000"></sp-color-field>
- Shorthand HEX: Shorthand hexadecimal color values are also supported.
#RGB
is a shorthand for#RRGGBB
. In the shorthand form,R
(red),G
(green), andB
(blue) are hexadecimal characters between0
andF
. Each character is repeated to create the full 6-digit color code. For example,#123
would expand to#112233
.
<sp-color-field view-color value="#f00"></sp-color-field>
- RGB: An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of the color with a value between 0 and 255.
<sp-color-field view-color value="rgb(0,2555,0)"></sp-color-field>
- RGBA: An RGBA color value is specified with:
rgba(red, green, blue, alpha)
. Thealpha
parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
<sp-color-field view-color value="rgba(0,255,0,0.3)"></sp-color-field>
- HSL: An HSL color value is specified with: hsl(hue, saturation, lightness). Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation and lightness are percentages.
<sp-color-field view-color value="hsl(234, 70%, 50%)"></sp-color-field>
- HSV: An HSV color value is specified with: hsv(hue, saturation, value). Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation and value are percentages.
<sp-color-field view-color value="hsv(0, 70%, 50%)"></sp-color-field>
Events
The sp-color-field component fires a change event when the color value is changed. You can listen for this event to react to changes in the color value.
5 months ago
2 months ago
3 months ago
6 months ago
8 months ago
2 months ago
9 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
5 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
4 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
6 months ago
6 months ago
6 months ago
4 months ago
6 months ago
9 months ago
8 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
8 months ago
5 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
5 months ago
8 months ago
5 months ago
6 months ago
9 months ago
3 months ago
6 months ago
4 months ago
8 months ago
8 months ago
4 months ago
8 months ago
8 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
8 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
4 months ago
5 months ago
5 months ago
2 months ago
8 months ago
6 months ago
8 months ago
5 months ago
2 months ago
5 months ago
4 months ago
8 months ago
2 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
3 months ago
4 months ago
6 months ago
5 months ago
4 months ago
4 months ago
5 months ago
6 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
11 months ago
11 months ago
11 months ago
12 months ago
11 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