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 add media and modal components.
Media
We can add components to show media that sits beside another component.
To do that, we add the b-media component.
We can use it as follows:
<template>
<div id="app">
<b-media>
<template v-slot:aside>
<b-img blank blank-color="#ccc" width="50" alt="placeholder"></b-img>
</template>
<h5 class="mt-0">Title</h5>
<p>foo</p>
<p>bar</p>
</b-media>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We put something in the aside slot as indicated with the v-slot:aside directive.
We put an image inside.
Outside of it, we add some text.
aside will put the image on the left and the text will be on the right.
We can also nest them, so we can write:
<template>
<div id="app">
<b-media>
<template v-slot:aside>
<b-img blank blank-color="#ccc" width="50" alt="placeholder"></b-img>
</template>
<h5 class="mt-0">Title</h5>
<p>foo</p>
<b-media>
<template v-slot:aside>
<b-img blank blank-color="green" width="50" alt="placeholder"></b-img>
</template>
<h5 class="mt-0">Nested Media</h5>
<p class="mb-0">
bar
</p>
</b-media>
</b-media>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then we have another b-media component inside the outer one.
Align Image
We can align images the way we like.
To do that, we use the b-media-aside component with the vertical-align prop.
For instance, we can write:
<template>
<div id="app">
<b-media no-body>
<b-media-aside vertical-align="center">
<b-img blank blank-color="#ccc" width="64" height="128" alt="placeholder"></b-img>
</b-media-aside>
<b-media-body class="ml-3">foo</b-media-body>
</b-media>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We have the b-media-aside component to put the image on the left side.
vertica-align='center' will make the image vertically centered.
b-media-body create a body to the right of the image.
Order
We can flip the order of the image and the text with the right-align prop.
For example, we can write:
<template>
<div id="app">
<b-media right-align>
<template v-slot:aside>
<b-img blank blank-color="#ccc" width="30" alt="placeholder"></b-img>
</template>
<p>foo</p>
</b-media>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Now we have the b-img component displayed on the right instead of the text.
Media List
The tag prop lets us render our media b-media components with the tag we want.
For example, we can write:
<template>
<div id="app">
<ul>
<b-media tag="li">
<template v-slot:aside>
<b-img blank blank-color="#ccc" width="30" alt="placeholder"></b-img>
</template>
<p>foo</p>
</b-media>
<b-media tag="li">
<template v-slot:aside>
<b-img blank blank-color="blue" width="30" alt="placeholder"></b-img>
</template>
<p>bar</p>
</b-media>
<b-media tag="li">
<template v-slot:aside>
<b-img blank blank-color="green" width="30" alt="placeholder"></b-img>
</template>
<p>baz</p>
</b-media>
</ul>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then we render our b-media component as li elements.
Modals
Modals are dialog boxes that are powered by JavaScript and CSS.
We can create a simple one with the b-modal component.
For example, we can write:
<template>
<div id="app">
<b-button v-b-modal.modal>open modal</b-button>
<b-modal id="modal" title="Hello">
<p>Hello!</p>
</b-modal>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We have the b-button with the v-b-modal.modal directive.
The modal modifier is the value of the id prop of the modal we want to open.
The b-modal component is the modal itself.
title is the title of the modal and it’s displayed on the top.
The content is between the tags.
It also has the OK and Cancel buttons by default.
We can hide the Cancel button with the ok-only prop.
The ok-title prop lets us change the OK button’s text.
The cancel-title prop lets us change the Cancel button’s text.
We can use the modal-ok and modal-cancel slots to change the button content.
The modal-title slot lets us change the title’s content.
The modal-header slot lets us change the modal header.
The modal-footer slot lets us change the footer content.
Conclusion
The b-media component lets us add an image with text side by side.
Modals are dialog boxes that overlay our main content.
Photo by