Examples

size

• small

<template>
  <ColorPicker v-model="data1" size="small" />
</template>

<script setup>
import ColorPicker from '@mcistudio/vue-colorpicker'
import '@mcistudio/vue-colorpicker/dist/style.css'
import { ref } from 'vue'
const data1 = ref({color:{ r: 33, g: 137, b: 216, a: 1 }})
</script>

• medium

<template>
  <ColorPicker v-model="data2" size="medium" />
</template>

<script setup>
import ColorPicker from '@mcistudio/vue-colorpicker'
import '@mcistudio/vue-colorpicker/dist/style.css'
import { ref } from 'vue'
const data2 = ref({color:{ r: 33, g: 137, b: 216, a: 1 }})
</script>

• large

<template>
  <ColorPicker v-model="data3" size="large" />
</template>

<script setup>
import ColorPicker from '@mcistudio/vue-colorpicker'
import '@mcistudio/vue-colorpicker/dist/style.css'
import { ref } from 'vue'
const data3 = ref({color:{ r: 33, g: 137, b: 216, a: 1 }})
</script>

mode

• solid

<template>
  <ColorPicker v-model="data4" />
</template>

<script setup>
import ColorPicker from '@mcistudio/vue-colorpicker'
import '@mcistudio/vue-colorpicker/dist/style.css'
import { ref } from 'vue'
const data4 = ref({mode:'solid',color:{ r: 33, g: 137, b: 216, a: 1 }})
</script>

• linear

<template>
  <ColorPicker v-model="data5" />
</template>

<script setup>
import ColorPicker from '@mcistudio/vue-colorpicker'
import '@mcistudio/vue-colorpicker/dist/style.css'
import { ref } from 'vue'
const data5 = ref({
  mode: 'linear',
  degree: 90,
  gradients: [
    { percent: 10, color: { r: 255, g: 10, b: 20, a: 0.5 } },
    { percent: 100, color: { r: 59, g: 50, b: 240, a: 1 } }
  ]
})
</script>

• radial

<template>
  <ColorPicker v-model="data6" />
</template>

<script setup>
import ColorPicker from '@mcistudio/vue-colorpicker'
import '@mcistudio/vue-colorpicker/dist/style.css'
import { ref } from 'vue'
const data6 = ref({
  mode: 'radial',
  gradients: [
    { percent: 10, color: { r: 255, g: 10, b: 20, a: 0.5 } },
    { percent: 100, color: { r: 59, g: 50, b: 240, a: 1 } }
  ]
})
</script>

modebar

<template>
  <ColorPicker v-model="data7" modebar="none" />
</template>

<script setup>
import ColorPicker from '@mcistudio/vue-colorpicker'
import '@mcistudio/vue-colorpicker/dist/style.css'
import { ref } from 'vue'
const data7 = ref({color:{ r: 33, g: 137, b: 216, a: 1 }})
</script>