sp-color-handle
Attributes and Properties #
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
color | color | string | 'rgba(255, 0, 0, 0.5)' | |
dir | dir | 'ltr' | 'rtl' | 'ltr' | |
disabled | disabled | boolean | false | |
focused | focused | boolean | false | |
open | open | boolean | false |
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: var(--spectrum-global-dimension-size-900)"></div>
<sp-color-handle open></sp-color-handle>