BootstrapVue Static Star Rating Component

September 27, 2020

Customize <b-form-rating>

  • static/readonly
  • remove border
  • inline
  • CSS might need to be adjusted further
<template>
  <div>
    <b-form-rating v-model="rateStar" readonly no-border size="sm" inline color="orange" class="star-rating">
  </div>
</template>

<script>
export default {
  data() {
    return {
      rateStar: 3
    }
  }
}
</script>

<style>
.star-rating {
  padding: 0;
  font-size: inherit;
  height: inherit;
  vertical-align: middle;
}
</style>
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.