dot
Animated: ✔️
| type | values | default |
|---|---|---|
| Number | String | Object | Accepts size, color and other styles as Number, descriptive string "size [color]" or object {size [, backgroundColor, widht, borderRadius ...]} | 0 |
The dot property lets you define a point indicator at the end of the progress line. You have a lot of freedom to customize the dot using a Number, descriptive String, or an Object to inject any CSS styles.
Number: :dot="10" - specifies a round dot with 10px width and height and default #713dfd color
Descriptive string: dot="size [color]" - size can be just a Number or a percent value like 5%, the calculation for percent values is similar to thickness and depends on the size. color is optional and lets you quickly define the color of the dot. The order of properties is important for parsing the String, and you can set the color only if the size is defined.
Object: :dot="{ size: Number | String [, any CSS inline style with Vue syntax] }" - to customize the point, you can define the prop as an Object. size is required and can be just a Number or a String to define a percent value. Only defining the prop as an Object you have the possibility to add any styles to the dot you want to, using Vue syntax for defining inline styles, you can even completely break the positioning of the dot, if you need. You cannot override the height of the dot since it is important for internal calculation and must be controllable.
Usage 📜
<ve-progress :dot="10" />
<ve-progress dot="5% blue" />
<ve-progress :dot="{ size: 10, backgroundColor: 'red'}" />
Examples
Let's start with simple cases