sp-swatch
Attributes and Properties #
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
autofocus | autofocus | boolean | false | When this control is rendered, focus it automatically |
border | border | SwatchBorder | | |
color | color | string | '' | |
dir | dir | 'ltr' | 'rtl' | 'ltr' | |
disabled | disabled | boolean | false | Disable this control. It will not receive focus or events |
label | label | string | '' | |
mixedValue | mixed-value | boolean | false | |
nothing | nothing | boolean | false | |
role | role | string | 'button' | |
rounding | rounding | SwatchRounding | | |
selected | selected | boolean | false | |
shape | shape | SwatchShape | | |
size | size | ElementSize | | |
tabIndex | tabIndex | number | | The tab index to apply to this control. See general documentation about the tabindex HTML property |
value | value | string | |
Events #
Name | Type | Description |
---|---|---|
change | Event | |
Description #
An <sp-swatch>
shows a small sample of a fill — such as a color, gradient, texture, or material — that is intended to be applied to an object.
Usage #
yarn add @spectrum-web-components/swatch
Import the side effectful registration of <sp-swatch>
via:
import '@spectrum-web-components/swatch/sp-swatch.js';
When looking to leverage the Swatch
base class as a type and/or for extension purposes, do so via:
import { Swatch } from '@spectrum-web-components/swatch';
Sizes #
<div style="display: flex;gap: 5px;">
<sp-swatch color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
<sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
<sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
<sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
<sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
<sp-swatch nothing size="xs"></sp-swatch>
<sp-swatch
shape="rectangle"
color="rgb(255 0 0 / 0.7)"
size="xs"
></sp-swatch>
<sp-swatch
shape="rectangle"
disabled
color="rgb(255 0 0 / 0.7)"
size="xs"
></sp-swatch>
<sp-swatch
rounding="full"
shape="rectangle"
mixed-value
size="xs"
></sp-swatch>
</div>
<div style="display: flex;gap: 5px;">
<sp-swatch color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
<sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
<sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
<sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
<sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
<sp-swatch nothing size="s"></sp-swatch>
<sp-swatch
shape="rectangle"
color="rgb(255 0 0 / 0.7)"
size="s"
></sp-swatch>
<sp-swatch
shape="rectangle"
disabled
color="rgb(255 0 0 / 0.7)"
size="s"
></sp-swatch>
<sp-swatch
rounding="full"
shape="rectangle"
mixed-value
size="s"
></sp-swatch>
</div>
<div style="display: flex;gap: 5px;">
<sp-swatch color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
<sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
<sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
<sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
<sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
<sp-swatch nothing size="m"></sp-swatch>
<sp-swatch
shape="rectangle"
color="rgb(255 0 0 / 0.7)"
size="m"
></sp-swatch>
<sp-swatch
shape="rectangle"
disabled
color="rgb(255 0 0 / 0.7)"
size="m"
></sp-swatch>
<sp-swatch
rounding="full"
shape="rectangle"
mixed-value
size="m"
></sp-swatch>
</div>
<div style="display: flex;gap: 5px;">
<sp-swatch color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
<sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
<sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
<sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
<sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
<sp-swatch nothing size="l"></sp-swatch>
<sp-swatch
shape="rectangle"
color="rgb(255 0 0 / 0.7)"
size="l"
></sp-swatch>
<sp-swatch
shape="rectangle"
disabled
color="rgb(255 0 0 / 0.7)"
size="l"
></sp-swatch>
<sp-swatch
rounding="full"
shape="rectangle"
mixed-value
size="l"
></sp-swatch>
</div>
Modifying attributes #
An <sp-swatch>
element can be modified by the following attributes/properties to customize its delivery as desired for your use case: border
, color
, disabled
, mixedValue
(accepted as the mixed-value
attribute), nothing
, rounding
, and shape
. Use these in concert with each other for a variety of final visual deliveries.
Border #
The border
attribute/property is not required and when applied accepts the values of none
or light
.
<sp-swatch-group>
<sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
<sp-swatch color="rgb(255 0 0 / 0.7)" border="light"></sp-swatch>
<sp-swatch color="rgb(255 0 0 / 0.7)" border="none"></sp-swatch>
</sp-swatch-group>
Color #
The color
attribute/property determines the color value that the <sp-swatch>
element will deliver.
<sp-swatch-group>
<sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
<sp-swatch color="orange"></sp-swatch>
<sp-swatch color="var(--spectrum-global-color-magenta-500)"></sp-swatch>
</sp-swatch-group>
Disabled #
The disabled
attribute/property determines prevents interaction on the <sp-swatch>
element.
<sp-swatch-group>
<sp-swatch disabled color="rgb(255 0 0 / 0.7)"></sp-swatch>
<sp-swatch disabled color="orange"></sp-swatch>
<sp-swatch
disabled
color="var(--spectrum-global-color-magenta-500)"
></sp-swatch>
</sp-swatch-group>
Mixed value #
The mixed-value
attribute and mixedValue
property outline when an <sp-swatch>
element represents more than one color.
<sp-swatch-group>
<sp-swatch mixed-value></sp-swatch>
<sp-swatch mixed-value rounding="full"></sp-swatch>
<sp-swatch mixed-value shape="rectangle"></sp-swatch>
</sp-swatch-group>
Nothing #
The nothing
attribute/property outlines that the <sp-swatch>
represents no color or that it represents "transparent".
<sp-swatch-group>
<sp-swatch nothing></sp-swatch>
<sp-swatch nothing rounding="full"></sp-swatch>
<sp-swatch nothing shape="rectangle"></sp-swatch>
</sp-swatch-group>
Rounding #
The rounding
attribute/property is not required and when applied accepts the values of none
or full
.
<sp-swatch-group>
<sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
<sp-swatch color="rgb(255 0 0 / 0.7)" rounding="none"></sp-swatch>
<sp-swatch color="rgb(255 0 0 / 0.7)" rounding="full"></sp-swatch>
</sp-swatch-group>
Shape #
The shape
attribute/property is not required and when applied accepts the values of rectangle
.
<sp-swatch-group>
<sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
<sp-swatch color="rgb(255 0 0 / 0.7)" shape="rectangle"></sp-swatch>
</sp-swatch-group>