API

Props

NameValuesDefaultDescription
picker'wheel' | 'square''wheel'chose between pickers style
valuea valid color string'#000'the initial color value
model'rgb' | 'hex' | 'hsl''rgb'the output color model
menuPosition'top' | 'bottom' | 'left' | 'right' | 'center''bottom'the output color model
recentColorsnull | true | Arraytrueset the current recent colors, if set to true it will generate random colors (default), or you can disable it by setting it null
displayString'vertical'controls the layout of the component. List of allowed values.
draggableBooleantrueturn on/off dragging the picker menu
enableAlphaBooleantrueturn on/off the alpha slider
rgbSlidersBooleanfalseshow/hide rgb sliders

Display Modes

Verte currently has two display layouts:

  • picker: The component is hidden until the user presses on the input, then it is displayed vertically.
  • widget: The component is always displayed vertically, the trigger input is hidden.

We are planning for horizontal and horizontal-widge in the future. You can view the different layouts here

Slots

you can pass to verte slot an element(icon) to replace the guide circle icon.

TIP

The guide icon color and fill style will change to the current selected color, if you want parts of your icon not to change, you have add fill/color style inline.




 
 
 
 




<template>
  <verte :picker="wheel" :model="rgb">

    <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>
</template>

Events

NamePayload TypeDescription
inputstringEmits a string representation of the model for the selected color value