Skip to content

Color Input

A Color input component that displays a color picker.

Usage

vue
<script setup lang="ts">
import { ref } from 'vue';
import { ColorInput } from '@youcan/ui-vue3';

const color = ref('');
</script>

<template>
  <ColorInput
    v-model="color"
    :preserve-transparency="false"
  />
</template>

API Reference

Color Picker

The base color picker component.

Usage

vue
<script setup lang="ts">
import { ref } from 'vue';
import { ColorPicker } from '@youcan/ui-vue3';

const color = ref('');
const setColor = (newColor: { hex: string }) => color.value = newColor.hex;
</script>

<template>
  <ColorPicker
    :color="color"
    :defaults="[]"
    :preserve-transparency="true"
    @setcolor="setColor"
  />
</template>

API Reference