sp-color-handle
NPM 1.0.1
View Storybook
Try it on webcomponents.dev
Description
The <sp-color-handle>
is used to select a colour on an <sp-color-area>
, <sp-color-slider>
, or <sp-color-wheel>
. It functions similarly to the handle on an <sp-slider>
.
Usage
yarn add @spectrum-web-components/color-handle
Import the side effectful registration of <sp-color-handle>
via:
import '@spectrum-web-components/color-handle/sp-color-handle.js';
When looking to leverage the ColorHandle
base class as a type and/or for extension purposes, do so via:
import { ColorHandle } from '@spectrum-web-components/color-handle';
Standard
<sp-color-handle></sp-color-handle>
Disabled
<sp-color-handle disabled></sp-color-handle>
Open
When the <sp-color-handle>
uses the open
property, the <sp-color-loupe>
component can be used above the handle to show the selected color that would otherwise be covered by a mouse, stylus, or finger on the down/touch state. This can be customized to appear only on finger-input, or always appear regardless of input type.
<div style="height: 72px"></div> <sp-color-handle open></sp-color-handle>
API
Attributes and Properties
color
color
string
'rgba(255, 0, 0, 0.5)'
disabled
disabled
boolean
false
focused
focused
boolean
false
open
open
boolean
false
Changelog
1.0.1 (2024-11-11)
Note: Version bump only for package @spectrum-web-components/color-handle
1.0.0 (2024-10-31)
Note: Version bump only for package @spectrum-web-components/color-handle
0.49.0 (2024-10-15)
Note: Version bump only for package @spectrum-web-components/color-handle
0.48.1 (2024-10-01)
Note: Version bump only for package @spectrum-web-components/color-handle
0.48.0 (2024-09-17)
Note: Version bump only for package @spectrum-web-components/color-handle
0.47.2 (2024-09-03)
Note: Version bump only for package @spectrum-web-components/color-handle
0.47.1 (2024-08-27)
Note: Version bump only for package @spectrum-web-components/color-handle
0.47.0 (2024-08-20)
Note: Version bump only for package @spectrum-web-components/color-handle
0.46.0 (2024-08-08)
Note: Version bump only for package @spectrum-web-components/color-handle
0.45.0 (2024-07-30)
Note: Version bump only for package @spectrum-web-components/color-handle
0.44.0 (2024-07-15)
Note: Version bump only for package @spectrum-web-components/color-handle
0.43.0 (2024-06-11)
Note: Version bump only for package @spectrum-web-components/color-handle
0.42.5 (2024-05-24)
Note: Version bump only for package @spectrum-web-components/color-handle
0.42.4 (2024-05-14)
Note: Version bump only for package @spectrum-web-components/color-handle
0.42.3 (2024-05-01)
Note: Version bump only for package @spectrum-web-components/color-handle
0.42.2 (2024-04-03)
Note: Version bump only for package @spectrum-web-components/color-handle
0.42.1 (2024-04-02)
Note: Version bump only for package @spectrum-web-components/color-handle
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/color-handle
0.41.1 (2024-02-22)
Note: Version bump only for package @spectrum-web-components/color-handle
0.41.0 (2024-02-13)
Note: Version bump only for package @spectrum-web-components/color-handle
0.40.5 (2024-02-05)
Note: Version bump only for package @spectrum-web-components/color-handle
0.40.4 (2024-01-29)
Note: Version bump only for package @spectrum-web-components/color-handle
0.40.3 (2024-01-11)
Note: Version bump only for package @spectrum-web-components/color-handle
0.40.2 (2023-12-18)
Note: Version bump only for package @spectrum-web-components/color-handle
0.40.1 (2023-12-05)
Note: Version bump only for package @spectrum-web-components/color-handle
0.40.0 (2023-11-16)
Note: Version bump only for package @spectrum-web-components/color-handle
0.39.4 (2023-11-02)
Note: Version bump only for package @spectrum-web-components/color-handle
0.39.3 (2023-10-18)
Note: Version bump only for package @spectrum-web-components/color-handle
0.39.2 (2023-10-13)
Bug Fixes
- update deps graph, update link docs (
#3709 ) (2deb284 )
0.39.1 (2023-10-06)
Note: Version bump only for package @spectrum-web-components/color-handle
0.39.0 (2023-09-25)
Bug Fixes
- color-handle,color-loupe,swatch,thumbnail: use the Opacity Checkerboard package (
47e1fc4 )
Features
- color-slider: migrate to core tokens (
#3507 ) (96d0d40 )
0.38.0 (2023-09-05)
Note: Version bump only for package @spectrum-web-components/color-handle
0.37.0 (2023-08-18)
Note: Version bump only for package @spectrum-web-components/color-handle
0.36.0 (2023-08-18)
Note: Version bump only for package @spectrum-web-components/color-handle
0.35.0 (2023-07-31)
Note: Version bump only for package @spectrum-web-components/color-handle
0.34.0 (2023-07-11)
Note: Version bump only for package @spectrum-web-components/color-handle
0.33.2 (2023-06-14)
Note: Version bump only for package @spectrum-web-components/color-handle
0.33.0 (2023-06-08)
Note: Version bump only for package @spectrum-web-components/color-handle
0.32.0 (2023-06-01)
Bug Fixes
- color-handle,color-loupe: accept updated CSS token names (
8c28f6d )
0.31.0 (2023-05-17)
Note: Version bump only for package @spectrum-web-components/color-handle
0.30.0 (2023-05-03)
Bug Fixes
- address westbrooks comments (
634af60 ) - expand support for maintaining hue and saturation across customization (
fe18944 ) - include touch-action rule for draggable content (
3f507e6 ) - leverage Color Controller to unify color interface across packages (
fb71690 ) - manage "focused" across more contexts (
9273c15 ) - prevent focus outline (
af2b077 )
Features
- adopt DNA@7 base Spectrum CSS (
e08cafd ) - color-handle: add color-handle pattern (
e3856d8 ) - color-handle: use core tokens (
e0c1468 ) - color-loupe: use core tokens (
149165c ) - include all Dev Mode files in side effects (
f70817c ) - shared pkg versions, devmode define warning, registry-conflicts docs (
6e49565 )
0.5.0 (2023-04-24)
Features
- color-handle: use core tokens (
e0c1468 ) - color-loupe: use core tokens (
149165c )
0.4.9 (2023-04-05)
Note: Version bump only for package @spectrum-web-components/color-handle
0.4.8 (2023-03-22)
Note: Version bump only for package @spectrum-web-components/color-handle
0.4.7 (2023-02-08)
Note: Version bump only for package @spectrum-web-components/color-handle
0.4.6 (2023-01-23)
Note: Version bump only for package @spectrum-web-components/color-handle
0.4.5 (2023-01-09)
Note: Version bump only for package @spectrum-web-components/color-handle
0.4.4 (2022-12-08)
Note: Version bump only for package @spectrum-web-components/color-handle
0.4.3 (2022-11-21)
Note: Version bump only for package @spectrum-web-components/color-handle
0.4.2 (2022-11-14)
Note: Version bump only for package @spectrum-web-components/color-handle
0.4.1 (2022-10-10)
Bug Fixes
- leverage Color Controller to unify color interface across packages (
fb71690 )
0.4.0 (2022-08-09)
Features
- include all Dev Mode files in side effects (
f70817c )
0.3.11 (2022-08-04)
Note: Version bump only for package @spectrum-web-components/color-handle
0.3.10 (2022-07-18)
Note: Version bump only for package @spectrum-web-components/color-handle
0.3.9 (2022-06-29)
Note: Version bump only for package @spectrum-web-components/color-handle
0.3.8 (2022-06-07)
Note: Version bump only for package @spectrum-web-components/color-handle
0.3.7 (2022-05-12)
Note: Version bump only for package @spectrum-web-components/color-handle
0.3.6 (2022-04-21)
Note: Version bump only for package @spectrum-web-components/color-handle
0.3.5 (2022-03-08)
Note: Version bump only for package @spectrum-web-components/color-handle
0.3.4 (2022-03-04)
Note: Version bump only for package @spectrum-web-components/color-handle
0.3.3 (2022-02-22)
Note: Version bump only for package @spectrum-web-components/color-handle
0.3.2 (2022-01-26)
Note: Version bump only for package @spectrum-web-components/color-handle
0.3.1 (2021-12-13)
Note: Version bump only for package @spectrum-web-components/color-handle
0.3.0 (2021-11-08)
Note: Version bump only for package @spectrum-web-components/color-handle
0.2.1 (2021-11-08)
Note: Version bump only for package @spectrum-web-components/color-handle
0.2.0 (2021-11-02)
Features
- adopt DNA@7 base Spectrum CSS (
e08cafd )
0.1.10 (2021-10-12)
Note: Version bump only for package @spectrum-web-components/color-handle
0.1.9 (2021-09-20)
Note: Version bump only for package @spectrum-web-components/color-handle
0.1.8 (2021-09-13)
Bug Fixes
- manage "focused" across more contexts (
9273c15 ) - prevent focus outline (
af2b077 )
0.1.7 (2021-07-22)
Note: Version bump only for package @spectrum-web-components/color-handle
0.1.6 (2021-07-01)
Bug Fixes
- expand support for maintaining hue and saturation across customization (
fe18944 )
0.1.5 (2021-06-16)
Note: Version bump only for package @spectrum-web-components/color-handle
0.1.4 (2021-05-12)
Bug Fixes
- include touch-action rule for draggable content (
3f507e6 )
0.1.3 (2021-04-09)
Note: Version bump only for package @spectrum-web-components/color-handle
0.1.2 (2021-03-29)
Note: Version bump only for package @spectrum-web-components/color-handle
0.1.1 (2021-03-22)
Note: Version bump only for package @spectrum-web-components/color-handle
0.1.0 (2021-03-05)
Bug Fixes
- address westbrooks comments (
634af60 )
Features
- color-handle: add color-handle pattern (
e3856d8 )