Wondering what’s next for npm?Check out our public roadmap! »

    vue-color-gradient-picker

    0.1.2 • Public • Published

    Vue Color Gradient Picker

    Table of Contents

    Installation

    To install, you can use npm or yarn:

    $ npm install vue-color-gradient-picker
    $ yarn add vue-color-gradient-picker
    

    Examples

    Here is a simple examples of react-color-gradient-picker being used in an app:

    Color Picker

    <template>
      <div id="app">
        <ColorPicker
          :color="color"
          :onStartChange="color => onChange(color, 'start')"
          :onChange="color => onChange(color, 'change')"
          :onEndChange="color => onChange(color, 'end')"
        />
      </div>
    </template>
     
    <script>
    import { ColorPicker } from 'vue-color-gradient-picker';
     
    export default {
      name: 'App',
     
      components: {
        ColorPicker
      },
     
      data()  {
        return {
          color: {
            red: 255,
            green: 0,
            blue: 0,
            alpha: 1
          }
        }
      },   
     
      methods: {
        onChange(attrs, name) {
          this.color = { ...attrs };
        }
      }
    }
    </script>
     
    <style src="vue-color-gradient-picker/dist/index.css" lang="css" />

    Gradient Color Picker

    <template>
      <div id="app">
        <ColorPicker
          :gradient="gradient"
          :isGradient="true"
          :onStartChange="color => onChange(color, 'start')"
          :onChange="color => onChange(color, 'change')"
          :onEndChange="color => onChange(color, 'end')"
        />
      </div>
    </template>
     
    <script>
    import { ColorPicker } from 'vue-color-gradient-picker';
     
    export default {
      name: 'App',
     
      components: {
        ColorPicker
      },
     
      data()  {
        return {
          gradient: {
            type: 'linear',
            degree: 0,
            points: [
              {
                left: 0,
                red: 0,
                green: 0,
                blue: 0,
                alpha: 1
              },
              {
                left: 100,
                red: 255,
                green: 0,
                blue: 0,
                alpha: 1
              }
            ]      
          }
        }
      },   
     
      methods: {
        onChange(attrs, name) {
          console.log(name);
        }
      }
    }
    </script>
     
    <style src="vue-color-gradient-picker/dist/index.css" lang="css" />

    Demo

    Install

    npm i vue-color-gradient-picker

    DownloadsWeekly Downloads

    270

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    377 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar