@spectrum-web-components/color-loupe

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@spectrum-web-components/color-loupe
7071450.4.0a month ago2 years agoMinified + gzip package size for @spectrum-web-components/color-loupe in KB

Readme

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>