html5 form element input adds a new color type, the color selector.

<input type="color">

The default effect of the selector on windows is as follows:

It can be said to be very ugly and difficult to use.

To solve this problem, xy-ui A new class of components has been added xy-color-picker The results are as follows:

Design reference chorme color selector.

Is it a big visual improvement?

Let's see how to use it.

Suggested View File Can interact in real time

Functional characteristics

• Mode Selection Based on Hue Phase (HSV)
• Support mouse sliding and keyboard input to select color
• You can choose to switch the color display mode, hex, rgba, hsl, respectively.
• Click the left circular button to copy the current color value to the clipboard
• Matetial Design Color can be selected from below.

Usage

It's easy to use.

npm i xy-ui

Or directly from github Copy source code.

<!-- Introduce -->
<script type="module">
    import './node_modules/xy-ui/components/xy-color-picker.js';
</script>
<!-- Use -->
<xy-color-picker></xy-color-picker>

Default value

The color selector can be assigned an initial color value default value, which is a valid color value.

type	Example	web support
Keyword	red,blue	Support
hex(a)	#42b983,#42B983BA	Support
rgb(a)	rgb(66, 185, 131),rgba(66, 185, 131, 0.73)	Support
hls(a)	hsl(153, 47%, 49%),hsla(153, 47%, 49%, 0.73)	Support
hsv(a)	hsv(153, 47%, 49%),hsva(153, 47%, 49%, 0.73)	I won't support it
cmyk	cmyk(20%, 35%, 74%, 53%)	I won't support it

Among them, web supports four ways: color keyword, hex(a), rgb(a), hls(a).

<xy-color-picker defaultvalue="rgb(66, 185, 131)"></xy-color-picker>

value, color

Sets or returns the value attribute value of the color selector. Value is the legal color value. Returns the color value in the current format by default.

Returns the color details, which can be converted to any color value in any format.

//color
{
    h: 16.23529411764704
    s: 66.42857142857143
    v: 71.71875
    a: 1
    toCMYK: f,
    toHEXA: f,
    toHSLA: f,
    toHSVA:f,
    toRGBA: f,
}

color.toRGBA().toString()//Returns the color value of RGBA

Direction dir

The direction of color suspension layer can be set by dir. By default, it is bottom left. The values of top, right, bottom, left, top left, top right, right top, right bottom, right bottom, bottomleft, bottomright, left top and left bottom can be selected.

For example, if you set dir="topleft", then

<xy-color-picker defaultvalue="rgb(66, 185, 131)" dir="topleft"></xy-color-picker>

Event

When the color is selected, the change callback can be triggered by pressing the confirmation button.

<xy-color-picker defaultvalue="rgb(66, 185, 131)" onchange="XyMessage.info('current value: '+this.value)"></xy-color-picker>

Other trigger modes

colorPicker.onchange = function(ev){
    //Several ways to get value
    /*
    event:{
        detail:{
            value,
            color:{
                h: 16.23529411764704
                s: 66.42857142857143
                v: 71.71875
                a: 1
                toCMYK: f,
                toHEXA: f,
                toHSLA: f,
                toHSVA:f,
                toRGBA: f,
            }
        }
    }
    */
    console.log(this.value);
    console.log(this.color);
    console.log(ev.target.value);
    console.log(ev.detail.value);
    this.color.toRGBA().toString() //rgba(255,255,255,1)
}

colorPicker.addEventListener('change',function(ev){
    console.log(this.value);
    console.log(this.color);
    console.log(ev.target.value);
    console.log(ev.detail.value);
    this.color.toRGBA().toString() //rgba(255,255,255,1)
})

Other

xy-color-picker is implemented internally based on xy-popover and xy-color-pane l.

<xy-popover >
    <xy-button class="color-btn"></xy-button>
    <xy-popcon>
        <xy-color-pane id="color-pane"></xy-color-pane>
        <div class="pop-footer">
            <xy-button id="btn-cancel">cancel</xy-button>
            <xy-button type="primary" id="btn-submit">confirm</xy-button>
        </div>
    </xy-popcon>
</xy-popover>

Among them, xy-color-pane l is the color selection panel, which can be used independently.

<xy-color-pane></xy-color-pane>

Events and attributes are consistent with xy-color-picker.

colorPane.value = 'orangered';
colorPane.addEventListener('change',function(ev){
    console.log(this.value);
    console.log(this.color);
    console.log(ev.target.value);
    console.log(ev.detail.value);
    this.color.toRGBA().toString() //rgba(255,255,255,1)
})

Summary

In fact, the API for xy-color-picker is very simple. In most cases, onchange is enough. If you want to have custom requirements, you can use xy-color-pane l independently.

xy-color-picker is a native web component that is not limited to the framework and can be used directly. If you want to use other similar components, you can pay attention to xy-ui Welcome to star.