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 a time picker and images.
Time Picker Internationalization
We can change the label values of the time picker to make it work with different locales.
For example, we can write:
<template>
<div id="app">
<b-form-timepicker v-model="value" v-bind="de" show-seconds :locale="locale"></b-form-timepicker>
<div>Value: {{ value }}</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: "",
de: {
labelHours: "Stunden",
labelMinutes: "Minuten",
labelSeconds: "Sekunden",
labelIncrement: "Erhöhen",
labelDecrement: "Verringern",
labelSelected: "Ausgewählte Zeit",
labelNoTimeSelected: "Keine Zeit ausgewählt",
labelCloseButton: "Schließen"
}
};
}
};
</script>
We have the v-bind directive that binds the labels as props to the b-form-timerpicker component.
Now we’ll see Germany labels for the controls instead of the default English labels.
Hour Cycle
We can change how the hours are displayed by changing the hour cycle.
There are 4 ways to display the hours.
'h12' displays from 1 to 12.
'h23' displays from 0 to 23.
'h11' displays 0 to 11, and 'h24' displays 1 to 24.
These are all available as their own props.
To display hours in the 12-hour style, we set the hour12 prop to true.
To display 24 hours style, we set hour12 to false .
The formatted time string may be h12 or h23 depending on the value returned by Intl.DateTimeFormat .
For instance, we can write:
<template>
<div id="app">
<b-form-timepicker v-model="value" :hour12="true" :locale="locale"></b-form-timepicker>
<div>Value: {{ value }}</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: ""
};
}
};
</script>
and display hours from 1 to 12, but it can be formatted as 0 to 11 or 1 to 12 depending on the locale.
Images
We can add the b-img component to display responsive images.
There’s also the b-img-lazy to load images only when they’re shown on the screen.
For instance, we can write:
<template>
<div id="app">
<b-img src="http://placekitten.com/200/200" fluid alt="cat"></b-img>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
to add an image to the component.
fluid means that the image won’t grow with its container.
To make it grow with the container, we can use the fluid-grow prop.
For instance, we can write:
<template>
<div id="app">
<b-img src="http://placekitten.com/200/200" fluid-grow alt="cat"></b-img>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Thumbnails
To make the image with the thumbnail, we can use the thumbnail prop.
For example, we can write:
<template>
<div id="app">
<b-img src="http://placekitten.com/200/200" thumbnail></b-img>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
This will make the image display as a thumbnail.
Rounded Corners
We can make the image corners rounded by using the rounded prop.
For instance, we can write:
<template>
<div id="app">
<b-img src="http://placekitten.com/200/200" rounded></b-img>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Now we have rounded corners on our image.
It can also have a set value set for it, including 'top' , 'right' , 'bottom' , 'left' , 'circle' , or a 0.
0 turns off rounding.
So we can write:
<template>
<div id="app">
<b-img src="http://placekitten.com/200/200" rounded="circle"></b-img>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then we can see the images rounded.
Aligning Images
We can align the images by adding the left, center and right props.
For instance, we can add the image by using those props as follows:
<template>
<div id="app">
<b-img src="http://placekitten.com/200/200" right></b-img>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then we align the image to the right side of the page.
Solid Color Images
We can make the image a solid color.
For instance, we can write:
<template>
<div id="app">
<b-img blank blank-color="green" alt="green image" width='200' height='200'></b-img>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We have the blank prop to make the image blank.
blank-color sets the color.
alt is the descriptive text.
width is the width and height is the height of the image.
Conclusion
We can customize the locale of the time picker.
Also, we can add images with the b-img component.
They can have an image or be blank.
