Examples

Default Example

<template>
  <verte></verte>
</template>

<script>
import verte from 'verte';

export default {
  components: { verte }
}
</script>

Start Color

<verte value="#f0f"></verte>

Position menu

Top

<verte menuPosition="top"></verte>

Bottom

<verte menuPosition="bottom"></verte>
<verte menuPosition="right"></verte>

Left

<verte menuPosition="left"></verte>

Center

<verte menuPosition="center"></verte>

Layout Customization

Wheel Picker

  <verte picker="wheel"></verte>

Custom Guide Icon

<verte>
  <svg viewBox="0 0 24 24">
    <path d="M0 20h24v4H0z"/>
    <path style="fill: #000" d="M11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-1.38 9L12 5.67 14.38 12H9.62z"/>
  </svg>
</verte>

Widget

Display the component vertically at all times and disable dragging.

<verte display="widget"></verte>

RGB Sliders

Display the component vertically using a trigger button and allow dragging.

<verte display="widget" :rgbSliders="true"></verte>

No Recent colors

Display the component vertically using a trigger button and allow dragging.

<verte display="widget" :recentColors="null"></verte>