Is there a way to divide v-progress linear into 4 pieces in Vuejs, or are there alternative design options for achieving this in Vuetify 2?

Question

Is there a way to divide v-progress linear into 4 pieces in Vuejs, or are there alternative design options for achieving this in Vuetify 2?

I have set up a table in Vuetify 2 with a v-progress-linear component to monitor the user's remaining time. Initially, my implementation was simple like this.

https://i.sstatic.net/x373G.png

However, we decided to split it into 4 sections for better visibility of the user's time. In doing so, I aim to apply different colors for values less than or equal to 4, and a single color for values greater than 4. Do you think I should consider using another package for this design? How would I go about implementing it? Your assistance on this matter would be greatly appreciated.

https://i.sstatic.net/vQ6ZL.png

The current setup simply involves extracting data from the store and utilizing it as follows:

<v-progress-linear
    id="remainingTimeOffBar"
    rounded
    color="monochromeGray2"
    background-color="colorYellow"
    :value="60 - item.remainingDuration"
    height="6"
/>

I am hopeful that a solution can be reached for this issue. Despite exploring various options, I have not been able to find a viable one thus far. Would handling this via CSS be feasible, or should I look into an alternative package?

css typescript vue.js vuetify.js progress-bar

Answer 1

Answer №1

If you're looking to customize the design of v-progress-linear in Vuetify, there are no built-in options for that. However, you can easily create your own custom component with minimal CSS to achieve the desired look. Take a look at this codesandbox example to see how it can be done.

The progress amount determines how much of the bar should be filled/colored, and in the provided example, each segment of the progress bar represents 25% completion. You can modify the styling based on the actual progress passed down as a prop.

<template>
  <div class="progress-container">
    <div v-for="i in 4" :key="i" class="segment" :style="{ background: segmentColor(i) }" />
  </div>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
  methods: {
    segmentColor(i) {
      if (this.progress <= 25) {
        return "rgb(76, 195, 93)"; // green
      } else if (this.progress > 25 && this.progress <= 50) {
        if (i > 1) {
          return "rgb(255, 200, 15)"; // yellow
        }
      } else if (this.progress > 50 && this.progress <= 75) {
        if (i > 2) {
          return "rgb(255, 200, 15)"; // yellow
        }
      } else {
        if (i === 4) {
          return "rgb(245, 130, 67)"; // orange
        }
      }
      return "rgb(217, 217, 217)";
    },
  },
};
</script>

<style>
.progress-container {
  display: flex;
}
.segment {
  width: 2rem;
  height: 0.5rem;
  background: rgb(217, 217, 217);
}
.segment:not(:first-child) {
  margin-left: 2px;
}
.segment:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.segment:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
</style>

Answer 2

If you're looking to customize the design of v-progress-linear in Vuetify, there are no built-in options for that. However, you can easily create your own custom component with minimal CSS to achieve the desired look. Take a look at this codesandbox example to see how it can be done.

The progress amount determines how much of the bar should be filled/colored, and in the provided example, each segment of the progress bar represents 25% completion. You can modify the styling based on the actual progress passed down as a prop.

<template>
  <div class="progress-container">
    <div v-for="i in 4" :key="i" class="segment" :style="{ background: segmentColor(i) }" />
  </div>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
  methods: {
    segmentColor(i) {
      if (this.progress <= 25) {
        return "rgb(76, 195, 93)"; // green
      } else if (this.progress > 25 && this.progress <= 50) {
        if (i > 1) {
          return "rgb(255, 200, 15)"; // yellow
        }
      } else if (this.progress > 50 && this.progress <= 75) {
        if (i > 2) {
          return "rgb(255, 200, 15)"; // yellow
        }
      } else {
        if (i === 4) {
          return "rgb(245, 130, 67)"; // orange
        }
      }
      return "rgb(217, 217, 217)";
    },
  },
};
</script>

<style>
.progress-container {
  display: flex;
}
.segment {
  width: 2rem;
  height: 0.5rem;
  background: rgb(217, 217, 217);
}
.segment:not(:first-child) {
  margin-left: 2px;
}
.segment:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.segment:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
</style>

Is there a way to divide v-progress linear into 4 pieces in Vuejs, or are there alternative design options for achieving this in Vuetify 2?

Answer №1

Similar questions

Steps for converting a tsx file into a js file in React

Setting key-value pairs in TypeScript objects explained

In the application I'm developing, I'm utilizing React alongside TypeScript, making use of the useContext and useReducer hooks. However, I've encountered an issue where the dispatch function is not being

Create a grid or flex layout with Bootstrap 4 that features a sticky first row and column

Exploring the usage of slots in WebComponents without relying on shadow DOM

How to refresh a page manually in Angular 2

Guide to creating a dynamic import feature in Nuxt

The 'Bfrip' button is missing from the DOM

Text alignment below a div with absolute positioning

Troubleshooting the issues with implementing cross-browser jscrollpane functionality

Sass flex order has no effect on elements that are generated

Steps to resolve the 'form' variable being assigned a value but never used in axios:

Is there a way to position the text within an email body at the center using SendGrid?

How can you handle all HTML tags with Regex in a single line of code?

Can anyone share tips on how to ensure that text placed over an image can adapt and respond effectively

Testing the Snackbar function with Angular and TypeScript: Unit Testing

Setting table row styles for odd and even rows, based on user clicks of an <input type="file"> button

The configuration object is invalid. Webpack has been initialized with a configuration object that does not conform to the API schema

Tips for providing information for AJAX requests in a Vue.js-CLI application

I encountered a TypeError when attempting to load MDX in Next.js with the mdx-js/react library