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 look at how to set the time picker’s locale.
We also look at how to display toasts.
Time Picker Internationalization
We can set the locale of the time picker with the locale prop.
For example, we can write:
<template>
<div id="app">
<b-time v-model="value" locale="de" v-bind="labels"></b-time>
<p>{{value}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: "",
labels: {
labelHours: "Stunden",
labelMinutes: "Minuten",
labelSeconds: "Sekunden",
labelIncrement: "Erhöhen",
labelDecrement: "Verringern",
labelSelected: "Ausgewählte Zeit",
labelNoTimeSelected: "Keine Zeit ausgewählt"
}
};
}
};
</script>
We set the locale to 'de' for German.
Then we set the props for the labels with v-bind='labels' .
Now we see German labels for all the time picker controls.
Hours Cycle
The hours cycle may differ between locales.
h12 is an hours system using 1 to 12 for hours.
h23 is an hours system using 0 to 23 for hours.
h11 is an hours system using 0 to 11 for hours.
h24 is an hours system using 1 24 for hours.
Force 12 or 24 Hours Interface
We can set hour12 to true to force the time picker to display 12 hours.
If it’s false it’ll display 24 hours.
Whether it starts with 0 or 1 depends on the locale.
We can write:
<template>
<div id="app">
<b-time v-model="value" hour12></b-time>
<p>{{value}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: ""
};
}
};
</script>
to force the hours selector to have 12 hours.
Toasts
We can display push notifications with the b-toast component.
For example, we can write:
<template>
<div id="app">
<b-button variant="primary" @click="$bvToast.show('toast')">Show toast</b-button>
<b-toast id='toast' title="Hello">Hello.</b-toast>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We create a button that calls $bvToast.show(‘toast’) to open a toast.
The argument is the ID value of the toast.
The toast is created with the b-toast method.
The title prop is the content for the title.
The content between the tags is the toast’s content.
Titles are optional but should be included.
There’s also a close button on the top right to close the toast.
We can disable that with the no-close-button prop.
The title bar is shown unless we give it no title and set the no-close-button prop.
Auto-hide can be enabled.
The countdown will pause when we hover over the text.
We can disable that with the no-hover-pause prop set to true .
Transparency can be disabled by setting the solid prop to true .
Toasts on Demand
We can create a toast with the this.$bvToast.toast method.
For example, we can write:
<template>
<div id="app">
<b-button @click="makeToast()">Show toast</b-button>
<b-button @click="makeToast(true)">Show appended toast</b-button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
makeToast(append = false) {
this.$bvToast.toast(`hello`, {
title: `toast ${append ? "appended": ''}`,
autoHideDelay: 5000,
appendToast: append
});
}
}
};
</script>
We can create a toast by using the this.$bvToast.toast method.
The first argument is the content of the toast.
The 2nd is an object with various options.
The title property sets the title.
autoHideDelay sets the duration that the toast will show in milliseconds.
appendToast will display the toast below the other ones if it’s true .
Options
Toasts can have many options.
The title prop lets us change the title.
The solid prop lets us change the transparency. There’s no transparency if this is true .
The variant prop lets us change the style of the prop.
For example, we can write:
<template>
<div id="app">
<b-button @click="makeToast()">Show toast</b-button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
makeToast() {
this.$bvToast.toast(`hello`, {
title: 'toast',
autoHideDelay: 5000,
variant: 'success'
});
}
}
};
</script>
Then the background of the toast will be green since we set variant to 'success' .
Other possible values for variant include 'primary' , 'secondary' , 'danger' , 'warning' , and 'info' .
Conclusion
The locale and labels for the time picker can be changed.
The hours selector can have 12 or 24 hours depending on our choice.
Toasts are easy to add with built-in methods.
