Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://setaman.github.io/vue-ellipse-progress-docs/guide/options/legend.html below:

Website Navigation

• Guide

legend | vue-ellipse-progress

The legend property is used to display a value inside the circle. It accepts any Number or String, allowing for flexible formatting options.

This property is useful when you want to display values beyond the typical progress range of -100 to 100, apply custom formatting, or show initial counter values with leading zeros.

You can use "." or "," as a delimiter for simple formatting, or set an initial counter-placeholder like "0045.00". Just ensure it's a valid JavaScript Number.

Legend vs progress

The progress property is always required. When both legend and progress are defined, legend will take over as the displayed value inside the circle. The progress property is still required and should be calculated based on the legend value as needed.

<ve-progress :legend="150" />
<ve-progress legend="020" />
<ve-progress legend="200,50" />

Here we imagine the legend to be a value between 0 and 4000. The progress is calculated as a percentage of the legend value

<template>
  <ve-progress :legend="legend" :progress="50"/>
</template>
<script setup>
  import { ref, computed } from "vue";

  const maxLegendValue = 4000;
  const legend = ref(2000);
  
  const progress = computed(() => {
    return (legend.value * 100) / maxLegendValue;
  });
</script>

The following example clarifies the relationship between legend and progress. Imagine you need to display a product rating from 0 to 5 stars, and the rating is 3.5 stars. If you set the progress to 3.5, it will fill the circle to 3.5 percent, which is not what we want. Instead, we want to display the percentage of 5 as progress. This is where legend becomes very useful. In our component, we can calculate the progress as follows:

const rating = 3.5;
const progress = rating * 100 / 5; // the rating percentage

And then apply the values:

<ve-progress :progress="progress" :legend="rating" />

As a result, the rating can be displayed as a circle legend, and the progress will be calculated correctly:

<template>
  <ve-progress :legend="stars" :progress="60"/>
</template>
<script setup>
  import { ref, computed } from "vue";

  const maxStars = 5;
  const stars = ref(3);
  
  const progress = computed(() => {
    return (stars.value * 100) / maxStars;
  });
</script>

With the legend is a String, you can use custom decimal delimiters and easily format the displayed value:

<ve-progress :legend="3000" :progress="50" />
<ve-progress legend="20,50" :progress="50" />
<ve-progress legend="01000" :progress="50" />
<ve-progress legend="0050,51100" :progress="50" />
<ve-progress legend="0050.250" :progress="50" />

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4