- Lightest
- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
Color Loupe
| Component status | Verified |
|---|---|
| Last released | Unreleased |
| Current version | @spectrum-css/colorloupe@1.0.3-alpha.1 |
Usage notes
- Set the
fillstyle property of the.spectrum-ColorLoupe-innerelement to indicate the currently selected color - Apply
.is-opento display the loupe - Color Loupe does not have a disabled style; do not show it when the handle its attached to is disabled.
Variants
StandardVerified
Show markup
<svg class="spectrum-ColorLoupe is-open" style="position: absolute; top: 25%; left: 50%;">
<g transform="translate(1 1)">
<path class="spectrum-ColorLoupe-inner" d="M24,0A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z" fill="rgba(255, 0, 0, 0.5)" />
<path class="spectrum-ColorLoupe-outer" d="M24,2A21.98,21.98,0,0,0,2,24c0,6.2,4,14.794,11.568,24.853A144.233,144.233,0,0,0,24,61.132,144.085,144.085,0,0,0,34.4,48.893C41.99,38.816,46,30.209,46,24A21.98,21.98,0,0,0,24,2m0-2A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z"/>
</g>
</svg>