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.
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.
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.****
#javascript