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.
We look at how to customize spinners and add basic tables.
Aligning Spinners
We can add classes or alignment.
For instance, we can write:
<template>
<div id="app">
<b-spinner class="m-5"></b-spinner>
</div>
</template>
<script>
export default {};
</script>
to add the m-5 class to add some margins around the spinner.
Placement
The placement of the spinner can be changed.
For example, we can write:
<template>
<div id="app">
<div class="d-flex align-items-center">
<b-spinner></b-spinner>
</div>
</div>
</template>
<script>
export default {};
</script>
to center align the spinner.
Floats
We can apply the float classes that come with Bootstrap to put the spinner left or right.
So we can write:
<template>
<div id="app">
<div class="clearfix">
<b-spinner class="float-right"></b-spinner>
</div>
</div>
</template>
<script>
export default {};
</script>
to use the clearfix class so that we can float the spinner to the right.
Text Align
We can use the text-center class to align the spinner to the center of the page:
<template>
<div id="app">
<div class="text-center">
<b-spinner></b-spinner>
</div>
</div>
</template>
<script>
export default {};
</script>
Spinners in Buttons
We can put spinners in buttons.
For example, we can write:
<template>
<div id="app">
<b-button variant="primary" disabled>
<b-spinner small></b-spinner>Loading...
</b-button>
</div>
</template>
<script>
export default {};
</script>
We have the spinner inside a button along with some text.
Tables
BootstrapVue comes with the b-table component to let us display tables.
There are 2 lighter weight alternatives, which are b-table-lite and b-table-simple .
For example, we can write:
<template>
<div id="app">
<b-table striped hover :items="items"></b-table>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ firstName: "alex", lastName: "green" },
{ firstName: "may", lastName: "smith" },
{ firstName: "james", lastName: "jones" }
]
};
}
};
</script>
We have the items prop that takes an array of objects to render into a table.
striped makes the rows alternate in color.
hover makes the rows highlight when it’s hovered.
The property names are automatically mapped to individual words and capitalize each word.
This conversion is done for kebab case, snake case, or camelCase property names.
We can add the _rowVariant or _cellVariant properties to change the styles of various cells.
For example, we can write:
<template>
<div id="app">
<b-table striped hover :items="items"></b-table>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ firstName: "alex", lastName: "green", _rowVariant: "success" },
{
firstName: "may",
lastName: "smith",
_cellVariants: { lastName: "info", firstName: "warning" }
},
{ firstName: "james", lastName: "jones" }
]
};
}
};
</script>
_rowVariant makes the whole row the same color.
'success' makes the background green
_cellVariants makes individual cells a different color.
So lastName is light blue since it hs variant 'info' .
And firstName ‘s variant is 'warning' so it’s yellow.
The _cellVariants and _rowVariants only applies to the entry that they are in.
Fields
We can specify how the fields are displayed explicitly.
b-table can take a fields prop with an array of field to display.
For example, we can write:
<template>
<div id="app">
<b-table striped hover :items="items" :fields='fields'></b-table>
</div>
</template>
<script>
export default {
data() {
return {
fields: ["firstName"],
items: [
{ firstName: "alex", lastName: "green" },
{
firstName: "may",
lastName: "smith"
},
{ firstName: "james", lastName: "jones" }
]
};
}
};
</script>
Since fields is [“firstName”] , only the First Name column is displayed.
Fields as an Array of Objects
We can have an array of objects for the fields array.
For example, we can write:
<template>
<div id="app">
<b-table striped hover :items="items" :fields="fields"></b-table>
</div>
</template>
<script>
export default {
data() {
return {
fields: [
{
key: "lastName",
sortable: true
},
{
key: "firstName",
sortable: false,
variant: "success"
}
],
items: [
{ firstName: "alex", lastName: "green" },
{
firstName: "may",
lastName: "smith"
},
{ firstName: "james", lastName: "jones" }
]
};
}
};
</script>
We have the fields array with the entries being key , sortable , and variant .
key is the property name of the items entries.
variant is the styling variant like primary or success ,
sortable indicates whether the column is sortable.
Therefore, the Last Column is sortable and First Name is not.
Conclusion
We can style and place spinners the way we like with some classes.
Also, we can create simple tables by passing in a few arrays as props into the b-table component.
