[Vuejs]-How to change default color of element in vue-bootstrap

by

0👍

You can have custom colored rows without changing the theme colors. Since you are giving the class name based on row, you can write CSS for the same.

Example : Lets say you have 3 types of row colors (row-danger, row-warning, row-primary)

methods: {
    colorRowByCode(item, type){
      if (!item || type !== 'row') return
      if(item.level === 'Critical') return 'row-danger'
      if(item.level === 'Warning') return 'row-warning'
      if(item.level === 'Error') return 'row-primary'
    }
  }

Now in CSS you can add,

<style lang="css">

.row-primary{
  background: #FFDEB9;
}

.row-danger{
  background: #FF0000;
}

.row-warning{
  background: #FF0101;
}

</style>

So basically you will be adding classes to your HTML using your method colorRowByCode and those classes will define the color for row as shown in CSS

Leave a comment