sp-color-loupe

Examples API

Attributes and Properties #

Property Attribute Type Default Description
color color string 'rgba(255, 0, 0, 0.5)'
dir dir 'ltr' | 'rtl' 'ltr'
open open boolean false

CSS Custom Properties #

Name Default
--spectrum-colorhandle-inner-border-size var(--spectrum-global-dimension-static-size-25)
--spectrum-colorloupe-height var(--spectrum-global-dimension-static-size-800)
--spectrum-colorloupe-inner-border-color var(--spectrum-global-color-static-white)
--spectrum-colorloupe-outer-border-color var(--spectrum-alias-border-color-translucent)
--spectrum-colorloupe-outer-border-size var(--spectrum-global-dimension-static-size-10)
--spectrum-colorloupe-width var(--spectrum-global-dimension-static-size-600)

Description #

An <sp-color-loupe> shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/color-loupe

Import the side effectful registration of <sp-color-loupe> via:

import '@spectrum-web-components/color-loupe/sp-color-loupe.js';

When looking to leverage the ColorLoupe base class as a type and/or for extension purposes, do so via:

import { ColorLoupe } from '@spectrum-web-components/color-loupe';

Example #

<div style="padding: 100px 0 0;">
<div style="position:relative">
<sp-color-loupe open="" dir="ltr"></sp-color-loupe>
</div>
</div>