BootstrapVue — Star Rating and Drop Downs

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to customize star rating inputs and adding dropdowns.

Clear Button

The show-clear prop lets us add a clear button to reset the selected ratings.

For instance, we can write:

<template>
  <div id="app">
    <b-form-rating id="rating-inline"  show-clear show-value  value="4"></b-form-rating>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: 4
    };
  }
};
</script>

Then there’s an ‘x’ button on the left that we can click to clear the ratings.

Icons

The icons in the rating can be changed.

Therefore, we can display something other than a star.

We’ve to register the IconsPlugin to change the icons.

So we’ve to write:

import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

in main.js .

Then in our component, we write:

<template>
  <div id="app">
    <b-form-rating
      icon-empty="heart"
      icon-half="heart-half"
      icon-full="heart-fill"
      icon-clear="x-square"
      precision="2"
      show-clear
      show-value
      v-model='value'
    ></b-form-rating>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: 3.5
    };
  }
};
</script>

We set the icon-empty , icon-half , icon-full , and icon-clear props. to change the icons.

icon-empty is for icons that aren’t filled.

icon-half is for the half-filled icons.

icon-full is for the icons that are fully filled.

icon-clear is the icon for the clear button.

Internationalization

The locale of the buttons can be changed.

We can set the locale prop to set the locale.

For instance, we can write:

<template>
  <div id="app">
    <b-form-rating :locale="locale" v-model="value"></b-form-rating>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      locale: "en-US"
    };
  }
};
</script>

to set the locale string.

Select Dropdown

BootstrapVue provides us with a b-form-select component to let us add dropdown menus to our forms.

For instance, we can write:

<template>
  <div id="app">
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <p>{{ selected }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: null,
      options: [
        { value: null, text: "Select a Fruit" },
        { value: "apple", text: "Apple" },
        { value: "orange", text: "Orange" },
        { value: "grape", text: "Grape", disabled: true }
      ]
    };
  }
};
</script>

to create a dropdown menu.

We have an options array, which has the value and text properties.

The text property is what’s displayed.

value is the value that’s set as the value of the state.

disabled will prevent the option from being selected if it’s true .

We set the array as the value of the options prop.

The selected value is displayed in the p element.

The size can be set with the size prop like other components.

Options

We can add option elements individually with the b-form-select-option component.

For example, we can write:

<template>
  <div id="app">
    <b-form-select v-model="selected" :options="options">
      <b-form-select-option :value="null">Select a Fruit</b-form-select-option>
      <b-form-select-option value="apple">Apple</b-form-select-option>
      <b-form-select-option value="orange">Orange</b-form-select-option>
      <b-form-select-option value="grape" disabled>Grape</b-form-select-option>
    </b-form-select>
    <p>{{ selected }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: null
    };
  }
};
</script>

We have the b-form-select-option components.

The value prop is the value that’s bound to the selected state.

disabled stops the option from being selected.

Option Groups

The b-form-select-option-group lets us add groups of options.

For instance, we can write:

<template>
  <div id="app">
    <b-form-select v-model="selected" :options="options">
      <b-form-select-option :value="null">Select a Fruit</b-form-select-option>
      <b-form-select-option value="apple">apple</b-form-select-option>
      <b-form-select-option-group label="orange">
        <b-form-select-option :value="{orange: 'juice'}">orange juice</b-form-select-option>
        <b-form-select-option :value="{ orange: 'ice cream' }">orange ice cream</b-form-select-option>
      </b-form-select-option-group>
    </b-form-select>
    <p>{{ selected }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: null
    };
  }
};
</script>

to add option groups.

We have the b-form-select-option-group and b-form-select-option components.

The label prop is displayed as the heading of the group.

Conclusion

We can customize star rating components by adding icons and changing sizes.