vct

vue-color-table

This is a colorpicker component for Vue.js.

Showing:

Popularity

Downloads/wk

11

GitHub Stars

0

Maintenance

Last Commit

7mos ago

Contributors

0

Package

Dependencies

11

License

Type Definitions

Tree-Shakeable

No?

Readme

vue-color-table

Build Status npm license language

a colorpicker component for Vue.js.

DEMO

Requirements

Instllation

npm

$ npm install vue-color-table

Usage

<template>
    <VueColorTable v-model="colors" :minMax="range"></VueColorTable>
</template>

<script>
  import VueColorTable from 'vue-color-table'

  export default {
    name: 'App',
    components: {
      VueColorTable
    },
    data() {
      return {
        range: [-500, 500],
        colors: {}
      }
    }
  }
</script>

Config

COLOR_TABLE_CONFIG = {
    'rainbow': [[0.0, 'rgba(0, 0, 255, 1.0)'], [0.2, 'rgba(0, 255, 255, 1.0)'], [0.5, 'rgba(0, 255, 0, 0.5)'], [0.8, 'rgba(255, 255, 0, 1.0)'], [1.0, 'rgba(255, 0, 0, 1.0)']],
    'cooltowarm': [[0.0, '#3C4EC2'], [0.2, '#9BBCFF'], [0.5, '#DCDCDC'], [0.8, '#F6A385'], [1.0, '#B40426']],
    'blackbody': [[0.0, '#000000'], [0.2, '#780000'], [0.5, '#E63200'], [0.8, '#FFFF00'], [1.0, '#FFFFFF']],
    'grayscale': [[0.0, '#000000'], [0.2, '#404040'], [0.5, '#7F7F80'], [0.8, '#BFBFBF'], [1.0, '#FFFFFF']],
    'rainbow2': [[0.0, '#000000'], [0.2, '#404040'], [0.5, '#7F7F80'], [1, '#BFBFBF']]
}

Props

PropsTypeDefaultDescription
v-modelObject{ name: 'rainbow', colors: COLOR_TABLE_CONFIG['rainbow'] }the name of the color scheme and the color array of the color scheme
minMaxArray[0, 1]numerical range of visual mapping for color schemes

License

The MIT License

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial