VerteExamples
Default Example
vue
<template>
<Verte />
</template>
<script setup>
import Verte from 'verte-vue3';
</script>
Start Color
vue
<Verte modelValue="#f0f"></Verte>
Position menu
Top
vue
<Verte menuPosition="top"></Verte>
Bottom
vue
<Verte menuPosition="bottom"></Verte>
Right
vue
<Verte menuPosition="right"></Verte>
Left
vue
<Verte menuPosition="left"></Verte>
Center
vue
<Verte menuPosition="center"></Verte>
Layout Customization
Wheel Picker
vue
<Verte picker="wheel"></Verte>
Custom Guide Icon
html
<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.
vue
<Verte display="widget"></Verte>
RGB Sliders
Display the component vertically using a trigger button and allow dragging.
vue
<Verte display="widget" :rgbSliders="true"></Verte>
No Recent colors
Display the component vertically using a trigger button and allow dragging.
vue
<Verte display="widget" :showHistory="null"></Verte>